Responsive "chicken soup for the soul" using Axios

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Catherine, I don't know why Firefox is having issues either (I'm a Firefox user); it could be certain security settings in the browser itself. But in any case I just tested your code, and the only issue I'm seeing is that the same advice is being given (which happens due to caching). In any case, here's something you can try:

  In your app.js file, add a line for generating a random number, and then insert that as a template literal into your URL:

  dice.addEventListener('click', async function getAdvice() {
    // random number generated
    const random = Math.floor(Math.random() * 200); 
  
    try {
      const res = await axios.get(`https://api.adviceslip.com/advice/${random}`); 
      // template literal here
  
      let advice = res.data.slip;
      showAdvice(advice);
      console.log(advice); 
    } catch (e) {
      console.log('error', e);
    }
  });
  
  

  I notice that your component starts with Advice #0, which can be a bit odd. You can consider inserting a number there (even just any arbitrary one, like 1) just to start with.

  Good luck!

  Marked as helpful

  0

  ---

  

  Catherine•110

  @boba-milkteaPosted over 2 years ago

  Hi Elaine,

  That is an efficient solution! Thank you so much for pointing that out. I will also add a number to advise id. Many thanks again!!

  Happy coding!

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @nitty-kitty Glad to help! :)

  0