Skip to content
Submitted over 3 years ago

Advice generator app - HTML, SCSS, JS, API and mobile-first!

accessibility, bem, sass/scss, fetch
darryncodes•6,350
@darryncodes
A solution to the Advice generator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi everyone 👋

I had a little fun with this one, as the advice is cached for 2 seconds I decided to add a loader and disable the button until some more advice was able to be fetched.

Any feedback that could help me to improve my understanding of working with APIs is very welcome. I'm thinking about adding some error handling.

Anyway until next time, happy coding 🤙

Code

Please log in to post a comment

Log in

Community feedback

  • Travolgi 🍕•31,300
    @denielden

    Hi Darryncodes, Great job!

    To make it look less square and as close to the design as possible I would use width: 30rem instead of max-width in the slip class and in the mobile I would use padding-inline on the body to make sure there is some space around the card

    Hope this help and happy coding!

  • Grover Richardson•60
    @groverrichardson

    Great job man! The loading animation is a great touch. I would trim the timing of it to match up better with when the advice actually loads. I haven’t gone too far in the code, but my assumption the animation is hard coded or preset time-wise. The loading should stop when the page is fully loaded.

    Also the dimensions of the card seem to be more square than intended. The original design dimensions are rectangular so I would go back and make sure the width and height match the design. But stay responsive.

    Overall great job!

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