Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

My “.filled” class is toggling on and off like it should, but once the heart icon changes it doesn’t change back when clicked. Any help would be great, thanks!

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>Best Kinds of Cats:</h1>

    <ul class="item-list">
      <li>Ginger Cats <button class="favorite-icon">&#9825;</button></li>
      <li>Tuxedo Cats <button class="favorite-icon">&#9825;</button></li>
      <li>Tabby Cats <button class="favorite-icon">&#9825;</button></li>
    </ul>
  
  <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
  font-family: sans-serif;
}

h1 {
  margin: 20px;
  color: teal;
}

ul {
  list-style-type: none;
  border: 5px double teal;
  margin: 20px;
  padding: 30px;
  border-radius: 40px;
  line-height: 2;
}

button {
  padding: 3px 6px;
  border-radius: 20px;
}

.filled {
  border: 2px solid teal;
}

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

// toggle class .filled & set icon
const toggleIcon = (btn) => {
  btn.classList.toggle("filled");
  btn.innerHTML === "&#10084;" ? 
    btn.innerHTML = "&#9825;" : 
    btn.innerHTML = "&#10084;";
};

// adds event listener to each btn
btns.forEach((btn) => {
  btn.addEventListener("click", () => toggleIcon(btn))
});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

2

Please review the syntax for a ternary.

JavaScript Ternary Operator - GeeksforGeeks

3

Ok I tried changing this line of code to:

btn.innerHTML = btn.innerHTML === "&#10084;" ? "&#9825;" : "&#10084;";

But with the same result as before..

4

Can you think of another condition for your ternary that might be better?

5

I split this into an if..else and used add and remove instead of toggle for the icon, and everything passes - but I still don’t understand why the ternary didn’t work. Is it just better to keep all the logic together when changing multiple things? Rather than handling them separately?

6

Not sure I’m following what you did. Would you post your updated code please?

7

Everything deletes after moving past the exercise, but I think it was like

if (btn.classList.contains("filled") {
  btn.classList.remove("filled");
  btn.innerHTML = "&#9825;";
} else {
  btn.classList.add("filled");
  btn.innerHTML = "&#10084;";
}

And it passed. I just don’t know if there would have been a way to make the ternary pass? Or why the conditional has to be on the “filled” class and it didn’t work to check the text content of the button?

8

that may be how the tests are written

1 Like