feat(curriculum): Add interactive examples to element.style and element.classList lesson (#63466)

curriculum/challenges/english/blocks/lecture-working-with-the-dom-click-events-and-web-apis/6733692ffe1da034469f7917.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: how-do-you-manipulate-styles-using-elementstyle-and-elementclasslist
 ---
 
-# --description--
+# --interactive--
 
 There will be times when you will need to manipulate the styles of an HTML element inside your JavaScript file. An example of this would be when you need to hide or show a menu when a user clicks on a button.
 
@@ -21,36 +21,47 @@ Here is an example of a paragraph element with an ID of `para`:
 
 You can use the `style` property to change the color of the paragraph element to red:
 
+:::interactive_editor
+
+```html
+<p id="para">This is a paragraph</p>
+<script src="index.js"></script>
+```
+
 ```js
 const paraEl = document.getElementById("para");
 paraEl.style.color = "red";
 ```
 
+:::
+
 The `style` property can be used to set many CSS properties, such as `color`, `background-color`, `font-size`, `font-weight`, and so on.
 
 Another way to manipulate styles is by using the `Element.classList` property. The `classList` property is a read-only property that can be used to add, remove, or toggle classes on an element. Let's take a look at a couple of examples.
 
-In this first example, you are going to add a class called `highlight` to a paragraph element with an ID of `para`:
+In this example, you are going to add a class called `highlight` to a paragraph element with an ID of `para`. In the CSS, we will set the `highlight` class to change the background color of the paragraph element to yellow. In the JavaScript, we will add the `highlight` class to the paragraph element using the `classList.add()` method. 
+
+:::interactive_editor
 
 ```html
+<link rel="stylesheet" href="styles.css" />
 <p id="para">This is a paragraph</p>
+<script src="index.js"></script>
 ```
 
-In the CSS, we will set the `highlight` class to change the background color of the paragraph element to yellow:
-
 ```css
 .highlight {
   background-color: yellow;
 }
 ```
 
-In the JavaScript, we will add the `highlight` class to the paragraph element using the `classList.add()` method:
-
 ```js
 const paraEl = document.getElementById("para");
 paraEl.classList.add("highlight");
 ```
 
+:::
+
 You can also add multiple classes to an element by passing them as arguments to the `classList.add()` method:
 
 ```js
@@ -63,9 +74,12 @@ If you need to remove a class from an element, you can use the `classList.remove
 classList.remove("highlight");
 ```
 
-To toggle a class on an element, you can use the `classList.toggle()` method. In this example, we have a `button` element with an ID of `toggle-btn` and a `nav` element with an ID of `menu`:
+To toggle a class on an element, you can use the `classList.toggle()` method. In this example, we have a `button` element with an ID of `toggle-btn` and a `nav` element with an ID of `menu`. Inside the CSS, we have added some styles for the menu and a class called `show` that will change the `display` property of the `.menu` to `block`. Inside the JavaScript, we are accessing the menu element and the `button` element using the `getElementById()` method. Then, we are adding an event listener to the `button` element that will toggle the `show` class on the `.menu` element when the button is clicked:
+
+:::interactive_editor
 
 ```html
+<link rel="stylesheet" href="styles.css" />
 <button id="toggle-btn">Toggle Menu</button>
 
 <nav id="menu" class="menu">
@@ -75,10 +89,9 @@ To toggle a class on an element, you can use the `classList.toggle()` method. In
     <li>Products</li>
   </ul>
 </nav>
+<script src="index.js"></script>
 ```
 
-Inside the CSS, we have added some styles for the menu and a class called `show` that will change the `display` property of the `.menu` to `block`:
-
 ```css
 .menu {
   display: none;
@@ -92,8 +105,6 @@ Inside the CSS, we have added some styles for the menu and a class called `show`
 }
 ```
 
-Inside the JavaScript, we are accessing the menu element and the `button` element using the `getElementById()` method. Then, we are adding an event listener to the `button` element that will toggle the `show` class on the `.menu` element when the button is clicked:
-
 ```js
 const menu = document.getElementById("menu");
 const toggleBtn = document.getElementById("toggle-btn");
@@ -101,6 +112,8 @@ const toggleBtn = document.getElementById("toggle-btn");
 toggleBtn.addEventListener("click", () => menu.classList.toggle("show"));
 ```
 
+:::
+
 When a user clicks on the button, the `show` class will be added to the `.menu` element, and the menu will be displayed. If the user clicks on the button again, the `show` class will be removed from the `.menu` element, and the menu will be hidden.
 
 By using methods and properties such as `style`, `add()`, `remove()`, and `toggle()`, you can easily manipulate an element's styles with JavaScript, creating dynamic and interactive web pages.