feat: add interactive examples for e.preventDefault lesson (#63733)

curriculum/challenges/english/blocks/lecture-understanding-form-validation/6733d3a33abdd27cd562bdf2.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-the-purpose-of-e-preventdefault
 ---
 
-# --description--
+# --interactive--
 
 Let's learn about the purpose of the `preventDefault()` method on events.
 
@@ -13,24 +13,104 @@ Every event that triggers in the DOM has some sort of default behavior. The `cli
 
 Let's take a look at an example. Let's define an `input` element for a user to type in:
 
+:::interactive_editor
+
 ```html
+<link rel="stylesheet" href="styles.css">
 <label>Enter some characters:
   <input type="text">
 </label>
 ```
 
+```css
+label {
+  display: flex;
+  flex-direction: column;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  color: #333;
+  margin-bottom: 12px;
+}
+
+input[type="text"] {
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+  margin-top: 4px;
+  width: 100%;
+  box-sizing: border-box;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+input[type="text"]:focus {
+  border-color: #0078d4;
+  box-shadow: 0 0 3px rgba(0, 120, 212, 0.5);
+  outline: none;
+}
+
+```
+
+:::
+
 And if we look at the result, we can type in the input field as expected. But maybe we don't want that. Maybe, instead, we'd like to show the character the user types in a separate element. First, let's define our element for that:
 
+:::interactive_editor
+
 ```html
+<link rel="stylesheet" href="styles.css">
 <label>Enter some characters:
   <input type="text">
 </label>
 <p id="output"></p>
 ```
 
+```css
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f0f0f0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  margin: 0;
+}
+
+label {
+  font-size: 1.2rem;
+  color: #333;
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+input[type="text"] {
+  padding: 0.5rem;
+  font-size: 1rem;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  margin-top: 0.5rem;
+  outline: none;
+}
+
+input[type="text"]:focus {
+  border-color: #007BFF;
+}
+
+#output {
+  margin-top: 1rem;
+  font-size: 1.1rem;
+  color: #555;
+}
+
+```
+
+:::
+
 And then, we need to hook into the `keydown` event to listen for a character being typed on the keyboard. Note that we do not want the `change` or `input` events here, because we need the keyboard information.
 
-```javascript
+```js
 const input = document.querySelector("input");
 
 input.addEventListener("keydown", (e) => {
@@ -40,7 +120,59 @@ input.addEventListener("keydown", (e) => {
 
 The `keydown` event fires when you press down on a keyboard key. When this happens, let's display the character in our `p` element.
 
-```javascript
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<label>Enter some characters:
+  <input type="text">
+</label>
+<p id="output"></p>
+<script src="index.js"></script>
+```
+
+```css
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f0f0f0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  margin: 0;
+}
+
+label {
+  font-size: 1.2rem;
+  color: #333;
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+input[type="text"] {
+  padding: 0.5rem;
+  font-size: 1rem;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  margin-top: 0.5rem;
+  outline: none;
+}
+
+input[type="text"]:focus {
+  border-color: #007BFF;
+}
+
+#output {
+  margin-top: 1rem;
+  font-size: 1.1rem;
+  color: #555;
+}
+
+```
+
+```js
 const input = document.querySelector("input");
 const output = document.getElementById("output");
 
@@ -49,13 +181,67 @@ input.addEventListener("keydown", (e) => {
 });
 ```
 
+:::
+
 `e.key` gives you the value of the key pressed, such as `a` for the `a` key or `Enter` for the `Enter` key.
 
 With the above code, when you type in the `input`, the character you type will be displayed in the `p` element. 
 
 This is great, but we don't want to show the characters in the `input` as well. This is where our `preventDefault()` method comes in. The default behavior of a `keydown` is to render the character in the input. Let's avoid that by calling `e.preventDefault()`:
 
-```javascript
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<label>Enter some characters:
+  <input type="text">
+</label>
+<p id="output"></p>
+<script src="index.js"></script>
+```
+
+```css
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f0f0f0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  margin: 0;
+}
+
+label {
+  font-size: 1.2rem;
+  color: #333;
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+input[type="text"] {
+  padding: 0.5rem;
+  font-size: 1rem;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  margin-top: 0.5rem;
+  outline: none;
+}
+
+input[type="text"]:focus {
+  border-color: #007BFF;
+}
+
+#output {
+  margin-top: 1rem;
+  font-size: 1.1rem;
+  color: #555;
+}
+
+```
+
+```js
 const input = document.querySelector("input");
 const output = document.getElementById("output");
 
@@ -65,6 +251,8 @@ input.addEventListener("keydown", (e) => {
 });
 ```
 
+:::
+
 And just like that, you have prevented the default behavior to allow yourself to implement your own custom event handling.
 
 Another common example of when to use the `e.preventDefault` method has to deal with form submissions. By default, submitting a form sends data to the server and reloads the page. Using `e.preventDefault()` prevents this from happening.