chore(curriculum): add transcripts to set 3 of event lectures (#58625)

curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368f272706633516e4873.md

@@ -10,6 +10,60 @@ dashedName: how-do-you-add-attributes-with-setattribute
 
 Watch the lecture video and answer the questions below.
 
+# --transcript--
+
+How do you add attributes with `setAttribute()`?
+
+You have been used to working with attributes in your HTML and CSS projects. But did you know that you can add attributes to your HTML elements in your JavaScript file?
+
+In this lecture, you will learn how work with the `setAttribute()` method to add attributes to your HTML elements.
+
+Here is the basic syntax:
+
+```js
+setAttribute(attribute, value);
+```
+
+Let's take a look at a few examples to better understand how to use the `setAttribute()` method.
+
+In this first example, we have a `p` element inside the HTML:
+
+```html
+<p id="para">I am a paragraph</p>
+```
+
+To add a `class` attribute we first need to access that `p` element using the `getElementById()` method. Then we can use the `setAttribute()` method to add the `class` attribute and set the value to `my-class`:
+
+```js
+const para = document.getElementById("para");
+para.setAttribute("class", "my-class");
+```
+
+If we inspect the element inside the browser, we will see that the `class` attribute has been added to the `p` element.
+
+If you have an existing attribute on an HTML element, you can update its value using the `setAttribute()` method.
+
+In this example we have a `div` element with a `class` attribute set to `my-class`:
+
+```html
+<div class="my-class"></div>
+```
+
+To update the `class` attribute value to example, we can use the `setAttribute()` method again:
+
+```js
+const divEl = document.querySelector(".my-class");
+divEl.setAttribute("class", "example");
+```
+
+If we inspect the element inside the browser, we will see that the `class` attribute value has been updated to example.
+
+So, what are some real-world examples of when to use the `setAttribute()` method?
+
+If you were building a dynamic image gallery, you might need to update the `src` attribute of an image element when a user clicks on a thumbnail.
+
+Another example would be if you dealing with form validation and need to add certain attributes like `required` or `minlength` to an `input` element.
+
 # --questions--
 
 ## --text--

curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368fbe12a2b337645053d.md

@@ -10,6 +10,28 @@ dashedName: what-is-the-event-object
 
 Watch the lecture video and answer the questions below.
 
+# --transcript--
+
+What is the `Event` object?
+
+The `Event` object is a payload that triggers when a user interacts with your web page in some way. These interactions can be anything from clicking on a button or focusing an input to shaking their mobile device.
+
+Like all JavaScript objects, the `Event` object has a number of properties that might be helpful. The properties available depend on the event that triggered this payload.
+
+All `Event` objects will have the `type` property. This property reveals the type of event that triggered the payload, such as `"keydown"` or `"click"`. These values will correspond to the same values you might pass to `addEventListener()`, where you can capture and utilize the `Event` object.
+
+`Event` objects will always have the `target` property. The `target` property is a reference to whatever object triggered the event. Most commonly, this will be some sort of `HTMLElement` object, or the `Document` or `Window` objects. But it can also be something more specific, like an `AudioContext`.
+
+Events also have methods, which are functions exposed as properties on the object. One commonly used method is `preventDefault()`, which prevents the default behavior of the event when called.
+
+If you want to handle form submissions yourself, for example, you might call `preventDefault()` to keep the browser from trying to submit the form data as a `POST` request. You will learn more about `POST` requests in future lecture videos.
+
+You'll also likely run in to the `stopPropagation()` method. This method prevents the event from bubbling up or propagating to parent elements. You'll learn more about what this means in a later lecture.
+
+There are also a large number of properties that are specific to certain implementations of the `Event` object. For example, a `FetchEvent` will have a request property to contain the request that triggered the event. 
+
+If you are ever unsure of what properties are available, you can log the `Event` object in question or even check the documentation.
+
 # --questions--
 
 ## --text--

curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369067f824d33a90a0534.md

@@ -10,11 +10,111 @@ dashedName: how-does-the-addeventlistener-method-work
 
 Watch the lecture video and answer the questions below.
 
+# --transcript--
+
+What are events and how does the `addEventListener()` method work?
+
+When the user clicks on a button or there is a change in a form, this is known as an event. In your programs, you will need to have a way to listen for these events and respond to them.
+
+The `addEventListener()` method is used to listen for events. It takes two arguments: the event you want to listen for and a function that will be called when the event occurs.
+
+Here is the basic syntax:
+
+```js
+element.addEventListener("event", listener);
+```
+
+The element is the HTML element to monitor for events, and event specifies the type of event to listen for, such as `"click"`.
+
+The listener is an object that will receive the notification when the event occurs. Most of the time, this will be a function that you define to handle the event.
+
+Here is an example:
+
+```js
+element.addEventListener("click", () => {
+  // code to run when the click event occurs
+});
+```
+
+You can also choose to pass in a function reference like this:
+
+```js
+function handleClick() {
+  // code to run when the click event occurs
+}
+
+element.addEventListener("click", handleClick);
+```
+
+Sometimes you may want to create a separate function to handle the event. This can make your code easier to read and maintain.
+
+The listener argument can also be `null`, or it can be an object that uses the `EventListener` interface. The `EventListener` interface defines a single method called `handleEvent()`. This method is automatically called whenever the event you're listening for occurs. Using this interface allows the same object to handle multiple events if needed.
+
+Most of the time, you won't need to use this interface, and you can instead pass in a function that will be called when the event occurs.
+
+Now, let's take a look at an example to better understand how this works:
+
+In this example, we have a `button` element with the id of `btn`:
+
+```html
+<button id="btn">Show alert</button>
+```
+
+We want to listen for the `"click"` event on this button and show an alert when the button is clicked.
+
+We first need to access that `button` element in our JavaScript code. Then we need to add an event listener to listen for the click event and show an alert when the button is clicked:
+
+```js
+const btn = document.getElementById("btn");
+
+btn.addEventListener("click", () => alert("You clicked the button"));
+```
+
+Now each time the button is clicked, the user will see an alert message displayed on the screen like this:
+
+```md
+You clicked the button
+```
+
+Another type of event that you can listen for is the `"input"` event. This event is triggered when the value of an input element changes.
+
+Here is an example:
+
+```html
+<input type="text" id="input" placeholder="Type something" />
+```
+
+We want to listen for the input event on this input element and log the value of the input to the console each time the user types something.
+
+We first need to access that `input` element in our JavaScript code. Then we need to add an event listener to listen for the input event and log the value of the input to the console each time the user types something:
+
+```js
+const input = document.getElementById("input");
+
+input.addEventListener("input", () => {
+  console.log(input.value);
+});
+```
+
+Here is what the console will look like when the user types something in the input field:
+
+```md
+h
+he
+hel
+hell
+hello
+```
+
+There are many more events that you can listen for using the `addEventListener()` method. Some common events include `mouseover`, `mouseout`, `keydown`, `keyup`, and `submit`.
+
+In future lecture videos, we will cover more events and how to use the `addEventListener()` method to listen for them.
+
 # --questions--
 
 ## --text--
 
-What is the purpose of the `addEventListener` method?
+What is the purpose of the `addEventListener()` method?
 
 ## --answers--
 
@@ -86,7 +186,7 @@ Think about what the interface is used for in relation to events.
 
 ## --text--
 
-What type of event would you use `addEventListener` with to capture user input in a text field?
+What type of event would you use `addEventListener()` with to capture user input in a text field?
 
 ## --answers--
 

curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369101e5c4a33db0e8a02.md

@@ -10,11 +10,96 @@ dashedName: how-does-the-removeeventlistener-method-work
 
 Watch the lecture video and answer the questions below.
 
+# --transcript--
+
+How does the `removeEventListener()` method work?
+
+In the previous lecture video, you learned how to work with `"click"` and `"input"` events by using the `addEventListener()` method. In this lecture video, you will learn how to remove event listeners using the `removeEventListener()` method.
+
+The `removeEventListener()` method is used to remove an event listener that was previously added to an element using the `addEventListener()` method. This is useful when you want to stop listening for a particular event on an element.
+
+Here is the basic syntax for the `removeEventListener()` method:
+
+```js
+element.removeEventListener("event", listener);
+```
+
+Just like the `addEventListener()` method, the `removeEventListener()` method takes two arguments: the event you want to remove and the listener function that was previously added.
+
+There is also an additional optional third argument that can be passed to the `removeEventListener()` method. This argument can either be the `options` or `useCapture`.
+
+The `options` argument is an object that specifies the options for the event listener, such as whether the event listener should be passive or once. 
+
+The `useCapture` argument is a boolean value that specifies whether the event should be captured during the event propagation phase.
+
+Most of the time, you will only need to pass the event and listener arguments to the `removeEventListener()` method.
+
+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:
+
+```html
+<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;
+}
+```
+
+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:
+
+```js
+const bodyEl = document.querySelector("body");
+const para = document.getElementById("para");
+const btn = document.getElementById("btn");
+```
+
+Then we need to create the function responsible for toggling between the grey and blue colors:
+
+```js
+let isBgColorGrey = true;
+
+function toggleBgColor() {
+  bodyEl.style.backgroundColor = isBgColorGrey ? "blue" : "grey";
+  isBgColorGrey = !isBgColorGrey;
+}
+```
+
+We are using a boolean variable `isBgColorGrey` to keep track of the current background color. If the background color is grey, then we change it to blue, and vice versa.
+
+Then we need to add an event listener to the `button` element to call the `toggleBgColor` function when the button is clicked:
+
+```js
+btn.addEventListener("click", toggleBgColor);
+```
+
+Each time the button is clicked, the background color of the body will change between grey and blue.
+
+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
+para.addEventListener("mouseover", () => {
+  btn.removeEventListener("click", toggleBgColor);
+});
+```
+
+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.
+
+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--
 
 ## --text--
 
-What is the purpose of the `removeEventListener` method?
+What is the purpose of the `removeEventListener()` method?
 
 ## --answers--
 
@@ -50,7 +135,7 @@ This method is essential when you want to stop listening for specific events.
 
 ## --text--
 
-Which arguments are required for the `removeEventListener` method?
+Which arguments are required for the `removeEventListener()` method?
 
 ## --answers--
 
@@ -86,7 +171,7 @@ Think about what you need to specify to correctly remove an event listener.
 
 ## --text--
 
-When might you want to use the `removeEventListener` method in a real-world application?
+When might you want to use the `removeEventListener()` method in a real-world application?
 
 ## --answers--