Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

I am confused on how I should proceed with this lab given I am hiding the natural styling of the button within the CSS stylesheet and only leaving the HTML entity. However, I want to fill that HTML entity with the color red. I am utilizing the .toggle() method to allow the addition and removal of the class “active” so that it can be toggled.

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>Spices</h1>
    <ul class="item-list">
      <li>
        Paprika <button class="favorite-icon" aria-label="Heart icon">&#9825;</button>
      </li>
      <hr />
      <li>
        Red Pepper <button class="favorite-icon" aria-label="Heart icon">&#9825;</button>
      </li>
      <hr />
      <li>
        Chili <button class="favorite-icon" aria-label="Heart icon">&#9825;</button>
      </li>
      <hr />
    </ul>
    <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
ul {
  width: 10rem;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
li {
  display: flex;
  justify-content: space-between;
}
hr {
  border-style: solid;
}
button {
  border-style: none;
  background: none;
}
button:hover {
  cursor: pointer;
}
.favorite-icon.active {
  fill: red;
}

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

btns.forEach((btn) => btn.addEventListener("click", () => {
  btn.classList.toggle("active");
}));

Currently, nothing happens.

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

2

Never mind, I misread a section of the instructions and was going about things the wrong way. Instead I should be changing the HTML entity itself. The same issue applies in this instance where I used a filled heart icon with the following HTML entity: :heart:

It doesn’t display it here, but it appears black in the Lab.

However, I seem unable to style it within the CSS stylesheet.

3

I realized some of the syntax errors I had and fixed the mistakes. I ended up solving the lab.