Advice generator app with css flexbox and animations

Community feedback

• 

  Devmor•470

  @devmor-jPosted over 2 years ago

  Excellent ✨ this is good but see if we can make it better. There is a small bug on fetch call which prevents getting the new advice on Firefox browsers. I had the same problem and that was related to cache procsss. Hopefully this bug is fixed by adding {cache: 'no-store'} option to your fetch call like so:

  function getRandomAdvice() {
    // each new fetch is now forced to call api and not use the cached data
    fetch(endpoint, {cache: 'no-store'})
      .then((res) => res.json())
      .then((data) => {
        adviceNumber.textContent = `Advice #${data.slip.id}`;
        adviceText.textContent = `"${data.slip.advice}"`;
      });
    return;
  }
  

  One thing about responsive styles that I can suggest is to add min-width to your .advice-generator-container because currently as we get close to breakpoint of (max-width: 600px) the layout gets too small and (width: 25%) brings limited space. You can try this property on your container:

  .advice-generator-container {
  /* come up with a good number and test on medium screen sizes */
  min-width: 400px;
  }
  

  Please note that opinions are different. I hope these help and have fun coding, cheers 😀

  Marked as helpful

  1

  ---

  

  Nick•110

  @Fitsos17Posted over 2 years ago

  @devmor-j Thank you very much for your comments. I really really appreciate it. Thank you for your like too. You are awesome 8)

  1

  

  Devmor•470

  @devmor-jPosted over 2 years ago

  @Fitsos17 Sweet 😍 you're awesome too!

  1