fix(curriculum): more accessible icon picker (freeCodeCamp#59490)

a2937 · jdwilkin4 · web-flow · commit 8c5b0083fabd · 2025-04-09T15:45:02.000Z
Co-authored-by: Jessica Wilkins &lt;67210629+jdwilkin4@users.noreply.github.com&gt;
diff --git a/curriculum/challenges/english/25-front-end-development/lab-favorite-icon-toggler/66bf6bacf178eac7b96d4f5e.md b/curriculum/challenges/english/25-front-end-development/lab-favorite-icon-toggler/66bf6bacf178eac7b96d4f5e.md
@@ -18,8 +18,9 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
 2. The unordered list should have the class `item-list`.
 3. The three list items should contain the item name followed by a `button` element with the class `favorite-icon`.
 4. The `button` element should contain the code `&#9825;` initially to represent an empty heart.
-5. When a `button` element containing a heart is clicked, you should add the `filled` class to the clicked `button` if it's not already present, and remove it, if it is.
-6. 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.
+5. You should create a `filled` class that should contain style information.
+6. When a `button` element containing a heart is clicked, you should add the `filled` class to the clicked `button` if it's not already present, and remove it, if it is.
+7. 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.
 
 **Note:** Be sure to link your JavaScript file in your HTML. (Ex. `<script src="script.js"></script>`)
 
@@ -47,7 +48,6 @@ Your individual list items should contain the item name.
 
 ```js
 assert.exists(document.querySelector('ul li').textContent);
-
 ```
 
 Your individual list item should contain a `button` element with the class `favorite-icon`.
@@ -60,13 +60,21 @@ Initially, the `button` elements should contain the code `&#9825;` to represent
 
 ```js
 const inputs = document.querySelectorAll('ul li button.favorite-icon');
-assert.isNotEmpty(inputs)
+assert.isNotEmpty(inputs);
 
 for (let input of inputs) {
-    assert.strictEqual(input.innerHTML.charCodeAt(0), 9825);
+  assert.strictEqual(input.innerHTML.charCodeAt(0), 9825);
 }
 ```
 
+The `filled` class should contain style information. 
+
+```js
+const filled = new __helpers.CSSHelp(document).getStyle('.filled');
+assert.exists(filled); 
+assert.isNotEmpty([...filled]); 
+```
+
 When the `button` element is clicked, and it contains the class `filled`, you should remove the class `filled` from the `button` element and change the innerHTML of the `button` element to `&#9825;`.
 
 ```js
@@ -76,10 +84,10 @@ assert.isNotEmpty(buttonElements);
 buttonElements.forEach(button => button.classList.add('filled'));
 
 buttonElements.forEach(button => {
-    button.dispatchEvent(new Event('click'));
-    button.dispatchEvent(new Event('change'));
-    assert.isFalse(button.classList.contains('filled'));
-    assert.equal(button.innerHTML.charCodeAt(0), 9825);
+  button.dispatchEvent(new Event('click'));
+  button.dispatchEvent(new Event('change'));
+  assert.isFalse(button.classList.contains('filled'));
+  assert.equal(button.innerHTML.charCodeAt(0), 9825);
 });
 ```
 
@@ -92,10 +100,10 @@ assert.isNotEmpty(buttonElements);
 buttonElements.forEach(button => button.classList.remove('filled'));
 
 buttonElements.forEach(button => {
-    button.dispatchEvent(new Event('click'));
-    button.dispatchEvent(new Event('change'));
-    assert.isTrue(button.classList.contains('filled'));
-    assert.equal(button.innerHTML.charCodeAt(0), 10084);
+  button.dispatchEvent(new Event('click'));
+  button.dispatchEvent(new Event('change'));
+  assert.isTrue(button.classList.contains('filled'));
+  assert.equal(button.innerHTML.charCodeAt(0), 10084);
 });
 ```
 
@@ -106,17 +114,15 @@ buttonElements.forEach(button => {
 ```html
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="utf-8" />
     <title>Favorite Icon Toggler</title>
     <link rel="stylesheet" href="styles.css" />
-</head>
-
-<body>
-
-</body>
+  </head>
 
+  <body>
+  
+  </body>
 </html>
 ```
 
@@ -133,83 +139,81 @@ buttonElements.forEach(button => {
 ```html
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Favorite Icon Toggle</title>
     <link rel="stylesheet" href="styles.css" />
-</head>
+  </head>
 
-<body>
+  <body>
     <h1>Art Supplies</h1>
     <ul class="item-list">
-        <li>
-            120 gm paper
-            <button class="favorite-icon" id="favoriteIcon1">&#9825;</button>
-        </li>
-        <li>
-            Watercolor set
-            <button class="favorite-icon" id="favoriteIcon2">&#9825;</button>
-        </li>
-        <li>
-            Lead pencil 6B
-            <button class="favorite-icon" id="favoriteIcon3">&#9825;</button>
-        </li>
+      <li>
+        120 gm paper
+        <button class="favorite-icon" id="favoriteIcon1">&#9825;</button>
+      </li>
+      <li>
+        Watercolor set
+        <button class="favorite-icon" id="favoriteIcon2">&#9825;</button>
+      </li>
+      <li>
+        Lead pencil 6B
+        <button class="favorite-icon" id="favoriteIcon3">&#9825;</button>
+      </li>
     </ul>
 
     <script src="script.js"></script>
-</body>
-
+  </body>
 </html>
 ```
 
 ```css
 body {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    margin: 0;
-    font-family: Arial, sans-serif;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  font-family: Arial, sans-serif;
 }
 
 h1 {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 
 .item-list {
-    list-style-type: none;
-    padding: 0;
+  list-style-type: none;
+  padding: 0;
 }
 
 .item-list li {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-    border-bottom: 1px solid #ddd;
-    width: 200px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid #ddd;
+  width: 200px;
 }
 
 .favorite-icon {
-    font-size: 1.25rem;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
+  font-size: 1.25rem;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
 }
 
 .filled {
-    color: #D22B2B;
+  color: #d22b2b;
 }
 ```
 
 ```js
 document.addEventListener("DOMContentLoaded", () => {
   const favoriteIcons = document.querySelectorAll(".favorite-icon");
 
-  favoriteIcons.forEach((icon) => {
+  favoriteIcons.forEach(icon => {
     icon.addEventListener("click", () => {
       if (icon.classList.contains("filled")) {
         icon.classList.remove("filled");
