Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

Curriculum Help
1

Tell us what’s happening:

I don’t understand why I cannot pass step 6, 8, or 9.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Favorite Icon Toggler</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
  <ul class = "item-list">
    <li>why are you so sad for a girl so in love
       <button class = "favorite-icon" >&#9825;</button> 
      </li>
    <li> Do That Again
      <button class = "favorite-icon"> &#9825;</button>
      
    </li>
    <li> My Reckless Abondon
       <button class = "favorite-icon" > &#9825;</button>
      
    </li>

  </ul>
  </body>
</html>

/* file: styles.css */
.filled {
  background-color: red;
}

/* file: script.js */
const btns = document.querySelectorAll("favorite-icon");

const updateButton = (btn) => {
  if (btn.classList.contains("filled")) {
    btn.classList.remove("filled")
    btn.textContent = "&#9825;"
  } else if (!btn.classList.contains("filled")) {
    btn.classList.add("filled")
    btn.textContent = "&#10084;"
  }
}

btns.forEach(btn => {
  btn.addEventListener("click", () => {
    updateButton(btn);
  })
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-favorite-icon-toggler/66bf6bacf178eac7b96d4f5e.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hey @annacitrus,

Please remove the whitespace, which is present before &#9825;, from your button element.

Also, how are you linking your script.js file?

It seems like you forgot to mention what exactly favorite-icon is. Is it a class or id selector?