4GeeksAcademy · W-String · Apr 7, 2025
diff --git a/.learn/resets/06-Create-DOM-Element-Second/index.html b/.learn/resets/06-Create-DOM-Element-Second/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>CREATE DOM ELEMENT (2nd)</title>
+	</head>
+	<body>
+		<div id="myDiv"></div>
+
+		<script src="./index.js"></script>
+	</body>
+</html>
diff --git a/.learn/resets/06-Create-DOM-Element-Second/index.js b/.learn/resets/06-Create-DOM-Element-Second/index.js
@@ -0,0 +1 @@
+// Your code here
diff --git a/.learn/resets/06-Create-DOM-Element-Second/styles.css b/.learn/resets/06-Create-DOM-Element-Second/styles.css
diff --git a/.learn/resets/07-Create-DOM-list-of-li/index.html b/.learn/resets/07-Create-DOM-list-of-li/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>Create a DOM list of li</title>
+	</head>
+	<body>
+		<script src="./index.js"></script>
+	</body>
+</html>
diff --git a/.learn/resets/07-Create-DOM-list-of-li/index.js b/.learn/resets/07-Create-DOM-list-of-li/index.js
@@ -0,0 +1,6 @@
+let beginning = "<ul>";
+let listString = "";
+let ending = "</ul>";
+
+// Do not modify after this line
+document.body.innerHTML = beginning + listString + ending;
diff --git a/.learn/resets/07-Create-DOM-list-of-li/styles.css b/.learn/resets/07-Create-DOM-list-of-li/styles.css
diff --git a/.learn/resets/08.1-Remove-DOM-Element/index.html b/.learn/resets/08.1-Remove-DOM-Element/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<title>REMOVE DOM ELEMENT (Part 1)</title>
+	</head>
+	<body>
+		<ul>
+			<li>First element</li>
+			<li id="secondElement">Second element</li>
+			<li>Third element</li>
+		</ul>
+		<script src="./index.js"></script>
+	</body>
+</html>
diff --git a/.learn/resets/08.1-Remove-DOM-Element/index.js b/.learn/resets/08.1-Remove-DOM-Element/index.js
@@ -0,0 +1,4 @@
+// If you check the HTML, you will find that the second <li> has the id=secondElement
+// You can use that to your advantage like a CSS selector
+
+// Your code here
diff --git a/.learn/resets/08.1-Remove-DOM-Element/styles.css b/.learn/resets/08.1-Remove-DOM-Element/styles.css
diff --git a/.learn/resets/08.2-Remove-DOM-Element/index.html b/.learn/resets/08.2-Remove-DOM-Element/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>REMOVE DOM ELEMENT (Part 2)</title>
+	</head>
+	<body>
+		<ul id="parentLi">
+			<li>First element</li>
+			<li>Second element</li>
+			<li>Third element</li>
+		</ul>
+		<script src="./index.js"></script>
+	</body>
+</html>
diff --git a/.learn/resets/08.2-Remove-DOM-Element/index.js b/.learn/resets/08.2-Remove-DOM-Element/index.js
@@ -0,0 +1 @@
+// Your code here
diff --git a/.learn/resets/08.2-Remove-DOM-Element/styles.css b/.learn/resets/08.2-Remove-DOM-Element/styles.css
diff --git a/exercises/06-Create-DOM-Element-Second/README.es.md b/exercises/06-Create-DOM-Element-Second/README.es.md
@@ -15,7 +15,7 @@ document.body.innerHTML = "<h1>Hello World</h1>";
 
 ## 📝 Instrucciones:
 
-1. Inserta una imagen con la siguiente fuente (src) "https://via.placeholder.com/350x150" en el `<body>`.
+1. Inserta una imagen con la siguiente fuente (src) "https://picsum.photos/350/150" en el `<body>`.
 
 ## 💡 Pista:
 

diff --git a/exercises/06-Create-DOM-Element-Second/README.md b/exercises/06-Create-DOM-Element-Second/README.md
@@ -10,7 +10,7 @@ document.body.innerHTML = "<h1>Hello World</h1>";
 
 ## 📝 Instructions:
 
-1. Insert an image with the source "https://via.placeholder.com/350x150" into the `<body>`.
+1. Insert an image with the source "https://picsum.photos/350/150" into the `<body>`.
 
 ## 💡 Hint:
 

diff --git a/exercises/06-Create-DOM-Element-Second/solution.hide.js b/exercises/06-Create-DOM-Element-Second/solution.hide.js
@@ -1,2 +1,2 @@
 // Your code here
-document.body.innerHTML = `<img src="https://via.placeholder.com/350x150"/>`;
+document.body.innerHTML = `<img src="https://picsum.photos/350/150"/>`;
diff --git a/exercises/08.2-Remove-DOM-Element/README.es.md b/exercises/08.2-Remove-DOM-Element/README.es.md
@@ -5,27 +5,27 @@ tutorial: "https://www.youtube.com/watch?v=w2WfYQ8TYUo"
 
 # `08.2` Remove DOM element
 
-Es posible recuperar todos los elementos hijos de un elemento del DOM, para eso debes usar la propiedad `childNodes` del elemento. Por ejemplo:
+Es posible recuperar todos los elementos hijos de un elemento del DOM, para eso debes usar la propiedad `childrenNodes` del elemento. Por ejemplo:
 
 ```js
 let list = document.querySelector("#myList");
-let childs = list.childNodes;   
+let childs = list.childrenNodes;   
 ```
 
 ![image 9-1](../../.learn/assets/09-1.png) 
 
