Skip to content
Submitted almost 3 years ago

Mobile First Advice Generator API App

Shaun Pour•630
@ShaunPour
A solution to the Advice generator app challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Nick•160
    @HarmoniaCodes

    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

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