Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

The entitys after i click the button doesn’t show as an emoji instead, it shows as text

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>
    <li class="item-list">120 gm paper<button type="botton" class="favorite-icon">&#9825</button></li>
    <li class="item-list">130 gm paper<button type="botton" class="favorite-icon">&#9825</button></li>
    <li class="item-list">140 gm paper<button type="botton" class="favorite-icon">&#9825</button></li>
  </ul>
  <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */
.filled{
  //background-color:red;

}

/* file: script.js */
let bottomsArray=document.querySelectorAll(".favorite-icon")
console.log(bottomsArray)
bottomsArray.forEach((curr)=>{curr.addEventListener("click",()=>{curr.classList.toggle("filled");
curr.textContent=curr.textContent =="&#9825"?"&#10084":"&#9825";
 
})})

Your browser information:

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

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

https://www.freecodecamp.org/learn/full-stack-developer/lab-favorite-icon-toggler/build-a-favorite-icon-toggler

example:

image
image206×101 1.53 KB

2

Two things:

  1. You forgot to add semicolon after the entities code.
  2. Double-check your entities code, to me those entities code doesn’t look correct.
3

image
the colum dosent change anything, the entity codes are directly copied from the exercise

4

please post your updated code

5

There are issues with your button event listener:
To see the first issue, console.log() your ternary condition for both html entities.
Can you think of an alternative condition you could use?
And this stackoverflow post might help you resolve the other issue.

7

javascript:

let bottomsArray=document.querySelectorAll(".favorite-icon")
bottomsArray.forEach((curr)=>{curr.addEventListener("click",()=>{curr.classList.toggle("filled");
curr.textContent=curr.textContent =="&#9825;"?"&#10084;":"&#9825;";
 
})})

css

.filled{
  //background-color:red;

}

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>
    <li class="item-list">120 gm paper<button type="botton" class="favorite-icon">&#9825;</button></li>
    <li class="item-list">130 gm paper<button type="botton" class="favorite-icon">&#9825;</button></li>
    <li class="item-list">140 gm paper<button type="botton" class="favorite-icon">&#9825;</button></li>
  </ul>
  <script src="./script.js"></script>
  </body>
</html>
8

image
image1155×763 53.1 KB

9

Log this:

console.log(curr.textContent == "&#9825;")
console.log(curr.textContent == "&#10084;")

One of them should be true, right?

10

image
image980×732 49.4 KB
intresting fact is the 1st time i clicked the button is displays false false

11

image
image1048×767 49.9 KB

13

You shouldn’t be using AI in this forum…it’s actually against the rules. And, as you pointed out, when you click the button repeatedly, you do get true/false values. It’s just the first click that produces the false/false values.

14

i didnt know im going to delete it

15

im stuck on this exercise :frowning:

16

image
image1920×919 131 KB

17

You’ll figure it out. HINT: Look at all of your code…there may be discrepancies.
And don’t forget about that stackoverflow post.

18

i changed to insert as innerhtml so it would covert the html entities to emoji heart
my js:

let bottomsArray=document.querySelectorAll(".favorite-icon")
bottomsArray.forEach((curr)=>{curr.addEventListener("click",()=>{curr.classList.toggle("filled");
//console.log(curr.textContent =="&#9825;"?"&#10084;":"&#9825;")
 
console.log(curr.textContent )
curr.innerHTML=curr.textContent =="♡"?"&#10084;":"&#9825;";
 
})})

my code is literaly working

image
image1920×919 161 KB

:sob:

19

My tests werent passing is because FreeCodeCamp checks for the class logic explicitly, not just the heart toggle. it requiers me to not use toggle but an condition logic with contains method