feat(curriculum): Add interactive examples to removeEventListener lesson (#63469)

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

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: how-does-the-removeeventlistener-method-work
 ---
 
-# --description--
+# --interactive--
 
 In the previous lesson, you learned how to work with `"click"` and `"input"` events by using the `addEventListener()` method. In this lesson, you will learn how to remove event listeners using the `removeEventListener()` method.
 
@@ -29,29 +29,39 @@ Most of the time, you will only need to pass the event and listener arguments to
 
 Let's take a look at an example to better understand how the `removeEventListener()` method works:
 
-In this example, we have heading, paragraph and button elements in the HTML:
+Here is an example with some HTML:
+
+:::interactive_editor
 
 ```html
+<link rel="stylesheet" href="styles.css" />
 <h1>Event Listener examples</h1>
-<p id="para">MouseOver this text to remove the event listener</p>
 <button id="btn">Change background color</button>
 ```
 
-Inside the CSS file, we are setting the `body` background color to grey:
-
 ```css
-body {
-  background-color: grey;
+button {
+  background: linear-gradient(135deg, #4da3ff, #007bff);
+  color: white;
+  border: none;
+  padding: 12px 20px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
 }
 ```
 
+:::
+
 If we want to toggle the background color between grey and blue, then we can use an event listener for that.
 
-We first need to access the paragraph and button elements along with the `body` element:
+We first need to access the `button` element along with the `body` element:
 
 ```js
 const bodyEl = document.querySelector("body");
-const para = document.getElementById("para");
 const btn = document.getElementById("btn");
 ```
 
@@ -74,11 +84,73 @@ Then we need to add an event listener to the `button` element to call the `toggl
 btn.addEventListener("click", toggleBgColor);
 ```
 
+Here is the full example so far:
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<h1>Event Listener examples</h1>
+<button id="btn">Change background color</button>
+<script src="index.js"></script>
+```
+
+```css
+button {
+  background: linear-gradient(135deg, #4da3ff, #007bff);
+  color: white;
+  border: none;
+  padding: 12px 20px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
+}
+
+button:hover {
+  background: linear-gradient(135deg, #66b3ff, #3399ff);
+  box-shadow: 0 6px 14px rgba(0, 123, 255, 0.3);
+  transform: translateY(-2px);
+}
+```
+
+```js
+const bodyEl = document.querySelector("body");
+const btn = document.getElementById("btn");
+
+let isBgColorGrey = true;
+
+function toggleBgColor() {
+  bodyEl.style.backgroundColor = isBgColorGrey ? "blue" : "grey";
+  isBgColorGrey = !isBgColorGrey;
+}
+
+btn.addEventListener("click", toggleBgColor);
+```
+
+:::
+
+
 Each time the button is clicked, the background color of the body will change between grey and blue.
 
+We can update the HTML to include a paragraph element that will be used to remove the event listener when hovered over:
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<h1>Event Listener examples</h1>
+<p id="para">MouseOver this text to remove the event listener</p>
+<button id="btn">Change background color</button>
+<script src="index.js"></script>
+```
+
 To remove the event listener when the paragraph is hovered over, we can add an event listener to the paragraph element. We are using the `mouseover` event and passing in a function that removes the event listener from the `button` element:
 
 ```js
+const para = document.getElementById("para");
+const btn = document.getElementById("btn");
+
 para.addEventListener("mouseover", () => {
   btn.removeEventListener("click", toggleBgColor);
 });
@@ -86,6 +158,60 @@ para.addEventListener("mouseover", () => {
 
 When the paragraph is hovered over, the event listener for the button click event is removed, and the background color will no longer change when the button is clicked.
 
+Here is the full example with the `removeEventListener()` method:
+
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<h1>Event Listener examples</h1>
+<p id="para">MouseOver this text to remove the event listener</p>
+<button id="btn">Change background color</button>
+<script src="index.js"></script>
+```
+
+```css
+button {
+  background: linear-gradient(135deg, #4da3ff, #007bff);
+  color: white;
+  border: none;
+  padding: 12px 20px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
+}
+
+button:hover {
+  background: linear-gradient(135deg, #66b3ff, #3399ff);
+  box-shadow: 0 6px 14px rgba(0, 123, 255, 0.3);
+  transform: translateY(-2px);
+}
+```
+
+```js
+const bodyEl = document.querySelector("body");
+const para = document.getElementById("para");
+const btn = document.getElementById("btn");
+
+let isBgColorGrey = true;
+
+function toggleBgColor() {
+  bodyEl.style.backgroundColor = isBgColorGrey ? "blue" : "grey";
+  isBgColorGrey = !isBgColorGrey;
+}
+
+btn.addEventListener("click", toggleBgColor);
+
+para.addEventListener("mouseover", () => {
+  btn.removeEventListener("click", toggleBgColor);
+});
+```
+
+:::
+
 Real world examples of when to use the `removeEventListener()` method include removing event listeners when a modal is closed in a web application or when a user logs out of an application.
 
 # --questions--