Skip to content
Submitted over 2 years ago

Random Advice generator with Vue 3(Composition API) and SCSS

Vahe Abovyan•1,110
@VaheAA
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Solution retrospective

Pretty easy, but i notice one problem with API calls in Firefox (in Chrome all is good). After fetching first advice and clicking on the button to get new one, call response comes with the same advice every time and new object is fetched only after page reload, whenever in the Chrome all working fine. What it can be?

Community feedback

  • Oskar•330
    @slothmast3rPosted over 2 years ago

    Hey man! Great work!

    I studied your code and i found that you are repeating height: 100% in your css code (in main and #app). My personal choice is min-height: 100vh because you wont run on a problem like your content doesnt fit in div

    Marked as helpful
    1
  • Danilo Blas•6,300
    @Sdann26Posted over 2 years ago

    Hi, Vahe!

    I also had the same problem, to solve it I saw that fetch can receive a second argument where you can pass several options, so if you give it:

    fecth(url, option) , option = {'cache': 'no-cache'}

    You can make it not save the cache and give you different responses.

    Reference: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

    By the way, don't forget to correct the accessibility problems, good luck!

    Marked as helpful
    1
    Vahe Abovyan•1,110
    @VaheAAPosted over 2 years ago

    @Sdann26 Thank you, very helpful!

    1

Please log in to post a comment

Log in with GitHub

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