From 844c91922bd42fde6f24e545d1fce323ad34da62 Mon Sep 17 00:00:00 2001
From: Matheus <128961347+W-String@users.noreply.github.com>
Date: Mon, 7 Apr 2025 18:05:01 +0000
Subject: [PATCH] Changes in Exercises 6 & 8.2
---
.../06-Create-DOM-Element-Second/index.html | 12 ++++++++++++
.../resets/06-Create-DOM-Element-Second/index.js | 1 +
.../06-Create-DOM-Element-Second/styles.css | 0
.../resets/07-Create-DOM-list-of-li/index.html | 10 ++++++++++
.learn/resets/07-Create-DOM-list-of-li/index.js | 6 ++++++
.../resets/07-Create-DOM-list-of-li/styles.css | 0
.learn/resets/08.1-Remove-DOM-Element/index.html | 16 ++++++++++++++++
.learn/resets/08.1-Remove-DOM-Element/index.js | 4 ++++
.learn/resets/08.1-Remove-DOM-Element/styles.css | 0
.learn/resets/08.2-Remove-DOM-Element/index.html | 15 +++++++++++++++
.learn/resets/08.2-Remove-DOM-Element/index.js | 1 +
.learn/resets/08.2-Remove-DOM-Element/styles.css | 0
.../06-Create-DOM-Element-Second/README.es.md | 2 +-
exercises/06-Create-DOM-Element-Second/README.md | 2 +-
.../solution.hide.js | 2 +-
exercises/08.2-Remove-DOM-Element/README.es.md | 12 ++++++------
exercises/08.2-Remove-DOM-Element/README.md | 12 ++++++------
.../08.2-Remove-DOM-Element/solution.hide.js | 2 +-
exercises/08.2-Remove-DOM-Element/tests.js | 4 ++--
19 files changed, 83 insertions(+), 18 deletions(-)
create mode 100644 .learn/resets/06-Create-DOM-Element-Second/index.html
create mode 100644 .learn/resets/06-Create-DOM-Element-Second/index.js
create mode 100644 .learn/resets/06-Create-DOM-Element-Second/styles.css
create mode 100644 .learn/resets/07-Create-DOM-list-of-li/index.html
create mode 100644 .learn/resets/07-Create-DOM-list-of-li/index.js
create mode 100644 .learn/resets/07-Create-DOM-list-of-li/styles.css
create mode 100644 .learn/resets/08.1-Remove-DOM-Element/index.html
create mode 100644 .learn/resets/08.1-Remove-DOM-Element/index.js
create mode 100644 .learn/resets/08.1-Remove-DOM-Element/styles.css
create mode 100644 .learn/resets/08.2-Remove-DOM-Element/index.html
create mode 100644 .learn/resets/08.2-Remove-DOM-Element/index.js
create mode 100644 .learn/resets/08.2-Remove-DOM-Element/styles.css
diff --git a/.learn/resets/06-Create-DOM-Element-Second/index.html b/.learn/resets/06-Create-DOM-Element-Second/index.html
new file mode 100644
index 0000000..add4774
--- /dev/null
+++ b/.learn/resets/06-Create-DOM-Element-Second/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+ CREATE DOM ELEMENT (2nd)
+
+
+
+
+
+
+
diff --git a/.learn/resets/06-Create-DOM-Element-Second/index.js b/.learn/resets/06-Create-DOM-Element-Second/index.js
new file mode 100644
index 0000000..877a3aa
--- /dev/null
+++ 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
new file mode 100644
index 0000000..e69de29
diff --git a/.learn/resets/07-Create-DOM-list-of-li/index.html b/.learn/resets/07-Create-DOM-list-of-li/index.html
new file mode 100644
index 0000000..22d2ad2
--- /dev/null
+++ b/.learn/resets/07-Create-DOM-list-of-li/index.html
@@ -0,0 +1,10 @@
+
+
+
+
+ Create a DOM list of li
+
+
+
+
+
diff --git a/.learn/resets/07-Create-DOM-list-of-li/index.js b/.learn/resets/07-Create-DOM-list-of-li/index.js
new file mode 100644
index 0000000..1c45ff0
--- /dev/null
+++ b/.learn/resets/07-Create-DOM-list-of-li/index.js
@@ -0,0 +1,6 @@
+let beginning = "";
+let listString = "";
+let ending = "
";
+
+// 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
new file mode 100644
index 0000000..e69de29
diff --git a/.learn/resets/08.1-Remove-DOM-Element/index.html b/.learn/resets/08.1-Remove-DOM-Element/index.html
new file mode 100644
index 0000000..ccbfc5b
--- /dev/null
+++ b/.learn/resets/08.1-Remove-DOM-Element/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+ REMOVE DOM ELEMENT (Part 1)
+
+
+
+ - First element
+ - Second element
+ - Third element
+
+
+
+
diff --git a/.learn/resets/08.1-Remove-DOM-Element/index.js b/.learn/resets/08.1-Remove-DOM-Element/index.js
new file mode 100644
index 0000000..4c9dbd2
--- /dev/null
+++ 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 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
new file mode 100644
index 0000000..e69de29
diff --git a/.learn/resets/08.2-Remove-DOM-Element/index.html b/.learn/resets/08.2-Remove-DOM-Element/index.html
new file mode 100644
index 0000000..4d1427d
--- /dev/null
+++ b/.learn/resets/08.2-Remove-DOM-Element/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+ REMOVE DOM ELEMENT (Part 2)
+
+
+
+ - First element
+ - Second element
+ - Third element
+
+
+
+
diff --git a/.learn/resets/08.2-Remove-DOM-Element/index.js b/.learn/resets/08.2-Remove-DOM-Element/index.js
new file mode 100644
index 0000000..0577325
--- /dev/null
+++ 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
new file mode 100644
index 0000000..e69de29
diff --git a/exercises/06-Create-DOM-Element-Second/README.es.md b/exercises/06-Create-DOM-Element-Second/README.es.md
index 986f790..4273ad0 100644
--- 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 = "Hello World
";
## 📝 Instrucciones:
-1. Inserta una imagen con la siguiente fuente (src) "https://via.placeholder.com/350x150" en el ``.
+1. Inserta una imagen con la siguiente fuente (src) "https://picsum.photos/350/150" en el ``.
## 💡 Pista:
diff --git a/exercises/06-Create-DOM-Element-Second/README.md b/exercises/06-Create-DOM-Element-Second/README.md
index 8ac70b4..48dc0d6 100644
--- 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 = "Hello World
";
## 📝 Instructions:
-1. Insert an image with the source "https://via.placeholder.com/350x150" into the ``.
+1. Insert an image with the source "https://picsum.photos/350/150" into the ``.
## 💡 Hint:
diff --git a/exercises/06-Create-DOM-Element-Second/solution.hide.js b/exercises/06-Create-DOM-Element-Second/solution.hide.js
index 7b2b3d3..979e2e9 100644
--- 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 = `
`;
+document.body.innerHTML = `
`;
diff --git a/exercises/08.2-Remove-DOM-Element/README.es.md b/exercises/08.2-Remove-DOM-Element/README.es.md
index 21bf196..2112c3b 100644
--- 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;
```
-Observa que los elementos hijos de un elemento no necesariamente son solo los elementos HTML que están dentro de él (como ``), sino que pueden ser cualquier elemento que esté dentro. Para comprobarlo, puedes utilizar `console.log` con los `childNodes` del elemento `` 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 ``), sino que pueden ser cualquier elemento que esté dentro. Para comprobarlo, puedes utilizar `console.log` con los `childrenNodes` del elemento `` en este ejercicio.
## 📝 Instrucciones:
-1. Con la información que acabamos de leer, usando la propiedad `childNodes`, elimina el segundo `- ` de la lista `#parentLi`.
+1. Con la información que acabamos de leer, usando la propiedad `childrenNodes`, elimina el segundo `
- ` de la lista `#parentLi`.
## 💡 Pistas:
-+ `childNodes` devuelve un array de `
- `, puedes acceder al segundo elemento de ese array con el index y eliminarlo del DOM.
++ `childrenNodes` devuelve un array de `
- `, 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 `
- ` 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 `
- `. ¿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 `
- `. ¿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
index 6a9123a..4ed84f6 100644
--- 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;
```
-Notice that the children of an element are not necessarily only the HTML elements inside of it (like `
`) but it could be any item inside. To observe that, you can `console.log` the `childNodes` of the `` element in this exercise.
+Notice that the children of an element are not necessarily only the HTML elements inside of it (like ``) but it could be any item inside. To observe that, you can `console.log` the `childrenNodes` of the `` element in this exercise.
## 📝 Instructions:
-1. With the above knowledge 'in hand' and using the `childNodes` property, delete the second `- ` from the `#parentLi` list.
+1. With the above knowledge 'in hand' and using the `childrenNodes` property, delete the second `
- ` 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 `
- ` element from the DOM.
++ Judging by the output of `childrenNodes`, you have to use the appropriate index of that array to remove the second `
- ` element from the DOM.
## 🔎 Important:
+ Was that unexpected? If you wonder why you needed to use index 3 to remove the second `
- ` 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 `
- `. What do you notice?
++ Now repeat the exercise by replacing `childrenNodes` with `children` - `console.log()` it, observe the result and remove the second `
- `. 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
index 0f2778c..17c9c53 100644
--- 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
index 6fd2c9f..fc4a73b 100644
--- 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();