Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

I’m stuck on 7. You should have a .filled selector that sets some CSS properties. My hearts turn red and everything when I click on them.

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>item1<button class = "favorite-icon">&#9825;</button></li>
      <li>item2<button class = "favorite-icon">&#9825;</button></li>
      <li>item3<button class = "favorite-icon">&#9825;</button></li>      
   </ul>
   
   
   <style>
     /*CSS code*/
   .favorite-icon {
     background: none;
     border: none;
     font-size: 20px;
     cursor: pointer;
   }

.favorite-icon.filled {
  color:red;
  }

</style>


  <script> 
  /*JavaScript Code*/

   document.addEventListener("DOMContentLoaded", () => {
const buttons = document.querySelectorAll(".favorite-icon");

buttons.forEach(button =>{
button.addEventListener("click", () => {
button.classList.toggle("filled");
button.innerHTML = button.classList.contains("filled") ? "&#10084;" : "&#9825;";

    });
  });
});
 </script> 
  </body>
</html>



/* file: styles.css */


/* file: script.js */

Your browser information:

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

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

2

Hi @BooBoo212

Try placing the styles in the styles.css file.

  1. You should have a .filled selector that sets some CSS properties.

Make sure you are fulfilling the user story.

Happy coding

3

Thank you! It worked.

1 Like