diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/6732a06aed1b095f57b0bb82.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/6732a06aed1b095f57b0bb82.md index c1da6e8d586..c1547a56176 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/6732a06aed1b095f57b0bb82.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/6732a06aed1b095f57b0bb82.md @@ -1,19 +1,12 @@ --- id: 6732a06aed1b095f57b0bb82 title: What Is the Change Event, and How Does It Work? -challengeType: 11 -videoId: 87w0nfXZhss +challengeType: 19 dashedName: what-is-the-change-event-and-how-does-it-work --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is the `change` event, and how does it work? - The `change` event is a special event which is fired when the user modifies the value of certain input elements. More specifically: - When a checkbox is ticked or unticked. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/67338e93b75977a344cf6d40.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/67338e93b75977a344cf6d40.md index 86777d37ab6..302a1f5b40f 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/67338e93b75977a344cf6d40.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/67338e93b75977a344cf6d40.md @@ -1,19 +1,12 @@ --- id: 67338e93b75977a344cf6d40 title: How Do Event Bubbling, and Event Delegation Work? -challengeType: 11 -videoId: 4kMcX0If-AY +challengeType: 19 dashedName: how-do-event-bubbling-and-event-delegation-work --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do event bubbling, and event delegation work? - Event bubbling, or propagation, refers to how an event "bubbles up" to parent objects when triggered. For example, consider this code: ```html diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6732a0472f52015e511f8e58.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6732a0472f52015e511f8e58.md index 7a746c7c5f7..02d459bf0f1 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6732a0472f52015e511f8e58.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6732a0472f52015e511f8e58.md @@ -1,19 +1,12 @@ --- id: 6732a0472f52015e511f8e58 title: What Is an API, and What Are Web APIs? -challengeType: 11 -videoId: VRF7NItXm2c +challengeType: 19 dashedName: what-is-an-api-and-what-are-web-apis --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is an API, and what are web APIs? - Let's learn about APIs and why they’re essential for web development. API stands for Application Programming Interface. APIs establish a set of rules and protocols that allow software applications to communicate with each other and exchange data efficiently. You can think of them as constructs that allow developers to create more complex functionality based on simpler building blocks that are already implemented. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336894ae148431a870694d.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336894ae148431a870694d.md index aaf5b8a8742..8eaa74f1ba0 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336894ae148431a870694d.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336894ae148431a870694d.md @@ -1,19 +1,12 @@ --- id: 67336894ae148431a870694d title: What Is the DOM, and How Do You Access Elements? -challengeType: 11 -videoId: EKgxoZ9IzmQ +challengeType: 19 dashedName: what-is-the-dom-and-how-do-you-access-elements --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is the DOM, and how do you access elements? - Let's learn about the DOM and why it's so important for web development. DOM stands for Document Object Model. It's a programming interface that lets us interact with HTML documents. With the DOM, you can add, modify, or delete elements on a webpage. You can even make your website interactive by making elements listen to and respond to events. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733689f9f31dd31e7d9c789.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733689f9f31dd31e7d9c789.md index 589d3a798b2..b8378e921cd 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733689f9f31dd31e7d9c789.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733689f9f31dd31e7d9c789.md @@ -1,19 +1,12 @@ --- id: 6733689f9f31dd31e7d9c789 title: How Do DOM Nodes Exist Relative to Each Other in the DOM Tree? -challengeType: 11 -videoId: 5G2ZQrgrBYU +challengeType: 19 dashedName: how-do-dom-nodes-exist-relative-to-each-other-in-the-dom-tree --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do DOM nodes exist relative to each other in the DOM Tree? - Let's learn about DOM nodes and their relationships in the DOM tree. Just as a real tree has large and small branches connected in a hierarchical structure, DOM nodes also have direct and indirect relationships with one another. We will use this example to illustrate these relationships: diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368b1cf26253212a3cfb2.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368b1cf26253212a3cfb2.md index 6c048bc2d70..f4c5db97c29 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368b1cf26253212a3cfb2.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368b1cf26253212a3cfb2.md @@ -1,19 +1,12 @@ --- id: 673368b1cf26253212a3cfb2 title: What Is the querySelectorAll() Method, and When Should You Use It? -challengeType: 11 -videoId: F4WZUBQL9Js +challengeType: 19 dashedName: what-is-the-queryselectorall-method-and-when-should-you-use-it --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is the `querySelectorAll()` method, and when should you use it? - Let's learn about the `querySelectorAll()` method. You can use this method to get a list of all the DOM elements that match a specific CSS selector. This is how you can call the `querySelectorAll()` method: diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368c0161e6b326a7e03f0.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368c0161e6b326a7e03f0.md index 4fc8f8f0932..31261db59b4 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368c0161e6b326a7e03f0.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368c0161e6b326a7e03f0.md @@ -1,19 +1,12 @@ --- id: 673368c0161e6b326a7e03f0 title: How Do You Create New Nodes Using innerHTML and createElement()? -challengeType: 11 -videoId: WypY2jRcCe0 +challengeType: 19 dashedName: how-do-you-create-new-nodes-using-innerhtml-and-createelement --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do you create new nodes using `innerHTML` and `createElement()`? - Let's see how you can create nodes with `innerHTML` and `createElement()`. We'll start with `innerHTML`. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368ccf52205329b729378.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368ccf52205329b729378.md index 986ceb30a05..a80b4ac33b2 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368ccf52205329b729378.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368ccf52205329b729378.md @@ -1,19 +1,12 @@ --- id: 673368ccf52205329b729378 title: What Is the Difference Between innerText, textContent, and innerHTML? -challengeType: 11 -videoId: A94NbhbAows +challengeType: 19 dashedName: what-is-the-difference-between-innertext-textcontent-and-innerhtml --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is the difference between `innerText`, `textContent`, and `innerHTML`? - Let's learn about `innerText`, `textContent`, and `innerHTML`. These are properties that you can access in JavaScript to get or change the content of an HTML element. Even if they may look very similar at first, they do have key differences. Choosing the right one depends on your specific use case, so let's dive in. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368d97e8ce232cdcd6b68.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368d97e8ce232cdcd6b68.md index bbed14d20dd..00a43b4c379 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368d97e8ce232cdcd6b68.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368d97e8ce232cdcd6b68.md @@ -1,22 +1,15 @@ --- id: 673368d97e8ce232cdcd6b68 title: How Do You Add and Remove Nodes from the DOM with appendChild() and removeChild()? -challengeType: 11 -videoId: 8xXQxXlvY8A +challengeType: 19 dashedName: how-do-you-add-and-remove-nodes-from-the-dom-with-appendchild-and-removechild --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do you add and remove nodes from the DOM with `appendChild()` and `removeChild()`? - There will be times where you will need to add or remove nodes from the DOM and there are a couple of Web APIs you can use. -In this lecture video, we will cover the `appendChild()` and `removeChild()` methods. +In this lecture, we will cover the `appendChild()` and `removeChild()` methods. The `appendChild()` method is used to add a node to the end of the list of children of a specified parent node. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368e7bd043f331919514d.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368e7bd043f331919514d.md index f39bf9c297e..cc92b53d777 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368e7bd043f331919514d.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368e7bd043f331919514d.md @@ -1,19 +1,12 @@ --- id: 673368e7bd043f331919514d title: How Do the Navigator, Window, and Document Work? -challengeType: 11 -videoId: O0SWih5pv9U +challengeType: 19 dashedName: how-do-the-navigator-window-and-document-work --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do the `Navigator`, `Window`, and `Document` work? - When working with the DOM, you will often come across the `Navigator`, `Window`, and `Document` interfaces. An interface is a collection of methods and properties that define a particular object. In this lecture, we will explore how these interfaces work and how you can use them in your web applications. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368f272706633516e4873.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368f272706633516e4873.md index 005e11bd6c5..e2a08690810 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368f272706633516e4873.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368f272706633516e4873.md @@ -1,19 +1,12 @@ --- id: 673368f272706633516e4873 title: How Do You Add Attributes with setAttribute()? -challengeType: 11 -videoId: ciq88lYTHUc +challengeType: 19 dashedName: how-do-you-add-attributes-with-setattribute --- # --description-- -Watch the video or read the transcript 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. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368fbe12a2b337645053d.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368fbe12a2b337645053d.md index 0b147f588f4..ace364e3bc9 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368fbe12a2b337645053d.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368fbe12a2b337645053d.md @@ -1,19 +1,12 @@ --- id: 673368fbe12a2b337645053d title: What Is the Event Object? -challengeType: 11 -videoId: UVBsIxxvgBg +challengeType: 19 dashedName: what-is-the-event-object --- # --description-- -Watch the video or read the transcript 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. @@ -24,7 +17,7 @@ All `Event` objects will have the `type` property. This property reveals the typ 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. +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 lectures. 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. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369067f824d33a90a0534.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369067f824d33a90a0534.md index 0dfb07a74bb..4edd6079c84 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369067f824d33a90a0534.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369067f824d33a90a0534.md @@ -1,19 +1,12 @@ --- id: 673369067f824d33a90a0534 title: How Does the addEventListener Method Work? -challengeType: 11 -videoId: XxKBdnCPtoU +challengeType: 19 dashedName: how-does-the-addeventlistener-method-work --- # --description-- -Watch the video or read the transcript 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. @@ -108,7 +101,7 @@ 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. +In future lectures, we will cover more events and how to use the `addEventListener()` method to listen for them. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369101e5c4a33db0e8a02.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369101e5c4a33db0e8a02.md index bc267c340d7..fefc787193e 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369101e5c4a33db0e8a02.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369101e5c4a33db0e8a02.md @@ -1,20 +1,13 @@ --- id: 673369101e5c4a33db0e8a02 title: How Does the removeEventListener Method Work? -challengeType: 11 -videoId: 59HUIkhJqnc +challengeType: 19 dashedName: how-does-the-removeeventlistener-method-work --- # --description-- -Watch the video or read the transcript 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. +In the previous lecture, you learned how to work with `"click"` and `"input"` events by using the `addEventListener()` method. In this lecture, 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. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md index be0c792b395..69f29f75e5d 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md @@ -1,20 +1,13 @@ --- id: 6733691d88e3053414689276 title: What Are Inline Event Handlers, and Why Is It Best Practice to Use addEventListener Instead? -challengeType: 11 -videoId: JbTSvver-y8 +challengeType: 19 dashedName: what-are-inline-event-handlers-and-why-is-it-best-practice-to-use-addeventlistener-instead --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What are inline event handlers, and why is it best practice to use `addEventListener()` instead? - -In the previous lecture videos, you learned how to work with events by using the `addEventListener()` method. But there is another, not recommended way, to work with events in JavaScript. +In the previous lectures, you learned how to work with events by using the `addEventListener()` method. But there is another, not recommended way, to work with events in JavaScript. Inline event handlers are special attributes on an HTML element that are used to execute JavaScript code when an event occurs. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733692ffe1da034469f7917.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733692ffe1da034469f7917.md index 713dc782d3c..581c862afd4 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733692ffe1da034469f7917.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733692ffe1da034469f7917.md @@ -1,19 +1,12 @@ --- id: 6733692ffe1da034469f7917 title: How Do You Manipulate Styles Using Element.style and Element.classList? -challengeType: 11 -videoId: i07QkMVN15o +challengeType: 19 dashedName: how-do-you-manipulate-styles-using-elementstyle-and-elementclasslist --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do you manipulate styles using `Element.style` and `Element.classList`? - 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. In this lecture, you will learn how to manipulate styles using the `Element.style` and `Element.classList` properties. @@ -160,7 +153,7 @@ How would you add multiple classes to an element using the `Element.classList` p ### --feedback-- -Review the portion of the video that discusses adding multiple classes to an element. +Review the portion of the lecture that discusses adding multiple classes to an element. --- @@ -172,7 +165,7 @@ Review the portion of the video that discusses adding multiple classes to an ele ### --feedback-- -Review the portion of the video that discusses adding multiple classes to an element. +Review the portion of the lecture that discusses adding multiple classes to an element. --- @@ -180,7 +173,7 @@ Review the portion of the video that discusses adding multiple classes to an ele ### --feedback-- -Review the portion of the video that discusses adding multiple classes to an element. +Review the portion of the lecture that discusses adding multiple classes to an element. ## --video-solution-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733693bfce9a43489a355db.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733693bfce9a43489a355db.md index 83824cbb181..27255690f3a 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733693bfce9a43489a355db.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733693bfce9a43489a355db.md @@ -1,19 +1,12 @@ --- id: 6733693bfce9a43489a355db title: What Is the DOMContentLoaded Event, and How Does It Work? -challengeType: 11 -videoId: sEsyYH_SAb8 +challengeType: 19 dashedName: what-is-the-domcontentloaded-event-and-how-does-it-work --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is the `DOMContentLoaded` event, and how does it work? - The `DOMContentLoaded` event is fired when everything in the HTML document has been loaded and parsed. If you have external stylesheets, or images, the `DOMContentLoaded` event will not wait for those to be loaded. It will only wait for the HTML to be loaded. This differs from the `load` event, which waits for everything to be loaded, including external stylesheets, images, and so on. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733694805a85d34ced08a9b.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733694805a85d34ced08a9b.md index a45615acf5e..67c4e586f5b 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733694805a85d34ced08a9b.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733694805a85d34ced08a9b.md @@ -1,19 +1,12 @@ --- id: 6733694805a85d34ced08a9b title: How Do the setTimeout and setInterval Methods Work? -challengeType: 11 -videoId: GSWSPc2SGTg +challengeType: 19 dashedName: how-do-the-settimeout-and-setinterval-methods-work --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do the `setTimeout()` and `setInterval()` methods work? - When building your programs, you'll often want something to happen after a delay, or repeat at regular intervals. That's where the `setTimeout()` and `setInterval()` methods come in handy. Both methods accept two parameters: a function and a delay. Let's look at each of the methods in more detail so you can start using them in your web projects.  diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336956340e8a34fbd5d9f3.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336956340e8a34fbd5d9f3.md index 120a9b298b3..b8b327b1413 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336956340e8a34fbd5d9f3.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336956340e8a34fbd5d9f3.md @@ -1,19 +1,12 @@ --- id: 67336956340e8a34fbd5d9f3 title: What Is the requestAnimationFrame() API, and How Can It Be Used to Set Up an Animation Loop? -challengeType: 11 -videoId: mfnow4GWCo4 +challengeType: 19 dashedName: what-is-the-requestanimationframe-api-and-how-can-it-be-used-to-set-up-an-animation-loop --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is the `requestAnimationFrame()` API, and how can it be used to set up an animation loop? - Creating smooth animations on a web page can be tricky, especially if you're not sure how to handle timing properly. The great news is that the `requestAnimationFrame()` API makes it easier.  `requestAnimationFrame()` is a method that allows you to schedule the next step of your animation before the next screen repaint, resulting in a fluid and visually appealing experience. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733696567d2273540aa6033.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733696567d2273540aa6033.md index 2fa12f20536..2bdff20621d 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733696567d2273540aa6033.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733696567d2273540aa6033.md @@ -1,19 +1,12 @@ --- id: 6733696567d2273540aa6033 title: What Is the Web Animations API, and How Does It Relate to CSS Animation Properties? -challengeType: 11 -videoId: pVVcaDEIzvs +challengeType: 19 dashedName: what-is-the-web-animations-api-and-how-does-it-relate-to-css-animation-properties --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is the `Web Animations` API, and how does it relate to CSS animation properties? - The `Web Animations` API (WAAPI) allows you to create and control animations directly within JavaScript. With WAAPI, you can work with animations more dynamically, making it easier to manipulate them. Let's take a look at WAAPI in more detail, so you can start working with animations directly inside your JavaScript code. At the core of WAAPI is the `Animation` constructor, which provides several instance methods and properties that allow you to dynamically animate elements. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733697661182d357fc643d2.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733697661182d357fc643d2.md index 2c87e116635..e5442a4df0e 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733697661182d357fc643d2.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733697661182d357fc643d2.md @@ -1,19 +1,12 @@ --- id: 6733697661182d357fc643d2 title: What Is the Canvas API, and How Does It Work? -challengeType: 11 -videoId: EbfxtG26HR0 +challengeType: 19 dashedName: what-is-the-canvas-api-and-how-does-it-work --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is the `Canvas` API, and how does it work? - The `Canvas` API is a powerful tool that lets you manipulate graphics right inside your JavaScript file. Everything begins with a `canvas` element in HTML. This element serves as a drawing surface that you can manipulate using the instance methods and properties of the `Canvas` API. The `Canvas` API provides everything you need to create amazing visuals, including shapes, text, animations, and even complex games. It has interfaces like `HTMLCanvasElement`, `CanvasRenderingContext2D`, `CanvasGradient`, `CanvasPattern`, `TextMetrics` which provide methods and properties you can use to create graphics in your JavaScript file. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369829e232835c2732656.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369829e232835c2732656.md index 64edca22ad7..a488d8b344e 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369829e232835c2732656.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369829e232835c2732656.md @@ -1,26 +1,19 @@ --- id: 673369829e232835c2732656 title: How Do You Open and Close Dialog Elements Using JavaScript? -challengeType: 11 -videoId: W6gusPmPGo4 +challengeType: 19 dashedName: how-do-you-open-and-close-dialog-elements-using-javascript --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do you open and close `dialog` elements using JavaScript? - Dialogs let you display important information or actions to users. With HTML's built-in `dialog` element, you can easily create these dialogs (both modal and non-modal dialogs) in your web apps. A modal dialog is a type of dialog that forces the user to interact with it before they can access the rest of the application or webpage. It effectively blocks interaction with other content until the user completes an action, such as closing the dialog or submitting a form. In contrast, a non-modal dialog allows the user to continue interacting with other parts of the page or application even when the dialog is open. It doesn't prevent access to the rest of the content. -In this video, you will learn how to open and close modals using the `showModal()` and `close()` methods. +In this lecture, you will learn how to open and close modals using the `showModal()` and `close()` methods. When you want to make sure the user focuses on a specific action or message of a modal, you can open the modal dialog using the `showModal()` method. This will add a backdrop to the other items on the page and disable them. This is ideal for modals that display forms, confirmations, and critical information that requires user action.