Skip to content
Submitted about 2 years ago

Mobile First Advice Generator API App

Shaun Pour•630
@ShaunPour
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

I found this one pretty fun. I don't have much experience building projects from APIs so this was some nice practice in that for me. The css was relatively simple which is good since I prefer to focus on functionality over looks myself. It was also a nice return to doing things in vanilla js as I've been doing mostly react projects lately.

Community feedback

  • Nick•160
    @HarmoniaCodesPosted about 2 years ago

    Hello Shaun! Great work completing the challenge! I have a few pieces of feedback based on your design:

    1. The advice div is very far down on the page. You may try using align-items or justify-content styles with flexbox to put the content in the center of the page. You may also want to double-check the design image to see that your fonts are set correctly.

    2. Your button has a few issues. The glow effect is missing for the active state. I noticed that the button is also not a perfect circle. Rather than using padding to create the width of the button, you might try setting a width, then an aspect-ratio of 1.

    3. Finally (and maybe most importantly), your button does not load new advice in firefox. Please check out the documentation here for more info: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities

    Best, Nick

    Marked as helpful
    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