jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-02-26 17:01:40 -05:00
Code Issues Projects Releases Wiki Activity

fix(curriculum): removed videos from DOM lectures (#61618)

Browse Source
This commit is contained in:
Aaliyah1225
2025-07-30 18:07:36 -04:00
committed by GitHub
parent 411901aaec
commit a963042e08
22 changed files with 31 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
curriculum/challenges/english/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/6732a06aed1b095f57b0bb82.md
View File

@@ -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.

9
curriculum/challenges/english/25-front-end-development/lecture-understanding-the-event-object-and-event-delegation/67338e93b75977a344cf6d40.md
View File

@@ -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

9
curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6732a0472f52015e511f8e58.md
View File

@@ -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.

9
curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336894ae148431a870694d.md
View File

@@ -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.

9
curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733689f9f31dd31e7d9c789.md
View File

@@ -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:

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

@@ -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:

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

@@ -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`.

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

@@ -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.

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

@@ -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.

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

@@ -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.

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

@@ -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.

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

@@ -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.

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

@@ -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--

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

@@ -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.

11
curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md
View File

@@ -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.

15
curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733692ffe1da034469f7917.md
View File

@@ -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--

9
curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733693bfce9a43489a355db.md
View File

@@ -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.

9
curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733694805a85d34ced08a9b.md
View File

@@ -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. 

9
curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/67336956340e8a34fbd5d9f3.md
View File

@@ -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.

9
curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733696567d2273540aa6033.md
View File

@@ -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.

9
curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/6733697661182d357fc643d2.md
View File

@@ -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.

11
curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673369829e232835c2732656.md
View File

@@ -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.