Advice generator app

Hello!

Here are some things i think you can improve in your project:

CSS:

• Would suggest having the height 100% in body, html and main so that your background color covers the whole page.

• Have spacing between your selectors so it is easier to read.

JS:

• Instead of using an XMLHttpRequest try using the newer more modern way using fetch.

• Object deconstructuring. Instead of having to type out each name like data.slip.advice // data.slip.id you can write as const { advice, id } = data.slip which is the same as creating two variables const advice = data.slip.advice and const id = data.slip.id.

• Template literals. Instead of writing text.textContent = '"' + advice.slip.advice + '"';. You can use `` and inside these you can type your variables using ${variable}.

    try {
       const response = await fetch("https://api.adviceslip.com/advice")
       const data = await response.json();
       const { advice, id } = data.slip;  
       text.textContent = `"${advice}"`; 
       adviceId.textContent = `ADVICE # ${id}`;
    } catch (error) {
        console.log(error)
    }
}

fetchData();

button.addEventListener("click", fetchData)