Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

I dont understand step 7 kindly assist. Should I create a new class?

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>
    
    <ul class="item-list">
      <li>
        <button 
        class="favorite-icon">&#9825;</button>
      </li>
      <li><button class="favorite-icon">&#9825;</button></li>
      <li>
      <button class=""favorite-icon">&#9825;</button>
      </li>
    </ul>
    <script src="script.js"></script>
  
  </body>
</html>

/* file: styles.css */


/* file: script.js */
const buttonElement=document.querySelectorAll(".favorite.icon");
class filled{
  constructor(){
    buttonElement.innerHTML="&#9825;"
  }
};
buttonElement.forEach((buttonElement)=>{
  buttonElement.addEventListener("click",()=>{
    if(buttonElement.classList.contains("filled")){
      buttonElement.classList.remove("filled");
      buttonElement.innerHTML="&#9825;";
    }else{
      buttonElement.classList.add("filled");
      buttonElemnt.innerHTML=" &#10084;"
    }
  })
})

Your browser information:

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

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

2

Hey, the wording is not very understandable… It means that you should have a selector that targets the filled class and use it to style it.

I’ll open an issue to make it clearer.

I’m assuming you mean test 7. Is that correct?

  1. The filled class should contain style information.

Or do you mean the 7th user story?

When a button element containing a heart is clicked, the heart symbol should toggle between &#9825; (empty heart) and &#10084; (filled heart), depending on its current state.

3

yes how do I access this class “filled”

4

You go to your styles.css file and create a selector for it. Do you know how to create a class selector?

5

double check here too you have an error, double quotes right that are not correct

6

buttonElemnt.innerHTML=" &#10084;"

Should be

code removed by moderator

If the code is still confusing, you can check out this working example

Working Example 
code removed by moderator
Or this one that has easy-to-read JavaScript code 
code removed by moderator

Happy coding :hugs:

7

hi @Tcip

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.