Skip to content
Submitted over 3 years ago

Html sass and js advice generator

fetch, sass/scss
Rémy Boiré•350
@remyboire
A solution to the Advice generator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi, my name is Rémy and this is my first challenge here !

As a junior programmer, I never tried to work with API yet. This challenge was a perfect first approach for me. I had trouble with fetch cache control because I wasn't aware about it. In my first version I made an setTimeout function who compared the last advice to the new one and loop while those to were similar. I implemented a loader to handle the waiting time. Adding { cache: 'no-cache' } remove the problem but I kept the loader just in case API doesn't respond fast enough. I also added a condition when the user click on the button to avoid queuing requests.

Thanks for taking the time to look at my project, any feedback are welcome :)

Code

Please log in to post a comment

Log in

Community feedback

  • Chamu•13,860
    @ChamuMutezva

    Hi. Congratulations on completing your first challenge. Here are a few items that you can have a look at:

    • a site should have a heading, especially the first heading element (h1) - that should be always be the first heading of your site.
    • the advice__dice is supposed to be a button. An anchor element is used for navigation to other pages or sections on a page, whereas in this instance this is more to do with click events for generating the quotes.
    • the site looks good on desktop , but on mobile(below 390px) , the divider does not look great. There is an overflow, check the impact caused by max-width: min(444px, 100% - 140px);
    Marked as helpful
  • Shashree Samuel•8,860
    @shashreesamuel

    Hey good job completing this challenge.

    Keep up the good work

    Your solution looks great however I think that your button needs a bit less padding and a bit of margin to the bottom.

    In terms of your accessibility issues simply wrap all your content between main tags

    I hope this helps

    Cheers Happy coding 👍

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