Submitted about 2 years ago

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

#accessibility#bem#sass/scss#fetch

darryncodes• 6,430

@darryncodes

Preview site View code

This is a solution for...

Advice generator app

HTML
CSS
JS
API

2junior

View challenge

Design comparison

SolutionDesign

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 🤙

Community feedback

Travolgi 🍕• 31,500

@denielden

Posted about 2 years ago

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!

darryncodes• 6,430

@darryncodes

Posted about 2 years ago

Hi @denielden thanks for the feedback.

Have you tested this? It'd cause a blowout at any screen size 430px or less.

I went with a little creative license with the shape so that regardless the length of the advice in most cases the slip doesn't jump around.

Travolgi 🍕• 31,500

@denielden

Posted about 2 years ago

@darryncodes Yes, the slip doesn't jump thanks to min-height

Grover Richardson• 60

@groverrichardson

Posted about 2 years ago

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!

darryncodes• 6,430

@darryncodes

Posted about 2 years ago

Cheers Grover and thanks for taking the time to feedback.

Perhaps my use of the loading animation might be confusing, my intention was to feedback to the user when a new piece of advice is available. The advice is cached for 2 seconds. Any repeat-request within 2 seconds will return the same piece of advice.

Good spot. The shape was intentional as I didn’t want the card to jump around.

All the best!

Grover Richardson• 60

@groverrichardson

Posted about 2 years ago

@darryncodes gotcha! That makes more sense. Lol, I didn’t get that at first.

Maybe, take away the loading animation, and just gray out the button until it’s loaded? Either way, that was a great idea.

It’s probably just user preference anyways.

Overall this was great!

Please log in to post a comment

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