Use of API to generate random advice

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!

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!