-Observa que los elementos hijos de un elemento no necesariamente son solo los elementos HTML que están dentro de él (como `<li></li>`), sino que pueden ser cualquier elemento que esté dentro. Para comprobarlo, puedes utilizar `console.log` con los `childNodes` del elemento `<ul>` en este ejercicio.
+Observa que los elementos hijos de un elemento no necesariamente son solo los elementos HTML que están dentro de él (como `<li></li>`), sino que pueden ser cualquier elemento que esté dentro. Para comprobarlo, puedes utilizar `console.log` con los `childrenNodes` del elemento `<ul>` en este ejercicio.
 
 ## 📝 Instrucciones:
 
-1. Con la información que acabamos de leer, usando la propiedad `childNodes`, elimina el segundo `<li>` de la lista `#parentLi`.
+1. Con la información que acabamos de leer, usando la propiedad `childrenNodes`, elimina el segundo `<li>` de la lista `#parentLi`.
 
 ## 💡 Pistas:
 
-+ `childNodes` devuelve un array de `<li>`, puedes acceder al segundo elemento de ese array con el index y eliminarlo del DOM.
++ `childrenNodes` devuelve un array de `<li>`, puedes acceder al segundo elemento de ese array con el index y eliminarlo del DOM.
 
 ## 🔎 Importante:
 
 + Si te preguntas por qué necesitas usar el index 3 para eliminar el segundo `<li>` en lugar del index 1, aquí está la respuesta: http://stackoverflow.com/questions/24589908/childnode-of-li-element-gives-text-ul-ul-text
 
-+ Ahora repite el ejercicio reemplazando `childNodes` con `children` y haz un `console.log()`, observa el resultado y elimina el segundo `<li>`. ¿Te das cuenta de algo?
++ Ahora repite el ejercicio reemplazando `childrenNodes` con `children` y haz un `console.log()`, observa el resultado y elimina el segundo `<li>`. ¿Te das cuenta de algo?
diff --git a/exercises/08.2-Remove-DOM-Element/README.md b/exercises/08.2-Remove-DOM-Element/README.md
@@ -1,26 +1,26 @@
 # `08.2` Remove DOM Element
 
-It is possible to retrieve all the children of a DOM element by using the `childNodes` property of that element. For example:
+It is possible to retrieve all the children of a DOM element by using the `childrenNodes` property of that element. For example:
 
 ```js
 let list = document.querySelector("#myList");
-let childs = list.childNodes;   
+let children = list.childrenNodes;   
 ```
 
 ![](../../.learn/assets/09-1.png) 
 
-Notice that the children of an element are not necessarily only the HTML elements inside of it (like `<li></li>`) but it could be any item inside. To observe that, you can `console.log` the `childNodes` of the `<ul>` element in this exercise. 
+Notice that the children of an element are not necessarily only the HTML elements inside of it (like `<li></li>`) but it could be any item inside. To observe that, you can `console.log` the `childrenNodes` of the `<ul>` element in this exercise. 
 
 ## 📝 Instructions:
 
-1. With the above knowledge 'in hand' and using the `childNodes` property, delete the second `<li>` from the `#parentLi` list.
+1. With the above knowledge 'in hand' and using the `childrenNodes` property, delete the second `<li>` from the `#parentLi` list.
 
 ## 💡 Hints:
 
-+ Judging by the output of `childNodes`, you have to use the appropriate index of that array to remove the second `<li>` element from the DOM.
++ Judging by the output of `childrenNodes`, you have to use the appropriate index of that array to remove the second `<li>` element from the DOM.
 
 ## 🔎 Important:
 
 + Was that unexpected? If you wonder why you needed to use index 3 to remove the second `<li>` instead of index 1, here is the answer: http://stackoverflow.com/questions/24589908/childnode-of-li-element-gives-text-ul-ul-text
 
-+ Now repeat the exercise by replacing `childNodes` with `children` - `console.log()` it, observe the result and remove the second `<li>`. What do you notice?
++ Now repeat the exercise by replacing `childrenNodes` with `children` - `console.log()` it, observe the result and remove the second `<li>`. What do you notice?
diff --git a/exercises/08.2-Remove-DOM-Element/solution.hide.js b/exercises/08.2-Remove-DOM-Element/solution.hide.js
@@ -1,4 +1,4 @@
 // Your code here
 let list = document.querySelector('#parentLi');
-let secondLi = list.childNodes[3];
+let secondLi = list.childrenNodes[3];
 list.removeChild(secondLi);
diff --git a/exercises/08.2-Remove-DOM-Element/tests.js b/exercises/08.2-Remove-DOM-Element/tests.js
@@ -28,9 +28,9 @@ test("You should use querySelector to select the element with id #parentLi", fun
     expect(document.querySelector).toHaveBeenCalledWith("#parentLi");
 
 });
-test('You have to use the childNodes property', function () {
+test('You have to use the childrenNodes property', function () {
     document.documentElement.innerHTML = html.toString();
-    const expected = 'childNodes';
+    const expected = 'childrenNodes';
     // we can read from the source code
     console.log("*****",js.toString());
     expect(js.toString().indexOf(expected) > -1).toBeTruthy();