Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

Please guide me what I am doing wrong, test 7 and 8 are not passing

Your 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">
    <li>Science<span class="favorite-icon">&#9825;</span></li>
    <li>Mathematics<span class="favorite-icon">&#9825;</span></li>
    <li>Computer<span class="favorite-icon">&#9825;</span></li>
</ul>
</body>

</html>

/* file: styles.css */


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


function attri() {
    if(heartBtn.hasAttribute("filled")) {
   heartBtn.removeAttribute("filled");
   heartBtn.innerHTML = "&#9825;";
 }
 else {
   heartBtn.setAttribute("class", "filled");
   heartBtn.innerHTML = "&#10084;";
 }
}

heartBtn.addEventListener("click", attri);

Your browser information:

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

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

2

Please talk about how you are stuck in your efforts to figure out why tests 7 and 8 and not passing.

3
  1. Your version replaces all existing classes.
    Use this one instead:

SOLUTION REMOVED

  1. document.querySelector(".favorite-icon") only selects the first .favorite-iconelement it finds.
4

Nest the code from step 1 in a .forEach() function
`

5

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like
6

Ok sorry its my first time using the forum

1 Like
7

As said, all the spans needs an event listener (or using event delegation, if it worked with the tests).

Use classList for working with element classes.

9

Thank you @JeremyLT @lasjorg and @yhkq1

I followed your instruction, reads docs then I was able to do this project. I learnt a lot of new things. Thank you very much :slight_smile: