All comments

• 

  Melwyn•250

  @melwyntSubmitted over 2 years ago

  The bigest challenge here was to retrieve a new advice on each new click on the dice. At first fetch or axios were not getting a new advice even though I was triggering a new request to the API url. This was due to fetch and axios caching data. To overcome this issue, the solution was to add a timestamp in the URL.

  Overall I'm pretty happy of the outcome and it was also fun to great that glow effect when hovering the dice.

  Hope you like this one!

  I would be super grateful if you could follow me here or on Twitter @melwyncode

  Thanks ❤️

  

  Advice Generator App using React, SASS/SCSS, Axios and Advice Slip API

  1

  71
  

  Ian Muchina•140

  @ianmuchinaPosted over 2 years ago

  Hello.

  One solution is to get an advice slip using it's id. eg: Get advice 100 by going to https://api.adviceslip.com/advice/100 Currently, the valid ids are those between 1 and 224.

  You can then generate a random number between 1 & 224 on the client side each time the button is clicked.

  Here's an example with fetch

  async function fetchRoll() {
     id = Math.floor(Math.random() * 224);
    
     // Get Remote Data
    let response = await fetch(`https://api.adviceslip.com/advice/${id}`);
    let data = await response.json();
  
    // Update DOM
    adviceId.innerText = data.slip.id;
    adviceText.innerText = data.slip.advice;
  }
  
  // When dice button is clicked
  dice.onclick = fetchRoll;
  

  0

  This comment has received 1 replyShow