Responsive Advice App Generator using TailwindCSS

Hi, Congratulations on successfully completing the challenge!

📌 Simplify javascript code

Here's my suggestion to simplify your code:

async function getAdvice() {
  const response = await fetch("https://api.adviceslip.com/advice");
  const data = await response.json();
  document.getElementById("advice-id").innerHTML = `A D V I C E  # ${data.slip.id}`;
  document.getElementById("advice-word").innerHTML = data.slip.advice;
}
getAdvice();

This code uses async or await instead of .then() to handle the response data from the API request. It also uses template literals to update the HTML content of the elements.

Also I have some additional recommendations for your code that I think you'll find interesting and valuable

📌 Add <main> tag as semantic HTML in code

• The <main> tag is a semantic HTML element that is used to define the main content of a web page.

• The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

for example code:

<main>
  <div class='container'>
    <h1>Article Title</h1>
    <p>Article content goes here...</p>
    .......................
  </div>
</main>

In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

I hope you found this helpful!

Happy coding🤖

an easy way to turn your javascript code simpler is call the function once, so you don't have to make fetch two times in the code

function getAdvice() {
  fetch("https://api.adviceslip.com/advice")
    .then((response) => response.json())
    .then((data) => {
      console.log(data)
      document.getElementById("advice-id").innerHTML = "A D V I C E  # " + data.slip.id;
      document.getElementById("advice-word").innerHTML = data.slip.advice;
    })
 }
 getAdvice()

the code will generate a phrase when the website is opened, just like your first fetch

To add the glowing effect on the button, a box shadow on hover will do the trick.

<button class="hover:shadow-md ..." />