Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

Preview looks fine at first.
After I run the Tests, it does not pass the test 8 and the test 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>
    <h1>Kitchen Utensils</h1>
    <ul class="item-list">
      <li class="item">
        whisk
        <button id="whk" class="favorite-icon">&#9825;</button>
      </li>
      <li class="item">
        mixing bowel
        <button id="mxb" class="favorite-icon">&#9825;</button>
      </li>
      <li class="item">
        spoon
        <button id="spn" class="favorite-icon">&#9825;</button>
      </li>
    </ul>
  </body>
  <script src="script.js"></script>
</html>

/* file: styles.css */
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 150px;
}

.filled {
  color: red;
}


/* file: script.js */
const whk = document.getElementById("whk");
const mxb = document.getElementById("mxb");
const spn = document.getElementById("spn");

let whkFilled = false;
let mxbFilled = false;
let spnFilled = false;

whk.addEventListener("click", () => {
  if (whkFilled === false) {
    whk.classList.add("filled");
    whk.innerHTML = "&#10084;";
  } else {
    whk.classList.remove("filled");
    whk.innerHTML = "&#9825;";
  }
  whkFilled = !whkFilled;
});

mxb.addEventListener("click", () => {
  if (mxbFilled === false) {
    mxb.classList.add("filled");
    mxb.innerHTML = "&#10084;";
  } else {
    mxb.classList.remove("filled");
    mxb.innerHTML = "&#9825;";
  }
  mxbFilled = !mxbFilled;
});

spn.addEventListener("click", () => {
  if (spnFilled === false) {
    spn.classList.add("filled");
    spn.innerHTML = "&#10084;";
  } else {
    spn.classList.remove("filled");
    spn.innerHTML = "&#9825;";
  }
  spnFilled = !spnFilled;
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:142.0) Gecko/20100101 Firefox/142.0

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

1 Like
2

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

1 Like
3

Okay, I’ll start working through the troubleshooting steps.

4

@pkdvalis
I improved my code by replacing the separate whkFilled boolean variable with the classList.contains() method. This way, the code checks the element’s class directly to determine its state, which simplifies the logic and reduces the number of variables I need to manage.

1 Like