Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
33

log your variables to the console

34

I ask again, what are these two values you are comparing?

35

Ok I’ viewed the freeCodeCamp video/ lesson on querySelectorAll and have refactored my code. I also made sure my code did not have curly quotes. My code looks correct to me. I also read up about the className property. Why am i not passing tests 8 and 9?

36

That has been my problem for several days now. I 've been trying to log the variables and nothing happens, which is why I’ve been asking if i did something wrong in attaching the script.js file to the html file.

37

I’ve tried and do’t get a response in any way .

38

I don’t see any console.log() lines in your code?

console.log() is your best friend, it will tell you everything you want to know. If you ever want to know the value stored in a variable you can send it to the console, like this:

console.log(variable)
39

Hi teller. I have since refactored my JavaScript code to the following:

const itemList = document.querySelectAll("ul.item-list li");
for(let i = 0;i < itemList.length;i++){
  itemList[i].addEventListener("click",()=>{
    if(itemList[i].classList.contains("filled")){
      itemList[i].classList.remove("filled");
      itemList[i].innerHTML = "&#9825;";
    }else{
      itemList[i].classList.add("filled");
      itemList[i].innerHtml = "&#9825";
    }
  })
}. 
---------------------------------------------------------------
.filled{
  background-color: lightgray;
  color: pink;
  border: 2px solid crimson;
  border-radius: 10px;
}
40

Hi @dreyes61

Good work so far. I see an error message in the console.
image

Happy coding

41

Questions to ask yourself:

  1. What HTML elements am I clicking in the preview window?
  2. How can I get a reference to those HTML elements in my JavaScript code?

Also, to see the console window in the fCC UI, you need to click the Console button next to the Preview button. The last bit of code you posted is producing an error in the console:

image
image1287×747 54.2 KB

The ‘unexpected token’ has a squiggly red line under it in the code window and a caret in the console window is pointing to its location in your code with the line number. Once you fix that, you will see the error @Teller referred to. Then once you fix that and figure out what elements you’re really supposed to be applying the click event listener to, notice that you’re applying the same character entity in both your if and else statements.

42

Ok so i used a windows computer and got the desired result. The icons toggle with each button click. For some reason when I use an iPad or iPhone to code, I cannot get any results. Also I cannot pass tests 8 and 9 no matter what device I use..Any help would be greatly appreciated.
Here’s my updated code:

<!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>


.filled{
  background: lightgray;
  color: crimson;
  border: 2px solid pink;
  width: 100px;
  height: 30px;
}


const itemList = document.querySelectorAll("ul.item-list li");
  
//console.log(itemList)
for(item in itemList){
  item.addEventListener("click",()=>{
    if(item.classList.contains("filled")){
      item.classList.remove("filled");
      item.innerHTML = "&#9825;"
    }else{
       item.classList.add("filled");
       item.innerHTML="&#10084;";
    }
  })
}
43

When I paste your code, I am see this error in the console

Screenshot 2025-05-06 at 9.54.41 PM
Screenshot 2025-05-06 at 9.54.41 PM990×798 32.9 KB

You are using incorrect syntax.

But also, as you can see in the docs, I linked, for...in loops are used to loop over string properties of an object. It looks like in an earlier attempt, you were using a for loop. So that will work.

for...of or forEach also work

Once you fix that issue, then you need to look at this issue here

this will return a NodeList of all li items. However, the user story says this.

When a button element containing a heart is clicked

So you will need to target the correct element which in this case is the button element. Luckily that is a small change.

Once I fix those things, it passes for me.

44

I understand all of that but I tried console.g several times but I didn’t get any output until I switched devices.

45

I forgot to use let in declaring the item variable in the for loop.

1 Like