Frontend Mentor | Mobile First Advice Generator API App coding challenge solution

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

@HarmoniaCodes

Posted almost 2 years ago

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

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.
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.
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

Mobile First Advice Generator API App

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community