Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

My code works as the lab intends and the toggle is functionally sound but test 8 will not pass. Please advise.

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>
    <h1>Current Basket</h1>
    <ul class="item-list">
      <li>Apple
        <button class="favorite-icon">&#9825;</button></li>
      <li>Banana
        <button class="favorite-icon">&#9825;</button></li>
      <li>Orange
        <button class="favorite-icon">&#9825;</button></li>
    </ul>
    
  </body>
   <script src="script.js"></script>
</html>

/* file: styles.css */
.filled {
  background-color: hsl(350,80%,50%)
}



/* file: script.js */
let icon = document.querySelectorAll("button")

function toggle1() {
  if (icon[0].innerHTML == "♡") {
  icon[0].innerHTML = "&#10084;"
  icon[0].setAttribute("class", "filled")
  }
  else if (icon[0].innerHTML == "❤") {
    icon[0].innerHTML = "&#9825;"
    icon[0].removeAttribute("class", "filled")
  }
}
function toggle2() {
  if (icon[1].innerHTML == "♡") {
  icon[1].innerHTML = "&#10084;"
  icon[1].setAttribute("class", "filled")
  }
  else if (icon[1].innerHTML == "❤") {
    icon[1].innerHTML = "&#9825;"
    icon[1].removeAttribute("class", "filled")
    
  }
}
function toggle3() {
  if (icon[2].innerHTML == "♡") {
  icon[2].innerHTML = "&#10084;"
  icon[2].setAttribute("class", "filled")
  }
  else if (icon[2].innerHTML == "❤") {
    icon[2].innerHTML = "&#9825;"
    icon[2].removeAttribute("class", "filled")
  }
}



icon[0].addEventListener("click", toggle1)
icon[1].addEventListener("click", toggle2)
icon[2].addEventListener("click", toggle3)

Your browser information:

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

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler
https://www.freecodecamp.org/learn/full-stack-developer/lab-favorite-icon-toggler/build-a-favorite-icon-toggler

2

you are asked to base the behaviour on if the button has the class or not, you are basing it on what is the content of the button

3

Many thanks. What would be the best javascript method to use to check the attribute/class of a html element? I cannot find one to use. I tried “getAttribute” but the test still fails.

function toggle1() {

  if (icon[0].getAttribute("class") != "filled") {

  icon[0].innerHTML = "&#10084;"

  icon[0].setAttribute("class", "filled")

  }

  else if (icon[0].getAttribute("class") == "filled") {

    icon[0].innerHTML = "&#9825;"

    icon[0].removeAttribute("class", "filled")

  }
4

look at classList instead

5

Still no luck, tried classList == "filled” and classList.value == “filled” but both fail test 8 still. Perhaps there are more errors elsewhere in my code?

function toggle1() {
  if (icon[0].classList.value != "filled") {
  icon[0].innerHTML = "&#10084;"
  icon[0].setAttribute("class", "filled")
  }
  else if (icon[0].classList.value == "filled") {
    icon[0].innerHTML = "&#9825;"
    icon[0].removeAttribute("class", "filled")
  }
function toggle2() {
  if (icon[1].classList.value != "filled") {
  icon[1].innerHTML = "&#10084;"
  icon[1].setAttribute("class", "filled")
  }
  else if (icon[1].classList.value == "filled") {
    icon[1].innerHTML = "&#9825;"
    icon[1].removeAttribute("class", "filled")
    
  }
}
function toggle3() {
  if (icon[2].classList.value != "filled") {
  icon[2].innerHTML = "&#10084;"
  icon[2].setAttribute("class", "filled")
  }
  else if (icon[2].classList.value == "filled") {
    icon[2].innerHTML = "&#9825;"
    icon[2].removeAttribute("class", "filled")
  }
}
6

that’s not how it work, I suggested you research how it works

7

hmm, I’m unsure what you mean, as my code now checks if the button has the class, and removes the class from the button if the class is present, as the lab directs. The app also runs as intended. Sorry I am slow, but I have read how the classList method works and still don’t understand what I am missing.

function toggle1() {
  if (icon[0].classList.value != "filled") {
  icon[0].innerHTML = "&#10084;"
  icon[0].setAttribute("class", "filled")
  }
  else if (icon[0].classList.value == "filled") {
    icon[0].innerHTML = "&#9825;"
    icon[0].classList.remove("filled")
  }
}
function toggle2() {
  if (icon[1].classList.value != "filled") {
  icon[1].innerHTML = "&#10084;"
  icon[1].setAttribute("class", "filled")
  }
  else if (icon[1].classList.value == "filled") {
    icon[1].innerHTML = "&#9825;"
    icon[1].classList.remove("filled")
    
  }
}
function toggle3() {
  if (icon[2].classList.value != "filled") {
  icon[2].innerHTML = "&#10084;"
  icon[2].setAttribute("class", "filled")
  }
  else if (icon[2].classList.value == "filled") {
    icon[2].innerHTML = "&#9825;"
    icon[2].classList.remove("filled")
  }
}
8

I mean that classList does not work like that, you need to use the available methods to work with it

I am unsure how you did not find this page, it’s one of the first research results

Notice the lack of a classList.value anywhere

9

Ah yes, I got classList.value from w3schools, but the lab was looking a different method which I missed. Thank you for the help.

10

HTML DOM Element classList Property this page? there isn’t classList.value yet

11

Yes, on that page under the heading “classList Properties and Methods”, you should see a table with the classList property’s methods and their description. The value() method is listed at the bottom.