Skip to content
Submitted about 2 years ago

Simple advice generator app using the Advice Slip API

JunoField•310
@JunoField
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Solution retrospective

This was my first time using HTTP fetch with an API - however I found it very straightforward. As always, feel free to leave any suggestions on what I could have done better.

Community feedback

  • Doston Nabotov•950
    @dostonnabotovPosted about 2 years ago

    Hi, there! The site looks great! I just analyzed your CSS. And, there are some problems with that. First, don't use #id in CSS. Because ids in CSS will increase the specificity, which can cause some issues later on. Use them for the JavaScript part. Often, classes are preferred in CSS.

    Also, your code is not consistent. You have declared values for specific elements, and rewriting them again with some changed values for different screen sizes. You need to find a better way to write CSS. I recommend watching YouTube videos by Kevin Powell, who teaches a lot about CSS, along with Sass.

    In terms of HTML, it looks messy if you use JavaScript inside your HTML. I recommend not doing so as you have done in the <body> and <button> tags. In your JS file, you can use addEventListener for it to handle all those "load" and "click" events.

    I hope it helps! Good luck!

    Marked as helpful
    2
    JunoField•310
    @JunoFieldPosted about 2 years ago

    @dostonnabotov

    Thanks for the comment! I'll keep all that in mind for the future.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord