Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

The website function works like it’s supposed to, however FCC removed hates me and doesn’t let me pass the tests 5-9

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>Speedwagon <button class="favourite-icon">♡</button></li>
      <li>Femboy Joseph <button class="favourite-icon">♡</button></li>
      <li>Mommy Bucciarati <button class="favourite-icon">♡</button></li>
    </ul>
      <script src="script.js" defer></script>
  </body>
</html>

/* file: styles.css */


/* file: script.js */
document.addEventListener("DOMContentLoaded", () => {const heartBtns = document.querySelectorAll(".favourite-icon")

heartBtns.forEach(btn => btn.addEventListener("click", () => {
  btn.classList.toggle("filled")
  if (btn.classList.contains("filled")) {
    btn.textContent = "♥"
  } else {
    btn.textContent = "♡"
  }
}))})

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 OPR/124.0.0.0

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

2

Your CSS didn’t come through. Please post that.

3

Please refrain from swearing on the forum, it’s not really necessary.

4

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

5

yeah real helpful dude

6

It’s up to you if you want to find the solution or not. These are pretty much the exact same steps I would take to debug any code.

Follow these steps and you can at least find the problem. It’s a critical skill

Are there any errors or messages in the console?

7

the instructions tells you to use something specific inside button, you are using something else

8

it’s just really specific about instructions.

  • check your spelling for button class value (task 5)
  • use .innerHTML and the specified symbol (task 9)

always double check the test results. your code can work as intended but you may still fail. the system isn’t human enough to tell. pay more attention to the failed tests in the future. happy coding.

9

Wouldnt have created this post if that actually worked

10

Yes thank you for giving me a solution after debugging for 2 hours instead of being told how to debug

11

Do you know the one about teaching a man to fish?

Error messages and test feedback will often give you everything you need to know to solve these on your own.

If you need help, sharing error messages or test feedback here will help.

As it is, you are just giving up and sending the problem to someone else to solve for you, instead of doing the work to solve it with help or even by yourself.

12

You don’t want to learn to debug? :thinking:

13

they’ve got a point. knowing how to debug would actually be more useful long-term. getting into programming means there’ll be a lot more of the same situations ahead, and you gotta be patient enough and try possible approaches before resorting to outside perspective. syntax issue is one thing but if you couldn’t see the issue when it was explicitly stated in the test results, maybe your way isn’t the best. take the others’ advice on debugging . I’d hate to stunt your growth with “the easy way out”.

1 Like
14

Literally have been doing the exact things they say, you would feel frustrated if your code works how its supposed to but theres this specific way you have to do it, you guys are acting like maths teachers

15

No but the man has already caught the fish, he’s being told it’s not a fish because he didn’t do it in a specific way

16

Unfortunately, you did not exactly meet the requirements, which is why your code did not pass. Almost meeting the requirements is usually not enough to pass the exact requirements.