Use of API to generate random advice

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarim

  Posted over 2 years ago

  Hi again, Carol

  It's quite simple to store data in a local storage. In your sandbox.js file, add this code just before the catch block:

  localStorage.setItem('lastAdviceId', userid);
  localStorage.setItem('lastAdviceText', useradvice);
  

  It will store the current useradvice and userid variables which we could get later.

  Then, when the page is loaded, we need to retrieve those two variables (if available) and write it on the page. Add this code below:

  window.onload = function() {
    const advice= document.querySelector('.advise');
    const generateAdvice= document.querySelector('.advisegenerated');
  
    if (localStorage.getItem('lastAdviceId')) {
      generateAdvice.innerText= `"${localStorage.getItem('lastAdviceText')}"`
      advice.querySelector('span').innerText= `#${localStorage.getItem('lastAdviceId')}`;
    }
  }
  

  Please remember though, that localStorage will still store the data even after the browser is closed. You can read about it and its alternative storage in this w3schools article.

  Alternatively, we could run the function that get the advice from adviceslip.com and render them in the page at window.onload, thus you don't need to write "default #1 advice" from the start.

  Hope this helps. Happy fun coding!

  11

  Marked as helpful
• 

  Fazza Razaq Amiarso•2,320

  @fazzaamiarso

  Posted over 2 years ago

  Hello Caroline! Great work!

  Here is my way on saving the data to local storage. I did a bit of refactor.

  const getAdvice = async (adviceId) => {
      const params = adviceId === undefined ? 'advice' : `advice/${adviceId}`
      const base= `https://api.adviceslip.com/${params}`;
      const response = await fetch (base);
      return response.json()
  }
  
  const getFromLocalStorage = () => {
      return localStorage.getItem("adviceId");
  }
  
  const saveToLocalStorage = (adviceId) => {
      return localStorage.setItem("adviceId", adviceId);
  }
  
  const updateAdvice = (slip) => {
      const advice= document.querySelector('.advise');
      const generateAdvice= document.querySelector('.advisegenerated')
      // output the id of advice on the dom
      const useradvice = slip.advice;
      const userid = slip.id;
      
      generateAdvice.innerText= `" ${useradvice}"`
      advice.querySelector('span').innerText= `#${userid}`;
  }
  
  // fetch when first loaded
  document.addEventListener("DOMContentLoaded", () => {
      const savedAdviceId = getFromLocalStorage();
      getAdvice(savedAdviceId).then(response => {
          updateAdvice(response.slip);
      })
  })
  
  // click event
  const icon = document.querySelector('.icon');
  icon.addEventListener('click',()=>{
      getAdvice().then((response)=>{
          updateAdvice(response.slip);
          // save here
          saveToLocalStorage(response.slip.id)
      })
  })
  

  I hope it helps! Let me know if there are any problems! Cheers!

  01