10 | This is the wulu div
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/exercises/09-Render-on-Click/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | -
9 |
- First element 10 |
- Second element 11 |
- Third element 12 |
11 | Hello world!
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/exercises/08.1-Remove-DOM-Element/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | -
10 |
- First element 11 |
- Second element 12 |
- Third element 13 |
-
11 |
- First element 12 |
- Second element 13 |
- Third element 14 |
Hello world title
10 |11 | This is my description, it needs to be long because it is supposed to be a paragraph and not a title. 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /exercises/02-Select-DOM-Element/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |Hello world title
10 |11 | This is my description, it needs to be long because it is supposed to be a 12 | paragraph and not a title. 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /exercises/12-Add-Options-to-the-Select/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |` with id `#wulu` is floating to the left by default. Using JavaScript, please change the `float` CSS property and make it `float` to the `right`.
8 |
9 | ## 💡 Hint:
10 |
11 | + http://www.w3schools.com/jsref/prop_style_cssfloat.asp
12 |
--------------------------------------------------------------------------------
/exercises/12-Add-Options-to-the-Select/solution.hide.js:
--------------------------------------------------------------------------------
1 | let countries = ["USA", "France", "Italy", "Brazil", "Colombia", "Belize", "Venezuela"];
2 |
3 | // Your code here
4 | let selectElement = document.getElementById("mySelect");
5 |
6 | for (let i = 0; i < countries.length; i++) {
7 | let option = document.createElement("option");
8 | option.value = countries[i];
9 | option.innerHTML = countries[i];
10 | selectElement.appendChild(option);
11 | }
12 |
13 | selectElement.addEventListener("change", function () {
14 | let selectedCountry = selectElement.value;
15 | alert(selectedCountry);
16 | });
17 |
--------------------------------------------------------------------------------
/exercises/12-Add-Options-to-the-Select/styles.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | body {
3 | text-align: center;
4 | background-size: cover;
5 | }
6 |
7 | select {
8 | -moz-appearance: none;
9 | -webkit-appearance: none;
10 | text-indent: 0.01px;
11 | text-overflow: "";
12 | padding: 1em 0 1em 1em;
13 | border: 1px solid #107177;
14 | border-radius: 0;
15 | position: relative;
16 | border-right-width: 20px;
17 | background-color: rgba(0, 0, 0, 0.5);
18 | color: #fff;
19 | font-weight: bold;
20 | text-transform: uppercase;
21 | }
22 | select:focus {
23 | outline: none;
24 | border-color: #169ca4;
25 | }
26 |
--------------------------------------------------------------------------------
/exercises/10-Add-li-on-Click/README.md:
--------------------------------------------------------------------------------
1 | # `10` Add li on Click
2 |
3 | ## 📝 Instructions:
4 |
5 | 1. Using the `createElement()` function, add a new `` element to the `#myList` whenever the `#superDuperButton` is clicked.
6 |
7 | ## 💻 Expected result:
8 |
9 | 
10 |
11 | ## 💡 Hints:
12 |
13 | + Get the `#superDuperButton` button with the `getElementById` function.
14 |
15 | + Add a click event listener to the `#superDuperButton`.
16 |
17 | + Inside of that listener function, add the needed code to create the new ` ` element and append it to the list as a child.
18 |
--------------------------------------------------------------------------------
/exercises/12-Add-Options-to-the-Select/README.md:
--------------------------------------------------------------------------------
1 | # `12` Add Options to the Select
2 |
3 | ## 📝 Instructions:
4 |
5 | 1. Use the `appendChild()` method to add all these countries into the select with the id `#mySelect`.
6 |
7 | 2. Then, add a listener to the `'change'` event and display an alert with the selected country when the user selects it.
8 |
9 | ## 💻 Expected result:
10 |
11 | 
12 |
13 | ## 💡 Hints:
14 |
15 | + Remember the `for` loop? it can be very handy in this situation.
16 |
17 | + Read about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).
18 |
--------------------------------------------------------------------------------
/exercises/01-hello-world/README.md:
--------------------------------------------------------------------------------
1 | # `01` Hello World
2 |
3 | The DOM is where all your front-end knowledge combines, you need to know a little bit of HTML, CSS and JavaScript.
4 |
5 | But everything starts with a Hello World, of course 😄
6 |
7 | ## 📝 Instructions:
8 |
9 | 1. This exercise contains one HTML, one CSS and one JS file. Please open your JS file and fill it with the code to prompt an alert saying `Hello World`.
10 |
11 | ## 💡 Hints:
12 |
13 | + Build and preview your exercise code. It will open in a new window.
14 |
15 | + Press the test button when you feel comfortable enough to automatically grade it. Once you are ready, do the next one!
16 |
--------------------------------------------------------------------------------
/exercises/04-Move-DOM-Element/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=-klOOsBeBSg"
3 | ---
4 |
5 |
6 | # `04` Move DOM Element
7 |
8 | Puedes cambiar cualquiera de las propiedades CSS cuando lo desees. CSS tiene algunas propiedades que definen la posición de un objeto, esto quiere decir que podemos usar JavaScript para cambiar la posición de un objeto.
9 |
10 | ## 📝 Instrucciones:
11 |
12 | 1. En este ejercicio, el `
` con id `#wulu` está flotando (`float`) a la izquierda por defecto. Usando JavaScript, cambia la propiedad CSS `float` y haz que flote a la derecha (`right`).
13 |
14 | ## 💡 Pista:
15 |
16 | + http://www.w3schools.com/jsref/prop_style_cssfloat.asp
17 |
--------------------------------------------------------------------------------
/exercises/12-Add-Options-to-the-Select/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=PI1m_7oV8wM"
3 | ---
4 |
5 |
6 | # `12` Add Options to the Select
7 |
8 | ## 📝 Instrucciones:
9 |
10 | 1. Usa el método `appendChild()` para agregar todos estos países al select con el id `#mySelect`.
11 |
12 | 2. Luego, agrega un listener al evento `'change'` y muestra una alerta con el país seleccionado cuando el usuario lo seleccione.
13 |
14 | ## 💻 Resultado esperado:
15 |
16 | 
17 |
18 | ## 💡 Pistas:
19 |
20 | + ¿Recuerdas el bucle `for`? Puede ser muy útil en esta situación.
21 |
22 | + Lee sobre el [evento change](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).
23 |
--------------------------------------------------------------------------------
/exercises/10-Add-li-on-Click/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=hs0WuLzXWa4"
3 | ---
4 |
5 |
6 | # `10` Add li on Click
7 |
8 | ## 📝 Instrucciones:
9 |
10 | 1. Usando la función `createElement`, agrega un nuevo elemento `` a `#myList` cada vez que se haga clic en el `#superDuperButton`.
11 |
12 | ## 💻 Resultado Esperado:
13 |
14 | 
15 |
16 | ## 💡 Pistas:
17 |
18 | + Obtén el botón `#superDuperButton` con la función `getElementById`.
19 |
20 | + Agrega un listener de eventos de *click* al `#superDuperButton`.
21 |
22 | + Dentro de esa función de listener, agrega el código necesario para crear el nuevo elemento ` ` y añádelo a la lista como hijo.
23 |
--------------------------------------------------------------------------------
/exercises/01-hello-world/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=T3I448FYqWY"
3 | ---
4 |
5 |
6 | # `01` Hello World
7 |
8 | EL DOM es donde se combinan todos tus conocimientos de front-end, debes conocer un poco de HTML, CSS y JavaScript.
9 |
10 | Pero todo comienza con un Hello World, por supuesto. 😄
11 |
12 | ## 📝 Instrucciones:
13 |
14 | 1. Este ejercicio contiene un archivo HTML, un CSS y un archivo JS, abre tu archivo JS y complétalo con el código para generar una alerta con `Hello World`.
15 |
16 | ## 💡 Pistas:
17 |
18 | + Compila y obtén una vista previa del código del ejercicio. Se abrirá en una nueva ventana.
19 |
20 | + Presiona el botón de test cuando te sientas lo suficientemente cómodo para calificarlo automáticamente y pasar al siguiente ejercicio.
21 |
--------------------------------------------------------------------------------
/exercises/07-Create-DOM-list-of-li/README.md:
--------------------------------------------------------------------------------
1 | # `07` Create DOM list of li
2 |
3 | A great way to create HTML structures for your website is to concatenate several HTML strings in a single, bigger HTML string and then, append that string to the `innerHTML` of any element that is already a part of the HTML. For example:
4 |
5 | ```js
6 | let htmlString = '` element to the website `` we can do:
6 |
7 | ```js
8 | document.body.innerHTML = "
' + 'Hello World' + '
';
7 | ```
8 |
9 | ## 📝 Instructions:
10 |
11 | 1. Set the `listString` variable with the value needed to have the following HTML as the `body`'s innerHTML:
12 |
13 | ```html
14 | -
15 |
- First Item 16 |
- Second Item 17 |
- Third Item 18 |
` element to the website `` we can do:
6 |
7 | ```js
8 | document.body.innerHTML = "Hello World
";
9 | ```
10 |
11 | ## 📝 Instructions:
12 |
13 | 1. Insert an image with the source "https://via.placeholder.com/350x150" into the ``.
14 |
15 | ## 💡 Hint:
16 |
17 | + Here is the documentation for the `innerHTML` property: http://www.w3schools.com/jsref/prop_html_innerhtml.asp
18 |
--------------------------------------------------------------------------------
/exercises/13-Todo-List/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | TODO LIST
9 |
10 |
11 |
12 | To do List
13 |
14 |
15 | -
16 | Eat
17 |
18 | -
19 | Drink
20 |
21 | -
22 | Sleep
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/exercises/08.1-Remove-DOM-Element/README.md:
--------------------------------------------------------------------------------
1 | # `08.1` Remove DOM Element
2 |
3 | If you want to remove an element from the DOM, you use the `removeChild()` function. The challenge behind this function is that it needs to be called from the parent of the element that you want to remove. For example:
4 |
5 | ```html
6 |
7 | - First element
8 | - Second element
9 | - Third element
10 |
11 | ```
12 |
13 | In the previous code, to remove the second element, we need the function `removeChild()` from the parent ``, passing as a parameter the `- ` that I want to remove.
14 |
15 | Something like this:
16 |
17 | ```js
18 | let element = document.querySelector("#element-id");
19 | element.parentNode.removeChild(element);
20 | ```
21 |
22 | ## 📝 Instructions:
23 |
24 | 1. Remove the second `
- ` from the `
` that is part of the HTML of this website.
25 |
--------------------------------------------------------------------------------
/exercises/06-Create-DOM-Element-Second/tests.js:
--------------------------------------------------------------------------------
1 |
2 | jest.dontMock('fs');
3 | const fs = require('fs');
4 | const path = require('path');
5 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
6 | document.documentElement.innerHTML = html.toString();
7 |
8 | const js = fs.readFileSync(path.resolve(__dirname, './index.js'), 'utf8');
9 | const css = fs.readFileSync(path.resolve(__dirname, './styles.css'), 'utf8');
10 |
11 | const file = require("./index.js");
12 |
13 | it('Please use the innerHTML property to add an element to the ', function () {
14 | const expected1 = 'body.innerHTML';
15 | // we can read from the source code
16 | expect(js.indexOf(expected1) > -1).toBeTruthy();
17 | });
18 |
19 | it('Make sure to update the innerHTML to include an ![]()
tag', function () {
20 |
21 | expect(document.querySelector("img")).toBeTruthy();
22 | });
23 |
--------------------------------------------------------------------------------
/exercises/03-Change-Div-Background/README.md:
--------------------------------------------------------------------------------
1 | # `03` Change Div Background
2 |
3 | In this HTML website, inside the `` we have a `` with the `id='myDiv'`
4 |
5 | Try this:
6 |
7 | + Using JavaScript, please change the background of that `div` to `yellow`.
8 |
9 | + You can set any CSS style to any DOM element using the `element.style` property.
10 |
11 | For example, to change the background of an element, we need to set the `element.style.background` property to the color we want.
12 |
13 | ```js
14 | // 1. Query for the element
15 | let aux = document.querySelector('#anyElement');
16 |
17 | // 2. Set the background
18 | aux.style.background = "blue";
19 | ```
20 |
21 | Here you can read about [the style DOM object](http://www.w3schools.com/jsref/dom_obj_style.asp)
22 |
23 | ## 📝 Instructions:
24 |
25 | 1. The background color of `myDiv` is green by default. Change the `background` color to `yellow`.
26 |
--------------------------------------------------------------------------------
/exercises/07-Create-DOM-list-of-li/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=bw-PknOZ_TI"
3 | ---
4 |
5 |
6 | # `07` Create DOM list of li
7 |
8 | Una excelente manera de crear estructuras HTML para tu sitio web es concatenar varios strings de HTML en un solo string de HTML más grande, y luego, agregar ese string al `innerHTML` de cualquier elemento que ya sea parte del HTML. Por ejemplo:
9 |
10 | ```js
11 | let htmlString = '' + 'Hello World' + '';
12 | ```
13 |
14 | ## 📝 Instrucciones:
15 |
16 | 1. Establece la variable `listString` con el valor necesario para que el siguiente código HTML se imprima en el `body` usando innerHTML:
17 |
18 | ```html
19 |
20 | - First Item
21 | - Second Item
22 | - Third Item
23 |
24 | ```
25 |
26 | ## 💡 Pista:
27 |
28 | + Recuerda que el intérprete del navegador ignora los espacios en blanco y la sangría.
29 |
--------------------------------------------------------------------------------
/exercises/06-Create-DOM-Element-Second/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=gpJO-8xfCfo"
3 | ---
4 |
5 |
6 | # `06` Create DOM Element (2)
7 |
8 | En el ejercicio anterior vimos cómo crear un elemento DOM HTML usando las funciones `createElement()` y `appendChild()`. Hay otra forma de agregar un elemento al HTML del sitio web: `innerHTML`.
9 |
10 | La propiedad `innerHTML` se usa para ESTABLECER el contenido HTML dentro de cualquier elemento DOM. Por ejemplo, si queremos agregar un nuevo elemento `` al `` del sitio web, podemos hacer:
11 |
12 | ```js
13 | document.body.innerHTML = "Hello World
";
14 | ```
15 |
16 | ## 📝 Instrucciones:
17 |
18 | 1. Inserta una imagen con la siguiente fuente (src) "https://via.placeholder.com/350x150" en el ``.
19 |
20 | ## 💡 Pista:
21 |
22 | + Aquí está la documentación de la propiedad `innerHTML`: http://www.w3schools.com/jsref/prop_html_innerhtml.asp
23 |
--------------------------------------------------------------------------------
/exercises/13-Todo-List/README.md:
--------------------------------------------------------------------------------
1 | # `13` Todo List
2 |
3 | This to-do list design is pure CSS. The CSS and HTML are ready, but we need to code the JavaScript part of the application.
4 |
5 | As you can see, when you initially run, the ability to delete or add items to the to-do list does not yet exist!
6 |
7 | ## 📝 Instructions:
8 |
9 | 1. Please add the `"delete task"` and `"add task"` functionality.
10 |
11 | ## 💡 Hints:
12 |
13 | + Analyze the HTML code, how the list is designed and built, and what do you have to add to the HTML if you want a new item to appear inside the list?
14 |
15 | + If we were to delete any particular element, we would have to add a listener to the click handler on the trash icon and then delete the entire `
- ` in which the icon is included: https://stackoverflow.com/questions/68200378/how-to-remove-a-list-item-using-onclick
16 |
17 | + You don't have to edit anything from the HTML nor the CSS, only the JavaScript!
18 |
--------------------------------------------------------------------------------
/exercises/00-Welcome/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | intro: "https://www.youtube.com/watch?v=7KKoXnJLKEQ"
3 | ---
4 |
5 |
6 | # `00` Bienvenido Al DOM 😆 !!
7 |
8 | Ser un desarrollador web front-end se trata de [El DOM](https://4geeks.com/es/lesson/what-is-dom-define-dom-es). Con este tutorial entenderás los siguientes conceptos:
9 |
10 | + Manipulación de estilos del sitios web desde JavaScript.
11 |
12 | + Manipulación de HTML del sitio web desde JavaScript.
13 |
14 | + Hacer cambios en el sitio web sin refrescar la página.
15 |
16 | + Seleccionar elementos del DOM usando `document.querySelector` y actualizar su código usando `innerHTML`.
17 |
18 | + Programación orientada a eventos: escuchador de eventos del usuario y del sistema.
19 |
20 | + Creación de elementos y etiquetas con `createNode()`.
21 |
22 | + Practicar eventos orientados al usuario como: `onClick`, `onMouseHover`, etc.
23 |
24 | + Listeners (escuchadores) de eventos y controladores de eventos.
25 |
--------------------------------------------------------------------------------
/exercises/08.1-Remove-DOM-Element/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=FR-1STeP4Fg"
3 | ---
4 |
5 |
6 | # `08.1` Remove DOM Element
7 |
8 | Si deseas eliminar un elemento del DOM, debes usar la función `removeChild()`. El desafío detrás de esta función es que debe llamarse desde el padre del elemento que quieres eliminar. Por ejemplo:
9 |
10 | ```html
11 |
12 | - First element
13 | - Second element
14 | - Third element
15 |
16 | ```
17 |
18 | En el código anterior, para eliminar el segundo elemento, necesito la función `removeChild()` desde la `` padre, pasando como parámetro el `- ` que quiero eliminar.
19 |
20 | Algo como esto:
21 |
22 | ```js
23 | let element = document.querySelector("#element-id");
24 | element.parentNode.removeChild(element);
25 | ```
26 |
27 | ## 📝 Instrucciones:
28 |
29 | 1. Elimina el segundo `
- ` de la `
` que forma parte del HTML de este sitio web.
30 |
--------------------------------------------------------------------------------
/.github/workflows/learnpack-audit.yml:
--------------------------------------------------------------------------------
1 | # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3 |
4 | name: Learnpack audit
5 |
6 | on:
7 | push:
8 | branches: [ main ]
9 | pull_request:
10 | branches: [ main ]
11 |
12 | jobs:
13 | build:
14 |
15 | runs-on: ubuntu-latest
16 |
17 | strategy:
18 | matrix:
19 | node-version: [20.x]
20 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
21 |
22 | steps:
23 | - uses: actions/checkout@v2
24 | - name: Use Node.js ${{ matrix.node-version }}
25 | uses: actions/setup-node@v2
26 | with:
27 | node-version: ${{ matrix.node-version }}
28 | - run: npm install @learnpack/learnpack@latest -g
29 | - run: learnpack audit
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | # TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
2 |
3 | By accessing Breathe Code we assume you accept these terms and conditions. Do not continue to use Breathe Code's content, applications or tutorials if you do not agree to take all of the terms and conditions stated on this page.
4 |
5 | Unless otherwise stated, Breathe Code and/or its licensors own the intellectual property rights for all material on Breathe Code. All intellectual property rights are reserved. You may access this from Breathe Code for your own personal use subjected to restrictions set in these terms and conditions.
6 |
7 | You must not:
8 |
9 | * Republish material from Breathe Code
10 | * Sell, rent or sub-license material from Breathe Code
11 | * Reproduce, duplicate or copy material from Breathe Code
12 | * Redistribute content from Breathe Code
13 |
14 | You can read the full version of Breathe Code's terms and conditions here: [Terms and Conditions](http://breatheco.de/terms-and-conditions)
15 |
--------------------------------------------------------------------------------
/exercises/07-Create-DOM-list-of-li/tests.js:
--------------------------------------------------------------------------------
1 |
2 | const fs = require('fs');
3 | const path = require('path');
4 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
5 | const js = fs.readFileSync(path.resolve(__dirname, './index.js'), 'utf8');
6 | const css = fs.readFileSync(path.resolve(__dirname, './styles.css'), 'utf8');
7 |
8 | jest.dontMock('fs');
9 |
10 | it('The website DOM must contain 3 - items' , function () {
11 | const file = require("./index.js");
12 | let lis = document.querySelectorAll("ul > li");
13 | expect(lis.length).toBe(3);
14 | });
15 |
16 | it('the html code should contain a `) > -1).toBeTruthy();
20 |
21 | //or use query selector to compare hoy mane scriptags do we have
22 | const scripts = document.querySelectorAll("script");
23 | expect(scripts.length).toBe(1);
24 | });
25 |
--------------------------------------------------------------------------------
/exercises/09-Render-on-Click/README.md:
--------------------------------------------------------------------------------
1 | # `09` Render on Click
2 |
3 | User interactions normally require changes in the DOM. For that, we use: **events**.
4 |
5 | ## 📝 Instructions:
6 |
7 | 1. Using the `createElement` function, create a `` container with `yellow` background and "Hello World" as `innerHTML`.
8 |
9 | 2. Then append that `` into the `` of the website when the user clicks on the `#superDuperButton`.
10 |
11 | ## 💻 Expected result:
12 |
13 | 
14 |
15 | ## 💡 Hints:
16 |
17 | + Get the button with the `getElementById` function.
18 |
19 | + Add a click event listener to the `#superDuperButton`.
20 |
21 | + Inside that listener function, add the needed code to create the element and append it to the `` as a child.
22 |
23 | ## 🔎 Important:
24 |
25 | + If you don't feel comfortable with **events** yet, please complete all these exercises first: [https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises).
26 |
--------------------------------------------------------------------------------
/exercises/13-Todo-List/solution.hide.js:
--------------------------------------------------------------------------------
1 | // Your code here
2 | const inputField = document.getElementById("addToDo");
3 | const todoList = document.querySelector("ul");
4 |
5 | function addTask() {
6 | const taskText = inputField.value.trim(); // Get the input value and remove leading/trailing spaces
7 |
8 | if (taskText !== "") {
9 | // Only add a task if it's not empty
10 | const listItem = document.createElement("li");
11 | listItem.innerHTML = ` ${taskText}`;
12 | todoList.appendChild(listItem);
13 | inputField.value = ""; // Clear the input field
14 | }
15 | }
16 |
17 | function deleteTask(event) {
18 | const clickedElement = event.target;
19 | if (clickedElement.classList.contains("fa-trash")) {
20 | const listItem = clickedElement.parentElement.parentElement;
21 | todoList.removeChild(listItem);
22 | }
23 | }
24 |
25 | inputField.addEventListener("keypress", function (e) {
26 | if (e.key === "Enter") {
27 | addTask();
28 | }
29 | });
30 |
31 | todoList.addEventListener("click", deleteTask);
32 |
--------------------------------------------------------------------------------
/learn.json:
--------------------------------------------------------------------------------
1 | {
2 | "slug": "the-dom-exercises",
3 | "grading": "isolated",
4 | "repository": "https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises",
5 | "title": {
6 | "us": "Learn how to manipulate The DOM with JS",
7 | "es": "Aprende cómo manipular el DOM con JavaScript"
8 | },
9 | "preview": "https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises/blob/master/preview.png?raw=true",
10 | "description": {
11 | "us": "Step by step, go over all the most important DOM concepts and methods: Use javascript to manipulate styles, HTML elements.",
12 | "es": "Paso a paso, ve sobre todos los conceptos y métodos del DOM: Usa Javascript para manipular los estilos de los elementos de HTML."
13 | },
14 | "duration": 6,
15 | "difficulty": "easy",
16 | "autoPlay": true,
17 | "videoSolutions": false,
18 | "bugsLink": "https://github.com/learnpack/learnpack/issues/new",
19 | "projectType": "tutorial",
20 | "editor": {
21 | "version": "5.0"
22 | },
23 | "telemetry": {
24 | "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry?asset_id=151"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/exercises/03-Change-Div-Background/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=8u2yrg_AQAM"
3 | ---
4 |
5 |
6 | # `03` Change Div Background
7 |
8 | En este sitio web HTML, dentro del `` tenemos un `` con el `id='myDiv'`
9 |
10 | Intenta esto:
11 |
12 | + Usando JavaScript, cambia el fondo (background) de ese `div` a `yellow`.
13 |
14 | + Puedes configurar cualquier estilo CSS en cualquier elemento DOM utilizando la propiedad `element.style`.
15 |
16 | Por ejemplo, Para cambiar el fondo de un elemento, necesitamos establecer la propiedad `element.style.background` con el color que queramos.
17 |
18 | ```js
19 | // 1. Consulta (query) el elemento
20 | let aux = document.querySelector('#anyElement');
21 |
22 | // 2. Establece el color del fondo (background)
23 | aux.style.background = "blue";
24 | ```
25 |
26 | Aquí puedes leer sobre el [objeto style del DOM](http://www.w3schools.com/jsref/dom_obj_style.asp)
27 |
28 | ## 📝 Instrucciones:
29 |
30 | 1. El color de fondo de `myDiv` es verde por defecto. Cambia el color de fondo (`background`) a amarillo (`yellow`).
31 |
--------------------------------------------------------------------------------
/exercises/13-Todo-List/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=yi7E-8jxSOk"
3 | ---
4 |
5 |
6 | # `13` Todo List
7 |
8 | Este diseño de lista de tareas (Todo List) es puro CSS. El CSS y HTML están listos, pero necesitamos codificar la parte JavaScript de la aplicación.
9 |
10 | Como puedes ver, cuando se ejecuta inicialmente, la capacidad de eliminar o agregar elementos a la lista de tareas aún no existe.
11 |
12 | ## 📝 Instrucciones:
13 |
14 | 1. Agrega la funcionalidad `"delete task"` (eliminar tarea) y `"add task"` (añadir tarea).
15 |
16 | ## 💡 Pistas:
17 |
18 | + Analiza el código HTML, cómo se diseña y construye la lista, ¿qué debes agregar al HTML si desea que aparezca un nuevo elemento dentro de la lista?
19 |
20 | + Si tuviéramos que eliminar algún elemento en particular, tendríamos que agregar un listener de clicks al ícono de la papelera y luego eliminar todo el `
- ` en el que está incluido el ícono: https://stackoverflow.com/questions/68200378/how-to-remove-a-list-item-using-onclick
21 |
22 | + No tienes que editar nada del HTML ni del CSS, ¡solo el JavaScript!
23 |
--------------------------------------------------------------------------------
/exercises/02-Select-DOM-Element/README.md:
--------------------------------------------------------------------------------
1 | # `02` Select DOM Element
2 |
3 | In this website, we have 2 elements: one `
` with the **id** `#theTitle` and a paragraph with the **id** `#theParagraph`. You can select any of the objects in the DOM with the `querySelector` function.
4 |
5 | For example: If we want to select the `` element, we can do the following:
6 |
7 | ```js
8 | let aux = document.querySelector('#theTitle');
9 | // The variable aux now contains the H1 DOM element inside.
10 | ```
11 |
12 | Now that we have our `h1` element stored on `aux`, we can access any of the `h1` properties, for example we can retrieve the `font-size` style property like this:
13 |
14 | ```js
15 | let aux = document.querySelector('#theTitle');
16 | console.log(aux.style.fontSize);
17 | ```
18 |
19 | Here you can read more about it: [read more](https://www.w3schools.com/jsref/prop_style_fontsize.asp)
20 |
21 | ## 📝 Instructions:
22 |
23 | 1. Prompt an alert with the `id` of the `h1`.
24 |
25 | ## 💡 Hint:
26 |
27 | + Here you can read more about the id property of any DOM element: http://www.w3schools.com/jsref/prop_html_id.asp
28 |
--------------------------------------------------------------------------------
/exercises/09-Render-on-Click/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=7acz8Pqgr-0"
3 | ---
4 |
5 |
6 | # `09` Render on Click
7 |
8 | Las interacciones del usuario normalmente requieren cambios en el DOM. Para ello usamos: **eventos**.
9 |
10 | ## 📝 Instrucciones:
11 |
12 | 1. Usando la función `createElement`, crea un contenedor `` con fondo (`background`) amarillo y un "Hello World" como `innerHTML`.
13 |
14 | 2. Luego agrega ese `` en el `` del sitio web cuando el usuario haga clic en el `#superDuperButton`.
15 |
16 | ## 💻 Resultado Esperado:
17 |
18 | 
19 |
20 | ## 💡 Pistas:
21 |
22 | + Obtén el botón con la función `getElementById`.
23 |
24 | + Agrega un listener de eventos al `#superDuperButton`.
25 |
26 | + Dentro de esa función de listener, agrega el código necesario para crear el elemento y añádelo al `` como un hijo (`appendChild`).
27 |
28 | ## 🔎 Importante:
29 |
30 | + Si aún no te sientes cómodo con los **eventos**, por favor primero completa estos ejercicios: [https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises)
31 |
--------------------------------------------------------------------------------
/exercises/02-Select-DOM-Element/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=Edrf7rGWWlQ"
3 | ---
4 |
5 |
6 | # `02` Select DOM Element
7 |
8 | En este sitio web, tenemos 2 elementos: un `` con el **id** `#theTitle` y un párrafo con el **id** `#theParagraph`. Puedes seleccionar cualquiera de los objetos en el DOM con la función `querySelector`.
9 |
10 | Por ejemplo: si queremos seleccionar el elemento ``, podemos hacer lo siguiente:
11 |
12 | ```js
13 | let aux = document.querySelector('#theTitle');
14 | // La variable aux ahora contiene el elemento H1 del DOM dentro.
15 | ```
16 |
17 | Ahora que tenemos nuestro elemento `h1` guardado en `aux`, podemos acceder a cualquiera de las propiedades de `h1`, por ejemplo, podemos recuperar la propiedad de estilo `font-size` (tamaño de fuente) de esta manera:
18 |
19 | ```js
20 | let aux = document.querySelector('#theTitle');
21 | console.log(aux.style.fontSize);
22 | ```
23 |
24 | Aquí puedes [leer más al respecto](https://www.w3schools.com/jsref/prop_style_fontsize.asp)
25 |
26 | ## 📝 Instrucciones:
27 |
28 | 1. Muestra una alerta con la `id` de `h1`.
29 |
30 | ## 💡 Pista:
31 |
32 | + Aquí puedes leer más sobre la propiedad id de cualquier elemento DOM: http://www.w3schools.com/jsref/prop_html_id.asp
33 |
--------------------------------------------------------------------------------
/exercises/08.1-Remove-DOM-Element/tests.js:
--------------------------------------------------------------------------------
1 | jest.dontMock('fs');
2 | const fs = require('fs');
3 | const path = require('path');
4 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
5 | const js = fs.readFileSync(path.resolve(__dirname, './index.js'), 'utf8');
6 | const css = fs.readFileSync(path.resolve(__dirname, './styles.css'), 'utf8');
7 | document.documentElement.innerHTML = html.toString();
8 |
9 | let _document = document.cloneNode(true);
10 | document.querySelector = jest.fn((selector) => {
11 | return _document.querySelector(selector);
12 | });
13 |
14 | let li = _document.querySelector("ul li:nth-child(2)")
15 | let _li = li.cloneNode(true);
16 |
17 | li.parentNode.removeChild = jest.fn((elm) => null);
18 |
19 | const file = require("./index.js");
20 |
21 | test(`Please use the function querySelector to find the #secondElement`, function () {
22 | //then I import the index.js (which should have the alert() call inside)
23 | expect(document.querySelector).toHaveBeenCalledWith("#secondElement");
24 | });
25 |
26 | test(`Use the function removeChild and pass the second
- element to it`, function () {
27 |
28 | //then I import the index.js (which should have the alert() call inside)
29 | expect(li.parentNode.removeChild).toHaveBeenCalledWith(li);
30 | });
31 |
32 |
--------------------------------------------------------------------------------
/exercises/05-Create-DOM-Element-First/README.md:
--------------------------------------------------------------------------------
1 | # `05` Create DOM Element (1)
2 |
3 | It is possible to create a new DOM element from JavaScript with the function `createElement()`.
4 |
5 | ```js
6 | let elem = document.createElement("h1");
7 | ```
8 |
9 | After you create any element, you have to add it to the website's DOM if you want to display it inside the website. To add the element to the DOM we use the function `appendChild()`.
10 |
11 | ```js
12 | let elem = document.createElement("h1");
13 | elem.innerHTML = "Hello World";
14 | document.body.appendChild(elem);
15 | ```
16 |
17 | ## 📝 Instructions:
18 |
19 | 1. Using the `createElement()` function, create a paragraph (`p`) element with `yellow` background, set the `innerHTML` to 'Hello World', and finally append it in the document.
20 |
21 | ## 💻 Expected output:
22 |
23 | + At the end, your website should look like this:
24 |
25 | 
26 |
27 | ## 💡 Hints:
28 |
29 | + Create a `p` element.
30 |
31 | + Set the `innerHTML`.
32 |
33 | + Remember to set the `yellow` style.
34 |
35 | + `appendChild()` to the document.
36 |
37 | ## 🔎 Important:
38 |
39 | + The `innerHTML` property of any DOM element is used to set the HTML content that is going to be set inside of that HTML TAG. Don't worry, it's not that complicated!
40 |
--------------------------------------------------------------------------------
/exercises/08.2-Remove-DOM-Element/README.md:
--------------------------------------------------------------------------------
1 | # `08.2` Remove DOM Element
2 |
3 | It is possible to retrieve all the children of a DOM element by using the `childNodes` property of that element. For example:
4 |
5 | ```js
6 | let list = document.querySelector("#myList");
7 | let childs = list.childNodes;
8 | ```
9 |
10 | 
11 |
12 | 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.
13 |
14 | ## 📝 Instructions:
15 |
16 | 1. With the above knowledge 'in hand' and using the `childNodes` property, delete the second `- ` from the `#parentLi` list.
17 |
18 | ## 💡 Hints:
19 |
20 | + Judging by the output of `childNodes`, you have to use the appropriate index of that array to remove the second `
- ` element from the DOM.
21 |
22 | ## 🔎 Important:
23 |
24 | + 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
25 |
26 | + Now repeat the exercise by replacing `childNodes` with `children` - `console.log()` it, observe the result and remove the second `
- `. What do you notice?
27 |
--------------------------------------------------------------------------------
/.devcontainer/devcontainer.json:
--------------------------------------------------------------------------------
1 |
2 | // For format details, see https://aka.ms/devcontainer.json. For config options, see the
3 | // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
4 | {
5 | "name": "Node.js",
6 | // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
7 | "image": "mcr.microsoft.com/devcontainers/javascript-node:0-16",
8 | "customizations": {
9 | "vscode": {
10 | "settings": {
11 | "editor.defaultFormatter": "esbenp.prettier-vscode",
12 | "workbench.editorAssociations": {
13 | "*.md": "vscode.markdown.preview.editor"
14 | }
15 | },
16 | "extensions": ["learn-pack.learnpack-vscode"]
17 | }
18 | },
19 |
20 | // Features to add to the dev container. More info: https://containers.dev/features.
21 | // "features": {},
22 |
23 | // Use 'forwardPorts' to make a list of ports inside the container available locally.
24 | // "forwardPorts": [],
25 |
26 | "onCreateCommand": "npm i jest@29.7.0 -g && npm i jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@5.0.29 -g && learnpack plugins:install @learnpack/dom@1.1.7"
27 |
28 | // Use 'postCreateCommand' to run commands after the container is created.
29 | // "postCreateCommand": "yarn install",
30 |
31 | // Configure tool-specific properties.
32 | // "customizations": {},
33 |
34 | // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
35 | // "remoteUser": "root"
36 | }
37 |
--------------------------------------------------------------------------------
/exercises/05-Create-DOM-Element-First/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=RTeT-w81vlc"
3 | ---
4 |
5 |
6 | # `05` Create DOM Element (1)
7 |
8 | Es posible crear un nuevo elemento del DOM desde JavaScript con la función `createElement()`.
9 |
10 | ```js
11 | let elem = document.createElement("h1");
12 | ```
13 |
14 | Después de crear cualquier elemento, debes agregarlo al DOM del sitio web si deseas mostrarlo dentro del sitio web. Para agregar el elemento al DOM usamos la función `appendChild()`.
15 |
16 | ```js
17 | let elem = document.createElement("h1");
18 | elem.innerHTML = "Hello World";
19 | document.body.appendChild(elem);
20 | ```
21 |
22 | ## 📝 Instrucciones:
23 |
24 | 1. Usando la función `createElement()`, crea un elemento párrafo (`p`) con fondo (background) amarillo (`yellow`), establece el `innerHTML` como 'Hello World' y finalmente agregalo al documento (`appendChild()`).
25 |
26 | ## 💻 Resultado esperado:
27 |
28 | + Al final tu website debería verse así:
29 |
30 | 
31 |
32 | ## 💡 Pistas:
33 |
34 | + Crea un elemento `p`.
35 |
36 | + Establece el `innerHTML`.
37 |
38 | + Recuerda configurar el estilo amarillo (`yellow`).
39 |
40 | + Agrega el elemento al documento utilizando la función `appendChild()`.
41 |
42 | ## 🔎 Importante:
43 |
44 | + La propiedad `innerHTML` de cualquier elemento DOM se usa para establecer el contenido HTML que se establecerá dentro de esa etiqueta HTML ¡No te preocupes, no es tan complicado!
45 |
--------------------------------------------------------------------------------
/exercises/08.2-Remove-DOM-Element/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=w2WfYQ8TYUo"
3 | ---
4 |
5 |
6 | # `08.2` Remove DOM element
7 |
8 | Es posible recuperar todos los elementos hijos de un elemento del DOM, para eso debes usar la propiedad `childNodes` del elemento. Por ejemplo:
9 |
10 | ```js
11 | let list = document.querySelector("#myList");
12 | let childs = list.childNodes;
13 | ```
14 |
15 | 
16 |
17 | 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.
18 |
19 | ## 📝 Instrucciones:
20 |
21 | 1. Con la información que acabamos de leer, usando la propiedad `childNodes`, elimina el segundo `- ` de la lista `#parentLi`.
22 |
23 | ## 💡 Pistas:
24 |
25 | + `childNodes` devuelve un array de `
- `, puedes acceder al segundo elemento de ese array con el index y eliminarlo del DOM.
26 |
27 | ## 🔎 Importante:
28 |
29 | + 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
30 |
31 | + 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?
32 |
--------------------------------------------------------------------------------
/exercises/11-Dynamic-HTML-String/README.md:
--------------------------------------------------------------------------------
1 | # `11` Dynamic HTML String
2 |
3 | One of the cool things about JavaScript, is that it lets you create dynamic HTML strings during runtime, which means that you can create HTML automatically while you sleep! Yes! Bear with me, and you will understand how...
4 |
5 | Please take a look at the following string:
6 |
7 | ```js
8 | let myString = "
Hello!
My friend";
9 | ```
10 | As humans, we know that this string is formatted like HTML because it has a `` and a `` tag inside. But JavaScript doesn't know that, JavaScript only understands a string as a series of characters, it does not matter if the characters are set in a way that looks like HTML.
11 |
12 | What if you write that string into an HTML document during runtime? The browser will interpret that string as HTML (it's what browsers do), and it will render it as HTML, removing the tags and applying their respective format into the remaining text.
13 |
14 | Here is the code you need to print any string into the HTML document:
15 |
16 | ```js
17 | let myString = "Hello!
My friend";
18 | document.write(myString);
19 | ```
20 |
21 | ## 📝 Instructions:
22 |
23 | 1. Using the `getFullYear()` function from the `Date()` object, change the string content of the variable `myString` to make it print the current date's year into the HTML.
24 |
25 | ## 💻 Expected result:
26 |
27 | 
28 |
29 | ## 💡 Hint:
30 |
31 | + Please print the current year using the date object; don't set the string to a particular year, append the current year to the end of it.
32 |
--------------------------------------------------------------------------------
/exercises/10-Add-li-on-Click/tests.js:
--------------------------------------------------------------------------------
1 | jest.dontMock('fs');
2 |
3 | const fs = require('fs');
4 | const path = require('path');
5 | const {
6 | queryByText,
7 | // Tip: all queries are also exposed on an object
8 | // called "queries" which you could import here as well
9 | fireEvent,
10 | waitFor,
11 | } = require('@testing-library/dom')
12 |
13 | const css = fs.readFileSync(path.resolve(__dirname, './styles.css'), 'utf8');
14 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
15 |
16 | document.documentElement.innerHTML = html.toString();
17 |
18 | let _document = document.cloneNode(true);
19 |
20 | document.createElement = jest.fn((selector) => {
21 | return _document.createElement(selector);
22 | });
23 |
24 | require(path.resolve(__dirname, './index.js'))
25 |
26 | test('The
To do List
13 | 14 |-
15 |
- 16 | Eat 17 | 18 |
- 19 | Drink 20 | 21 |
- 22 | Sleep 23 | 24 |
- ` that is part of the HTML of this website.
25 |
--------------------------------------------------------------------------------
/exercises/06-Create-DOM-Element-Second/tests.js:
--------------------------------------------------------------------------------
1 |
2 | jest.dontMock('fs');
3 | const fs = require('fs');
4 | const path = require('path');
5 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
6 | document.documentElement.innerHTML = html.toString();
7 |
8 | const js = fs.readFileSync(path.resolve(__dirname, './index.js'), 'utf8');
9 | const css = fs.readFileSync(path.resolve(__dirname, './styles.css'), 'utf8');
10 |
11 | const file = require("./index.js");
12 |
13 | it('Please use the innerHTML property to add an element to the ', function () {
14 | const expected1 = 'body.innerHTML';
15 | // we can read from the source code
16 | expect(js.indexOf(expected1) > -1).toBeTruthy();
17 | });
18 |
19 | it('Make sure to update the innerHTML to include an
- First Item 21 |
- Second Item 22 |
- Third Item 23 |
- ` in which the icon is included: https://stackoverflow.com/questions/68200378/how-to-remove-a-list-item-using-onclick
16 |
17 | + You don't have to edit anything from the HTML nor the CSS, only the JavaScript!
18 |
--------------------------------------------------------------------------------
/exercises/00-Welcome/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | intro: "https://www.youtube.com/watch?v=7KKoXnJLKEQ"
3 | ---
4 |
5 |
6 | # `00` Bienvenido Al DOM 😆 !!
7 |
8 | Ser un desarrollador web front-end se trata de [El DOM](https://4geeks.com/es/lesson/what-is-dom-define-dom-es). Con este tutorial entenderás los siguientes conceptos:
9 |
10 | + Manipulación de estilos del sitios web desde JavaScript.
11 |
12 | + Manipulación de HTML del sitio web desde JavaScript.
13 |
14 | + Hacer cambios en el sitio web sin refrescar la página.
15 |
16 | + Seleccionar elementos del DOM usando `document.querySelector` y actualizar su código usando `innerHTML`.
17 |
18 | + Programación orientada a eventos: escuchador de eventos del usuario y del sistema.
19 |
20 | + Creación de elementos y etiquetas con `createNode()`.
21 |
22 | + Practicar eventos orientados al usuario como: `onClick`, `onMouseHover`, etc.
23 |
24 | + Listeners (escuchadores) de eventos y controladores de eventos.
25 |
--------------------------------------------------------------------------------
/exercises/08.1-Remove-DOM-Element/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=FR-1STeP4Fg"
3 | ---
4 |
5 |
6 | # `08.1` Remove DOM Element
7 |
8 | Si deseas eliminar un elemento del DOM, debes usar la función `removeChild()`. El desafío detrás de esta función es que debe llamarse desde el padre del elemento que quieres eliminar. Por ejemplo:
9 |
10 | ```html
11 |
-
12 |
- First element 13 |
- Second element 14 |
- Third element 15 |
- ` padre, pasando como parámetro el `
- ` que quiero eliminar. 19 | 20 | Algo como esto: 21 | 22 | ```js 23 | let element = document.querySelector("#element-id"); 24 | element.parentNode.removeChild(element); 25 | ``` 26 | 27 | ## 📝 Instrucciones: 28 | 29 | 1. Elimina el segundo `
- ` de la `
- ` que forma parte del HTML de este sitio web.
30 |
--------------------------------------------------------------------------------
/.github/workflows/learnpack-audit.yml:
--------------------------------------------------------------------------------
1 | # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3 |
4 | name: Learnpack audit
5 |
6 | on:
7 | push:
8 | branches: [ main ]
9 | pull_request:
10 | branches: [ main ]
11 |
12 | jobs:
13 | build:
14 |
15 | runs-on: ubuntu-latest
16 |
17 | strategy:
18 | matrix:
19 | node-version: [20.x]
20 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
21 |
22 | steps:
23 | - uses: actions/checkout@v2
24 | - name: Use Node.js ${{ matrix.node-version }}
25 | uses: actions/setup-node@v2
26 | with:
27 | node-version: ${{ matrix.node-version }}
28 | - run: npm install @learnpack/learnpack@latest -g
29 | - run: learnpack audit
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | # TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
2 |
3 | By accessing Breathe Code we assume you accept these terms and conditions. Do not continue to use Breathe Code's content, applications or tutorials if you do not agree to take all of the terms and conditions stated on this page.
4 |
5 | Unless otherwise stated, Breathe Code and/or its licensors own the intellectual property rights for all material on Breathe Code. All intellectual property rights are reserved. You may access this from Breathe Code for your own personal use subjected to restrictions set in these terms and conditions.
6 |
7 | You must not:
8 |
9 | * Republish material from Breathe Code
10 | * Sell, rent or sub-license material from Breathe Code
11 | * Reproduce, duplicate or copy material from Breathe Code
12 | * Redistribute content from Breathe Code
13 |
14 | You can read the full version of Breathe Code's terms and conditions here: [Terms and Conditions](http://breatheco.de/terms-and-conditions)
15 |
--------------------------------------------------------------------------------
/exercises/07-Create-DOM-list-of-li/tests.js:
--------------------------------------------------------------------------------
1 |
2 | const fs = require('fs');
3 | const path = require('path');
4 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
5 | const js = fs.readFileSync(path.resolve(__dirname, './index.js'), 'utf8');
6 | const css = fs.readFileSync(path.resolve(__dirname, './styles.css'), 'utf8');
7 |
8 | jest.dontMock('fs');
9 |
10 | it('The website DOM must contain 3
- items' , function () {
11 | const file = require("./index.js");
12 | let lis = document.querySelectorAll("ul > li");
13 | expect(lis.length).toBe(3);
14 | });
15 |
16 | it('the html code should contain a `) > -1).toBeTruthy();
20 |
21 | //or use query selector to compare hoy mane scriptags do we have
22 | const scripts = document.querySelectorAll("script");
23 | expect(scripts.length).toBe(1);
24 | });
25 |
--------------------------------------------------------------------------------
/exercises/09-Render-on-Click/README.md:
--------------------------------------------------------------------------------
1 | # `09` Render on Click
2 |
3 | User interactions normally require changes in the DOM. For that, we use: **events**.
4 |
5 | ## 📝 Instructions:
6 |
7 | 1. Using the `createElement` function, create a `` container with `yellow` background and "Hello World" as `innerHTML`. 8 | 9 | 2. Then append that `` into the `` of the website when the user clicks on the `#superDuperButton`. 10 | 11 | ## 💻 Expected result: 12 | 13 |  14 | 15 | ## 💡 Hints: 16 | 17 | + Get the button with the `getElementById` function. 18 | 19 | + Add a click event listener to the `#superDuperButton`. 20 | 21 | + Inside that listener function, add the needed code to create the element and append it to the `` as a child. 22 | 23 | ## 🔎 Important: 24 | 25 | + If you don't feel comfortable with **events** yet, please complete all these exercises first: [https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises). 26 | -------------------------------------------------------------------------------- /exercises/13-Todo-List/solution.hide.js: -------------------------------------------------------------------------------- 1 | // Your code here 2 | const inputField = document.getElementById("addToDo"); 3 | const todoList = document.querySelector("ul"); 4 | 5 | function addTask() { 6 | const taskText = inputField.value.trim(); // Get the input value and remove leading/trailing spaces 7 | 8 | if (taskText !== "") { 9 | // Only add a task if it's not empty 10 | const listItem = document.createElement("li"); 11 | listItem.innerHTML = ` ${taskText}`; 12 | todoList.appendChild(listItem); 13 | inputField.value = ""; // Clear the input field 14 | } 15 | } 16 | 17 | function deleteTask(event) { 18 | const clickedElement = event.target; 19 | if (clickedElement.classList.contains("fa-trash")) { 20 | const listItem = clickedElement.parentElement.parentElement; 21 | todoList.removeChild(listItem); 22 | } 23 | } 24 | 25 | inputField.addEventListener("keypress", function (e) { 26 | if (e.key === "Enter") { 27 | addTask(); 28 | } 29 | }); 30 | 31 | todoList.addEventListener("click", deleteTask); 32 | -------------------------------------------------------------------------------- /learn.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "the-dom-exercises", 3 | "grading": "isolated", 4 | "repository": "https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises", 5 | "title": { 6 | "us": "Learn how to manipulate The DOM with JS", 7 | "es": "Aprende cómo manipular el DOM con JavaScript" 8 | }, 9 | "preview": "https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises/blob/master/preview.png?raw=true", 10 | "description": { 11 | "us": "Step by step, go over all the most important DOM concepts and methods: Use javascript to manipulate styles, HTML elements.", 12 | "es": "Paso a paso, ve sobre todos los conceptos y métodos del DOM: Usa Javascript para manipular los estilos de los elementos de HTML." 13 | }, 14 | "duration": 6, 15 | "difficulty": "easy", 16 | "autoPlay": true, 17 | "videoSolutions": false, 18 | "bugsLink": "https://github.com/learnpack/learnpack/issues/new", 19 | "projectType": "tutorial", 20 | "editor": { 21 | "version": "5.0" 22 | }, 23 | "telemetry": { 24 | "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry?asset_id=151" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /exercises/03-Change-Div-Background/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=8u2yrg_AQAM" 3 | --- 4 | 5 | 6 | # `03` Change Div Background 7 | 8 | En este sitio web HTML, dentro del `` tenemos un `` con el `id='myDiv'` 9 | 10 | Intenta esto: 11 | 12 | + Usando JavaScript, cambia el fondo (background) de ese `div` a `yellow`. 13 | 14 | + Puedes configurar cualquier estilo CSS en cualquier elemento DOM utilizando la propiedad `element.style`. 15 | 16 | Por ejemplo, Para cambiar el fondo de un elemento, necesitamos establecer la propiedad `element.style.background` con el color que queramos. 17 | 18 | ```js 19 | // 1. Consulta (query) el elemento 20 | let aux = document.querySelector('#anyElement'); 21 | 22 | // 2. Establece el color del fondo (background) 23 | aux.style.background = "blue"; 24 | ``` 25 | 26 | Aquí puedes leer sobre el [objeto style del DOM](http://www.w3schools.com/jsref/dom_obj_style.asp) 27 | 28 | ## 📝 Instrucciones: 29 | 30 | 1. El color de fondo de `myDiv` es verde por defecto. Cambia el color de fondo (`background`) a amarillo (`yellow`). 31 | -------------------------------------------------------------------------------- /exercises/13-Todo-List/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=yi7E-8jxSOk" 3 | --- 4 | 5 | 6 | # `13` Todo List 7 | 8 | Este diseño de lista de tareas (Todo List) es puro CSS. El CSS y HTML están listos, pero necesitamos codificar la parte JavaScript de la aplicación. 9 | 10 | Como puedes ver, cuando se ejecuta inicialmente, la capacidad de eliminar o agregar elementos a la lista de tareas aún no existe. 11 | 12 | ## 📝 Instrucciones: 13 | 14 | 1. Agrega la funcionalidad `"delete task"` (eliminar tarea) y `"add task"` (añadir tarea). 15 | 16 | ## 💡 Pistas: 17 | 18 | + Analiza el código HTML, cómo se diseña y construye la lista, ¿qué debes agregar al HTML si desea que aparezca un nuevo elemento dentro de la lista? 19 | 20 | + Si tuviéramos que eliminar algún elemento en particular, tendríamos que agregar un listener de clicks al ícono de la papelera y luego eliminar todo el `
- ` en el que está incluido el ícono: https://stackoverflow.com/questions/68200378/how-to-remove-a-list-item-using-onclick 21 | 22 | + No tienes que editar nada del HTML ni del CSS, ¡solo el JavaScript! 23 | -------------------------------------------------------------------------------- /exercises/02-Select-DOM-Element/README.md: -------------------------------------------------------------------------------- 1 | # `02` Select DOM Element 2 | 3 | In this website, we have 2 elements: one `
` with the **id** `#theTitle` and a paragraph with the **id** `#theParagraph`. You can select any of the objects in the DOM with the `querySelector` function. 4 | 5 | For example: If we want to select the `
` element, we can do the following: 6 | 7 | ```js 8 | let aux = document.querySelector('#theTitle'); 9 | // The variable aux now contains the H1 DOM element inside. 10 | ``` 11 | 12 | Now that we have our `h1` element stored on `aux`, we can access any of the `h1` properties, for example we can retrieve the `font-size` style property like this: 13 | 14 | ```js 15 | let aux = document.querySelector('#theTitle'); 16 | console.log(aux.style.fontSize); 17 | ``` 18 | 19 | Here you can read more about it: [read more](https://www.w3schools.com/jsref/prop_style_fontsize.asp) 20 | 21 | ## 📝 Instructions: 22 | 23 | 1. Prompt an alert with the `id` of the `h1`. 24 | 25 | ## 💡 Hint: 26 | 27 | + Here you can read more about the id property of any DOM element: http://www.w3schools.com/jsref/prop_html_id.asp 28 | -------------------------------------------------------------------------------- /exercises/09-Render-on-Click/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=7acz8Pqgr-0" 3 | --- 4 | 5 | 6 | # `09` Render on Click 7 | 8 | Las interacciones del usuario normalmente requieren cambios en el DOM. Para ello usamos: **eventos**. 9 | 10 | ## 📝 Instrucciones: 11 | 12 | 1. Usando la función `createElement`, crea un contenedor `
` con fondo (`background`) amarillo y un "Hello World" como `innerHTML`. 13 | 14 | 2. Luego agrega ese `` en el `` del sitio web cuando el usuario haga clic en el `#superDuperButton`. 15 | 16 | ## 💻 Resultado Esperado: 17 | 18 |  19 | 20 | ## 💡 Pistas: 21 | 22 | + Obtén el botón con la función `getElementById`. 23 | 24 | + Agrega un listener de eventos al `#superDuperButton`. 25 | 26 | + Dentro de esa función de listener, agrega el código necesario para crear el elemento y añádelo al `` como un hijo (`appendChild`). 27 | 28 | ## 🔎 Importante: 29 | 30 | + Si aún no te sientes cómodo con los **eventos**, por favor primero completa estos ejercicios: [https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises) 31 | -------------------------------------------------------------------------------- /exercises/02-Select-DOM-Element/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=Edrf7rGWWlQ" 3 | --- 4 | 5 | 6 | # `02` Select DOM Element 7 | 8 | En este sitio web, tenemos 2 elementos: un `` con el **id** `#theTitle` y un párrafo con el **id** `#theParagraph`. Puedes seleccionar cualquiera de los objetos en el DOM con la función `querySelector`. 9 | 10 | Por ejemplo: si queremos seleccionar el elemento `
`, podemos hacer lo siguiente: 11 | 12 | ```js 13 | let aux = document.querySelector('#theTitle'); 14 | // La variable aux ahora contiene el elemento H1 del DOM dentro. 15 | ``` 16 | 17 | Ahora que tenemos nuestro elemento `h1` guardado en `aux`, podemos acceder a cualquiera de las propiedades de `h1`, por ejemplo, podemos recuperar la propiedad de estilo `font-size` (tamaño de fuente) de esta manera: 18 | 19 | ```js 20 | let aux = document.querySelector('#theTitle'); 21 | console.log(aux.style.fontSize); 22 | ``` 23 | 24 | Aquí puedes [leer más al respecto](https://www.w3schools.com/jsref/prop_style_fontsize.asp) 25 | 26 | ## 📝 Instrucciones: 27 | 28 | 1. Muestra una alerta con la `id` de `h1`. 29 | 30 | ## 💡 Pista: 31 | 32 | + Aquí puedes leer más sobre la propiedad id de cualquier elemento DOM: http://www.w3schools.com/jsref/prop_html_id.asp 33 | -------------------------------------------------------------------------------- /exercises/08.1-Remove-DOM-Element/tests.js: -------------------------------------------------------------------------------- 1 | jest.dontMock('fs'); 2 | const fs = require('fs'); 3 | const path = require('path'); 4 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); 5 | const js = fs.readFileSync(path.resolve(__dirname, './index.js'), 'utf8'); 6 | const css = fs.readFileSync(path.resolve(__dirname, './styles.css'), 'utf8'); 7 | document.documentElement.innerHTML = html.toString(); 8 | 9 | let _document = document.cloneNode(true); 10 | document.querySelector = jest.fn((selector) => { 11 | return _document.querySelector(selector); 12 | }); 13 | 14 | let li = _document.querySelector("ul li:nth-child(2)") 15 | let _li = li.cloneNode(true); 16 | 17 | li.parentNode.removeChild = jest.fn((elm) => null); 18 | 19 | const file = require("./index.js"); 20 | 21 | test(`Please use the function querySelector to find the #secondElement`, function () { 22 | //then I import the index.js (which should have the alert() call inside) 23 | expect(document.querySelector).toHaveBeenCalledWith("#secondElement"); 24 | }); 25 | 26 | test(`Use the function removeChild and pass the second
- element to it`, function () { 27 | 28 | //then I import the index.js (which should have the alert() call inside) 29 | expect(li.parentNode.removeChild).toHaveBeenCalledWith(li); 30 | }); 31 | 32 | -------------------------------------------------------------------------------- /exercises/05-Create-DOM-Element-First/README.md: -------------------------------------------------------------------------------- 1 | # `05` Create DOM Element (1) 2 | 3 | It is possible to create a new DOM element from JavaScript with the function `createElement()`. 4 | 5 | ```js 6 | let elem = document.createElement("h1"); 7 | ``` 8 | 9 | After you create any element, you have to add it to the website's DOM if you want to display it inside the website. To add the element to the DOM we use the function `appendChild()`. 10 | 11 | ```js 12 | let elem = document.createElement("h1"); 13 | elem.innerHTML = "Hello World"; 14 | document.body.appendChild(elem); 15 | ``` 16 | 17 | ## 📝 Instructions: 18 | 19 | 1. Using the `createElement()` function, create a paragraph (`p`) element with `yellow` background, set the `innerHTML` to 'Hello World', and finally append it in the document. 20 | 21 | ## 💻 Expected output: 22 | 23 | + At the end, your website should look like this: 24 | 25 |  26 | 27 | ## 💡 Hints: 28 | 29 | + Create a `p` element. 30 | 31 | + Set the `innerHTML`. 32 | 33 | + Remember to set the `yellow` style. 34 | 35 | + `appendChild()` to the document. 36 | 37 | ## 🔎 Important: 38 | 39 | + The `innerHTML` property of any DOM element is used to set the HTML content that is going to be set inside of that HTML TAG. Don't worry, it's not that complicated! 40 | -------------------------------------------------------------------------------- /exercises/08.2-Remove-DOM-Element/README.md: -------------------------------------------------------------------------------- 1 | # `08.2` Remove DOM Element 2 | 3 | It is possible to retrieve all the children of a DOM element by using the `childNodes` property of that element. For example: 4 | 5 | ```js 6 | let list = document.querySelector("#myList"); 7 | let childs = list.childNodes; 8 | ``` 9 | 10 |  11 | 12 | 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.
13 |
14 | ## 📝 Instructions:
15 |
16 | 1. With the above knowledge 'in hand' and using the `childNodes` property, delete the second `
- ` from the `#parentLi` list. 17 | 18 | ## 💡 Hints: 19 | 20 | + Judging by the output of `childNodes`, you have to use the appropriate index of that array to remove the second `
- ` element from the DOM. 21 | 22 | ## 🔎 Important: 23 | 24 | + 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 25 | 26 | + Now repeat the exercise by replacing `childNodes` with `children` - `console.log()` it, observe the result and remove the second `
- `. What do you notice? 27 | -------------------------------------------------------------------------------- /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | 2 | // For format details, see https://aka.ms/devcontainer.json. For config options, see the 3 | // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node 4 | { 5 | "name": "Node.js", 6 | // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile 7 | "image": "mcr.microsoft.com/devcontainers/javascript-node:0-16", 8 | "customizations": { 9 | "vscode": { 10 | "settings": { 11 | "editor.defaultFormatter": "esbenp.prettier-vscode", 12 | "workbench.editorAssociations": { 13 | "*.md": "vscode.markdown.preview.editor" 14 | } 15 | }, 16 | "extensions": ["learn-pack.learnpack-vscode"] 17 | } 18 | }, 19 | 20 | // Features to add to the dev container. More info: https://containers.dev/features. 21 | // "features": {}, 22 | 23 | // Use 'forwardPorts' to make a list of ports inside the container available locally. 24 | // "forwardPorts": [], 25 | 26 | "onCreateCommand": "npm i jest@29.7.0 -g && npm i jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@5.0.29 -g && learnpack plugins:install @learnpack/dom@1.1.7" 27 | 28 | // Use 'postCreateCommand' to run commands after the container is created. 29 | // "postCreateCommand": "yarn install", 30 | 31 | // Configure tool-specific properties. 32 | // "customizations": {}, 33 | 34 | // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. 35 | // "remoteUser": "root" 36 | } 37 | -------------------------------------------------------------------------------- /exercises/05-Create-DOM-Element-First/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=RTeT-w81vlc" 3 | --- 4 | 5 | 6 | # `05` Create DOM Element (1) 7 | 8 | Es posible crear un nuevo elemento del DOM desde JavaScript con la función `createElement()`. 9 | 10 | ```js 11 | let elem = document.createElement("h1"); 12 | ``` 13 | 14 | Después de crear cualquier elemento, debes agregarlo al DOM del sitio web si deseas mostrarlo dentro del sitio web. Para agregar el elemento al DOM usamos la función `appendChild()`. 15 | 16 | ```js 17 | let elem = document.createElement("h1"); 18 | elem.innerHTML = "Hello World"; 19 | document.body.appendChild(elem); 20 | ``` 21 | 22 | ## 📝 Instrucciones: 23 | 24 | 1. Usando la función `createElement()`, crea un elemento párrafo (`p`) con fondo (background) amarillo (`yellow`), establece el `innerHTML` como 'Hello World' y finalmente agregalo al documento (`appendChild()`). 25 | 26 | ## 💻 Resultado esperado: 27 | 28 | + Al final tu website debería verse así: 29 | 30 |  31 | 32 | ## 💡 Pistas: 33 | 34 | + Crea un elemento `p`. 35 | 36 | + Establece el `innerHTML`. 37 | 38 | + Recuerda configurar el estilo amarillo (`yellow`). 39 | 40 | + Agrega el elemento al documento utilizando la función `appendChild()`. 41 | 42 | ## 🔎 Importante: 43 | 44 | + La propiedad `innerHTML` de cualquier elemento DOM se usa para establecer el contenido HTML que se establecerá dentro de esa etiqueta HTML ¡No te preocupes, no es tan complicado! 45 | -------------------------------------------------------------------------------- /exercises/08.2-Remove-DOM-Element/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=w2WfYQ8TYUo" 3 | --- 4 | 5 | 6 | # `08.2` Remove DOM element 7 | 8 | Es posible recuperar todos los elementos hijos de un elemento del DOM, para eso debes usar la propiedad `childNodes` del elemento. Por ejemplo: 9 | 10 | ```js 11 | let list = document.querySelector("#myList"); 12 | let childs = list.childNodes; 13 | ``` 14 | 15 |  16 | 17 | 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 `
- ` de la lista `#parentLi`. 22 | 23 | ## 💡 Pistas: 24 | 25 | + `childNodes` devuelve un array de `
- `, puedes acceder al segundo elemento de ese array con el index y eliminarlo del DOM. 26 | 27 | ## 🔎 Importante: 28 | 29 | + 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 30 | 31 | + 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?
32 |
--------------------------------------------------------------------------------
/exercises/11-Dynamic-HTML-String/README.md:
--------------------------------------------------------------------------------
1 | # `11` Dynamic HTML String
2 |
3 | One of the cool things about JavaScript, is that it lets you create dynamic HTML strings during runtime, which means that you can create HTML automatically while you sleep! Yes! Bear with me, and you will understand how...
4 |
5 | Please take a look at the following string:
6 |
7 | ```js
8 | let myString = "
Hello!
My friend"; 9 | ``` 10 | As humans, we know that this string is formatted like HTML because it has a `` and a `` tag inside. But JavaScript doesn't know that, JavaScript only understands a string as a series of characters, it does not matter if the characters are set in a way that looks like HTML. 11 | 12 | What if you write that string into an HTML document during runtime? The browser will interpret that string as HTML (it's what browsers do), and it will render it as HTML, removing the tags and applying their respective format into the remaining text. 13 | 14 | Here is the code you need to print any string into the HTML document: 15 | 16 | ```js 17 | let myString = "
Hello!
My friend"; 18 | document.write(myString); 19 | ``` 20 | 21 | ## 📝 Instructions: 22 | 23 | 1. Using the `getFullYear()` function from the `Date()` object, change the string content of the variable `myString` to make it print the current date's year into the HTML. 24 | 25 | ## 💻 Expected result: 26 | 27 |  28 | 29 | ## 💡 Hint: 30 | 31 | + Please print the current year using the date object; don't set the string to a particular year, append the current year to the end of it. 32 | -------------------------------------------------------------------------------- /exercises/10-Add-li-on-Click/tests.js: -------------------------------------------------------------------------------- 1 | jest.dontMock('fs'); 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | const { 6 | queryByText, 7 | // Tip: all queries are also exposed on an object 8 | // called "queries" which you could import here as well 9 | fireEvent, 10 | waitFor, 11 | } = require('@testing-library/dom') 12 | 13 | const css = fs.readFileSync(path.resolve(__dirname, './styles.css'), 'utf8'); 14 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); 15 | 16 | document.documentElement.innerHTML = html.toString(); 17 | 18 | let _document = document.cloneNode(true); 19 | 20 | document.createElement = jest.fn((selector) => { 21 | return _document.createElement(selector); 22 | }); 23 | 24 | require(path.resolve(__dirname, './index.js')) 25 | 26 | test('The
- ` en este ejercicio.
18 |
19 | ## 📝 Instrucciones:
20 |
21 | 1. Con la información que acabamos de leer, usando la propiedad `childNodes`, elimina el segundo `
- ` en el que está incluido el ícono: https://stackoverflow.com/questions/68200378/how-to-remove-a-list-item-using-onclick 21 | 22 | + No tienes que editar nada del HTML ni del CSS, ¡solo el JavaScript! 23 | -------------------------------------------------------------------------------- /exercises/02-Select-DOM-Element/README.md: -------------------------------------------------------------------------------- 1 | # `02` Select DOM Element 2 | 3 | In this website, we have 2 elements: one `
- items' , function () {
11 | const file = require("./index.js");
12 | let lis = document.querySelectorAll("ul > li");
13 | expect(lis.length).toBe(3);
14 | });
15 |
16 | it('the html code should contain a `) > -1).toBeTruthy();
20 |
21 | //or use query selector to compare hoy mane scriptags do we have
22 | const scripts = document.querySelectorAll("script");
23 | expect(scripts.length).toBe(1);
24 | });
25 |
--------------------------------------------------------------------------------
/exercises/09-Render-on-Click/README.md:
--------------------------------------------------------------------------------
1 | # `09` Render on Click
2 |
3 | User interactions normally require changes in the DOM. For that, we use: **events**.
4 |
5 | ## 📝 Instructions:
6 |
7 | 1. Using the `createElement` function, create a `
` with the `id='myDiv'`
4 |
5 | Try this:
6 |
7 | + Using JavaScript, please change the background of that `div` to `yellow`.
8 |
9 | + You can set any CSS style to any DOM element using the `element.style` property.
10 |
11 | For example, to change the background of an element, we need to set the `element.style.background` property to the color we want.
12 |
13 | ```js
14 | // 1. Query for the element
15 | let aux = document.querySelector('#anyElement');
16 |
17 | // 2. Set the background
18 | aux.style.background = "blue";
19 | ```
20 |
21 | Here you can read about [the style DOM object](http://www.w3schools.com/jsref/dom_obj_style.asp)
22 |
23 | ## 📝 Instructions:
24 |
25 | 1. The background color of `myDiv` is green by default. Change the `background` color to `yellow`.
26 |
--------------------------------------------------------------------------------
/exercises/07-Create-DOM-list-of-li/README.es.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=bw-PknOZ_TI"
3 | ---
4 |
5 |
6 | # `07` Create DOM list of li
7 |
8 | Una excelente manera de crear estructuras HTML para tu sitio web es concatenar varios strings de HTML en un solo string de HTML más grande, y luego, agregar ese string al `innerHTML` de cualquier elemento que ya sea parte del HTML. Por ejemplo:
9 |
10 | ```js
11 | let htmlString = '` al `` del sitio web, podemos hacer:
11 |
12 | ```js
13 | document.body.innerHTML = "
' + 'Hello World' + '
';
12 | ```
13 |
14 | ## 📝 Instrucciones:
15 |
16 | 1. Establece la variable `listString` con el valor necesario para que el siguiente código HTML se imprima en el `body` usando innerHTML:
17 |
18 | ```html
19 | -
20 |