Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

my code keeps on failing tests 5 and 6 (“Your individual list item should contain a button element with the class favorite-icon.” and
“Initially, the button elements should contain the code :heart: to represent an empty heart.”). What am I doing wrong?

My code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

<ul class = "item-list">
    <button class="favorite-icon" type="btn"></button) class="item-list">
    <li>a<span class="favorite-icon">&#9825;</span><button class="favorite-icon" type="btn"></button)</li>
    <li>b<span class="favorite-icon">&#9825;</span><button class="favorite-icon" type="btn"></button)</li>
    <li>c<span class="favorite-icon">&#9825;</span></li>


</ul>
<script src="script.js"></script>

/* file: styles.css */
.filled {
  color: rgb(1, 147, 59);
}

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

spans.forEach((span) => {
  span.addEventListener("click", () => {
    if (span.classList.contains("filled")) {
      span.classList.remove("filled");
      span.innerHTML = "&#9825;"; 
    } else {
      span.classList.add("filled");
      span.innerHTML = "&#10084;";  
    }
  });
});

Your browser information:

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

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

2

test 6 asks for the code &#9825; btw

3

This isn’t valid HTML:

Inside your ul element you should have three li elements.
Inside each of those li elements you should have a button element.

You have unnecessary span elements and broken syntax (e.g. </button) class="item-list">). I would start from an empty ul element and structure it exactly as described above.

4

the Span elements are how I get the heart icon inside the buttons btw

Thanks for pointing out the error I made there though

5

You are not following the directions. Please re-read user stories again carefully and do exactly what is asked.