Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

Failing test 6, but button contains proper code and starts out unfilled.

Failing tests 8 and 9, but I have a classList.toggle function and the output behaves properly.

How am I not meeting the requirements?

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>Favorite Icon Toggler</h1>
    <ul class="item-list">
      <li><span class="emoji-name">Star</span><span class="emoji">⭐️</span>
        <button class="favorite-icon"><span class="heart">&#9825</span></button>
      </li>
      <li><span class="emoji-name">Laugh-cry</span><span class="emoji">😂</span>
        <button class="favorite-icon"><span class="heart">&#9825</span></button>
      </li>
      <li><span class="emoji-name">Thumbs up</span><span class="emoji">👍</span>
        <button class="favorite-icon"><span class="heart">&#9825</span></button>
      </li>
    </ul>
    <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
h1 {
  text-align: center;
}

button {
  background: pink;
  border-radius: 10px
}

.filled {
  background: red;
}

.item-list {
  list-style-type: none;
  padding: 0;
}

.item-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.item-list li span {
    width: 100px; 
    text-align: left; 
}
.favorite-icon {
    margin-left: 10px;
}

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

buttons.forEach((btn) => {
  const heartSpan = btn.querySelector(".heart");
  btn.addEventListener("click", () => {
    btn.classList.toggle("filled");
    if (btn.classList.contains("filled")) {
        heartSpan.innerHTML = "&#10084;"; // Filled heart
    } else {
        heartSpan.innerHTML = "&#9825;"; // Empty heart
    }
  })
})

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.1 Safari/605.1.15 Ddg/26.1

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

2

Hi @dhorowitz001

Regarding test 6, you are not asked to nest the heart code in a span element.

Happy coding

3

Thank you. I refactored and passed all the tests.

1 Like