CSS, HTML and JS

Hi Shaun - Love job here! 🥳

One thing I would suggest in your JS is to add a check to ensure the API has responded correctly, and render an error message if not. This isn't too tricky, and I would just change the data variable to be something like:

  await response => response.ok ? response.json() : throw new Error("API Failed")

If you then wrap the inside of the fetchAdvice function in a try catch statement can render some fallback text in case things don't work for any reason. It's not a big deal, but thinking about how things can go wrong is a good habit to get into, something like:

const fetchAdvice = async() => {
   try {
     const res ...
    const data ....
    // rest of your code
     } 
     catch {
    document.getElementById("text").innerHTML = `"Sorry error or whatever"`
    }

Hope this helps.

Cheers 👋

Dave

Good job with this challenge shaunvan119. Keep up the good work.

In terms of your accessibility issues.

• You cannot have empty headings so you can just have ""

• Your button element needs a text to become clickable.

• Wrap all your content between main tags to fix the other accessibility issues.

I hope this helps

Cheers, Happy coding 👍