fix(curriculum): implement updates to favorite icon toggler (#59492)

Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>

curriculum/challenges/english/25-front-end-development/lab-favorite-icon-toggler/66bf6bacf178eac7b96d4f5e.md

@@ -10,16 +10,18 @@ demoType: onClick
 
 In this lab you will use JavaScript click events to toggle the appearance of a favorite icon. When the heart icon is clicked, the appearance of the heart changes from empty to filled, and vice versa.
 
-Fulfill the user stories below and get all the tests to pass to complete the lab. **Do not copy this demo project**.
+Fulfill the user stories below and get all the tests to pass to complete the lab.
 
 **User Stories:**
 
 1. You should have an unordered list with three items.
 2. The unordered list should have the class `item-list`.
-3. The three list items should contain the item name followed by a `span` element with the class `favorite-icon`.
-4. The `span` element should contain the code `♡` initially to represent an empty heart.
-5. When a span element containing a heart is clicked, you should add the `filled` class to the clicked `span` if it's not already present, and remove it, if it is.
-6. When a `span` element containing a heart is clicked, the heart symbol should toggle between `♡` (empty heart) and `❤` (filled heart), depending on its current state.
+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 `♡` 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 `♡` (empty heart) and `❤` (filled heart), depending on its current state.
+
+**Note:** Be sure to link your JavaScript file in your HTML. (Ex. `<script src="script.js"></script>`)
 
 # --hints--
 
@@ -48,16 +50,16 @@ assert.exists(document.querySelector('ul li').textContent);
 
 ```
 
-Your individual list item should contain a  `span` element with the class `favorite-icon` 
+Your individual list item should contain a `button` element with the class `favorite-icon`.
 
 ```js
-assert.exists(document.querySelector('ul li span.favorite-icon'));
+assert.exists(document.querySelector('ul li button.favorite-icon'));
 ```
 
-Initially, the `span` elements should contain the code `&#9825;` to represent an empty heart.
+Initially, the `button` elements should contain the code `&#9825;` to represent an empty heart.
 
 ```js
-const inputs = document.querySelectorAll('ul li span.favorite-icon');
+const inputs = document.querySelectorAll('ul li button.favorite-icon');
 assert.isNotEmpty(inputs)
 
 for (let input of inputs) {
@@ -65,35 +67,35 @@ for (let input of inputs) {
 }
 ```
 
-When the `span` element is clicked, and it contains the class `filled`, you should remove the class `filled` from the `span` element and change the innerHTML of the `span` element to `&#9825;`.
+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
-const spanElements = document.querySelectorAll('.favorite-icon');
-assert.isNotEmpty(spanElements);
+const buttonElements = document.querySelectorAll('.favorite-icon');
+assert.isNotEmpty(buttonElements);
 
-spanElements.forEach(span => span.classList.add('filled'));
+buttonElements.forEach(button => button.classList.add('filled'));
 
-spanElements.forEach(span => {
-    span.dispatchEvent(new Event('click'));
-    span.dispatchEvent(new Event('change'));
-    assert.isFalse(span.classList.contains('filled'));
-    assert.equal(span.innerHTML.charCodeAt(0), 9825);
+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);
 });
 ```
 
-When the `span` element is clicked, and it doesn't contain the class `filled`, you should add the class `filled` to the `span` element and change the `innerHTML` of the `span` element to `&#10084;`.
+When the `button` element is clicked, and it doesn't contain the class `filled`, you should add the class `filled` to the `button` element and change the `innerHTML` of the `button` element to `&#10084;`.
 
 ```js
-const spanElements = document.querySelectorAll('.favorite-icon');
-assert.isNotEmpty(spanElements);
+const buttonElements = document.querySelectorAll('.favorite-icon');
+assert.isNotEmpty(buttonElements);
 
-spanElements.forEach(span => span.classList.remove('filled'));
+buttonElements.forEach(button => button.classList.remove('filled'));
 
-spanElements.forEach(span => {
-    span.dispatchEvent(new Event('click'));
-    span.dispatchEvent(new Event('change'));
-    assert.isTrue(span.classList.contains('filled'));
-    assert.equal(span.innerHTML.charCodeAt(0), 10084);
+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);
 });
 ```
 
@@ -106,9 +108,9 @@ spanElements.forEach(span => {
 <html lang="en">
 
 <head>
-    <meta charset="utf-8">
-    <title></title>
-    <link rel="stylesheet" href="styles.css">
+    <meta charset="utf-8" />
+    <title>Favorite Icon Toggler</title>
+    <link rel="stylesheet" href="styles.css" />
 </head>
 
 <body>
@@ -136,7 +138,7 @@ spanElements.forEach(span => {
     <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">
+    <link rel="stylesheet" href="styles.css" />
 </head>
 
 <body>
@@ -144,15 +146,15 @@ spanElements.forEach(span => {
     <ul class="item-list">
         <li>
             120 gm paper
-            <span class="favorite-icon" id="favoriteIcon1">&#9825;</span>
+            <button class="favorite-icon" id="favoriteIcon1">&#9825;</button>
         </li>
         <li>
             Watercolor set
-            <span class="favorite-icon" id="favoriteIcon2">&#9825;</span>
+            <button class="favorite-icon" id="favoriteIcon2">&#9825;</button>
         </li>
         <li>
             Lead pencil 6B
-            <span class="favorite-icon" id="favoriteIcon3">&#9825;</span>
+            <button class="favorite-icon" id="favoriteIcon3">&#9825;</button>
         </li>
     </ul>
 
@@ -192,9 +194,15 @@ h1 {
 }
 
 .favorite-icon {
-    font-size: 20px;
+    font-size: 1.25rem;
+    background-color: transparent;
+    border: none;
     cursor: pointer;
 }
+
+.filled {
+    color: #D22B2B;
+}
 ```
 
 ```js