From 442d78477d456f5538b19647b668d9e6331772c5 Mon Sep 17 00:00:00 2001 From: Bruno Dalessandro Date: Thu, 21 May 2026 11:36:37 -0300 Subject: [PATCH 1/8] Ejercicio 1 --- ejercicios-clase-8.js | 17 +++++++++++++++++ index.html | 1 + 2 files changed, 18 insertions(+) diff --git a/ejercicios-clase-8.js b/ejercicios-clase-8.js index af39c43..68a1b67 100644 --- a/ejercicios-clase-8.js +++ b/ejercicios-clase-8.js @@ -1 +1,18 @@ // Vincular este archivo al archivo index.html, y resolver aquí los ejercicios. + +// Ejercicio 1 +/* + +Crear una función que seleccione el primer

de la página y cambie su texto a otro mensaje. +Verificar el resultado en el navegador invocando a la función desde las devtools. + +*/ + +function cambiarTitulo () { + + let titulo = document.querySelector("h1"); + + titulo.textContent = ("Las mejores comidas de Argentina"); + +} + diff --git a/index.html b/index.html index 0c393ac..64e23af 100644 --- a/index.html +++ b/index.html @@ -31,5 +31,6 @@

¿Y este párrafo? ¿Será importante?

Este es otro párrafo del montón.

+ -- 2.49.1 From 96e74f9cf1e3782f227855572f32714560e2570d Mon Sep 17 00:00:00 2001 From: Bruno Dalessandro Date: Thu, 21 May 2026 12:05:10 -0300 Subject: [PATCH 2/8] Ejercicio 2 --- ejercicios-clase-8.js | 18 ++++++++++++++++++ estilo.css | 6 ++++++ 2 files changed, 24 insertions(+) diff --git a/ejercicios-clase-8.js b/ejercicios-clase-8.js index 68a1b67..e01d440 100644 --- a/ejercicios-clase-8.js +++ b/ejercicios-clase-8.js @@ -16,3 +16,21 @@ function cambiarTitulo () { } +// Ejercicio 2 + +/* +Crear otra función que, usando querySelectorAll y for...of, agregue la clase item-lista a cada uno de los items de la lista. +Verificar el resultado en el navegador invocando a la función desde las devtools. +Debería observarse un cambio de estilo, intenten explicarse por qué sucede esto. + +*/ + +function agregarClaseLista () { + + let items = document.querySelectorAll("li"); + + for (let item of items) { + item.classList.add("item-lista"); + } +} + diff --git a/estilo.css b/estilo.css index fcb26fc..f8bd053 100644 --- a/estilo.css +++ b/estilo.css @@ -176,3 +176,9 @@ h1 { padding: 20px; } } + +/* Agrego un estilo para que se pueda ver el Ejercicio 2 */ + +.item-lista { + color: red; +} \ No newline at end of file -- 2.49.1 From 1e36efb586bc3f3a67218166c55e18d8d6486d1a Mon Sep 17 00:00:00 2001 From: Bruno Dalessandro Date: Thu, 21 May 2026 12:16:21 -0300 Subject: [PATCH 3/8] Ejercicio 3 --- ejercicios-clase-8.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/ejercicios-clase-8.js b/ejercicios-clase-8.js index e01d440..70de1b9 100644 --- a/ejercicios-clase-8.js +++ b/ejercicios-clase-8.js @@ -34,3 +34,27 @@ function agregarClaseLista () { } } +// Ejercicio 3 + +/* +Crear una función agregarItem que reciba un texto como parámetro, +cree un nuevo
  • con ese texto y lo agregue al final de la lista con id="lista-inicial". +Llamarla tres veces con textos distintos desde las devtools. + +*/ + +function agregarItem(texto) { + + let lista = document.querySelector("#lista-inicial"); + + let nuevoLi = document.createElement("li"); + + nuevoLi.textContent = texto; + + lista.appendChild(nuevoLi); +} + +// Ejercicio 4 + +/* + -- 2.49.1 From 1f0fea8baa1e0555a30bb26668d13980b63b51a8 Mon Sep 17 00:00:00 2001 From: Bruno Dalessandro Date: Thu, 21 May 2026 22:23:10 -0300 Subject: [PATCH 4/8] Ejercicio 4 --- ejercicios-clase-8.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/ejercicios-clase-8.js b/ejercicios-clase-8.js index 70de1b9..570c080 100644 --- a/ejercicios-clase-8.js +++ b/ejercicios-clase-8.js @@ -57,4 +57,21 @@ function agregarItem(texto) { // Ejercicio 4 /* +Seleccionar todos los párrafos que estén dentro del div con id="parrafos". +Si un párrafo contiene la palabra "importante" en su texto, agregarle la clase "destacado". +*/ + +let parrafos = document.querySelectorAll("#parrafos p"); + +function addPalabra () { + + for (let parrafo of parrafos) { + + if (parrafo.textContent.includes("importante")) { + + parrafo.classList.add("destacado"); + + } + } +} -- 2.49.1 From 7fdf5924dcba3dacdd34e540772bbd48d02802f5 Mon Sep 17 00:00:00 2001 From: Bruno Dalessandro Date: Thu, 21 May 2026 22:45:32 -0300 Subject: [PATCH 5/8] Ejercicio 5 --- ejercicios-clase-8.js | 44 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/ejercicios-clase-8.js b/ejercicios-clase-8.js index 570c080..6cf9039 100644 --- a/ejercicios-clase-8.js +++ b/ejercicios-clase-8.js @@ -75,3 +75,47 @@ function addPalabra () { } } } + +// Ejercicio 5 +/* +Crear una función que agregue un nuevo div a la página, que incluya comidas típicas de la región del litoral. +Este div debe incluir un h2, un párrafo introductorio y una lista de comidas típicas. +Probarla utilizando las devtools. + +* Al ejercicio le agregue que el nuevo div y la nueva lista tengan el mismo estilo que lo otros. +*/ + +function addLitoral() { + + let comidasLitoral = document.createElement("div"); + comidasLitoral.classList.add("grupo-comidas"); + + let titulo = document.createElement("h2"); + titulo.textContent = "Comidas típicas de la region del litoral"; + + let parrafoLitoral = document.createElement("p"); + parrafoLitoral.textContent = "La región del litoral cuenta con comidas tradicionales muy populares."; + + let lista = document.createElement("ul"); + + lista.classList.add("lista-comidas"); + + let comida1 = document.createElement("li"); + comida1.textContent = "Chipá"; + + let comida2 = document.createElement("li"); + comida2.textContent = "Pacú asado"; + + let comida3 = document.createElement("li"); + comida3.textContent = "Mbejú"; + + lista.appendChild(comida1); + lista.appendChild(comida2); + lista.appendChild(comida3); + + comidasLitoral.appendChild(titulo); + comidasLitoral.appendChild(parrafoLitoral); + comidasLitoral.appendChild(lista); + + document.body.appendChild(comidasLitoral); +} \ No newline at end of file -- 2.49.1 From f379ae88032a09c88b76a3082f529b3cb16b1e74 Mon Sep 17 00:00:00 2001 From: Bruno Dalessandro Date: Thu, 21 May 2026 23:01:59 -0300 Subject: [PATCH 6/8] Ejercicio 6 --- ejercicios-clase-8.js | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/ejercicios-clase-8.js b/ejercicios-clase-8.js index 6cf9039..6511f9c 100644 --- a/ejercicios-clase-8.js +++ b/ejercicios-clase-8.js @@ -99,6 +99,7 @@ function addLitoral() { let lista = document.createElement("ul"); lista.classList.add("lista-comidas"); + lista.id = "lista-final"; let comida1 = document.createElement("li"); comida1.textContent = "Chipá"; @@ -118,4 +119,31 @@ function addLitoral() { comidasLitoral.appendChild(lista); document.body.appendChild(comidasLitoral); -} \ No newline at end of file +} + + +// Ejercicio 6 + +/* + +Crear una función limpiarLista que reciba por parámetro el id de una lista, y que elimine todos los
  • de esa lista. Llamarla sobre la lista del ejercicio 2. +Pista: querySelectorAll + for...of + remove. +Probarla utilizando las devtools, tanto con la lista original de la página como con la lista agregada en el ejercicio anterior. + +*/ + +function limpiarLista(idLista) { + + let items = document.querySelectorAll(`#${idLista} li`); + + for (let item of items) { + + item.remove(); + + } +} + +// Ejercicio 7 + +/* + -- 2.49.1 From 09649c503dcb8b284dd6790ef34cc01aed0420c4 Mon Sep 17 00:00:00 2001 From: Bruno Dalessandro Date: Thu, 21 May 2026 23:33:21 -0300 Subject: [PATCH 7/8] Ejercicio 7 --- ejercicios-clase-8.js | 26 ++++++++++++++++++++++++++ index.html | 2 +- 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/ejercicios-clase-8.js b/ejercicios-clase-8.js index 6511f9c..d6d0108 100644 --- a/ejercicios-clase-8.js +++ b/ejercicios-clase-8.js @@ -146,4 +146,30 @@ function limpiarLista(idLista) { // Ejercicio 7 /* +La página contiene el siguiente HTML: + ```html + Empanadas + ``` + Escribir el código que cambie el `src` de la imagen a `"foto2.jpg"` y el + `alt` a `"Locro"`. +*/ +// Ejercicio 8 + +/* + +Crear una función `construirLista` que reciba un array de strings y construya dinámicamente y retorne un `div` con que contenga un título y una +lista `
      `, con un `
    • ` por cada elemento del array. Agregar esta lista a la página desde las devtools. + + ```js + construirLista(["Comidas mendocinas", "Sopaipilla", "Vino tinto"]); + // Debe generar y retornar: + //
      + //

      Comidas mendocinas

      + //
        + //
      • Sopaipilla
        • + //
      • Vino tinto
        • + //
      + //
      + ``` +*/ diff --git a/index.html b/index.html index 64e23af..0952ccb 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@
    • Tortas fritas
    - Empanadas + Locro

    Este es un párrafo cualquiera.

    -- 2.49.1 From 3d8c5c3a0b6f4ff7695840109e4dfb061e884fa0 Mon Sep 17 00:00:00 2001 From: Bruno Dalessandro Date: Sat, 23 May 2026 12:28:19 -0300 Subject: [PATCH 8/8] Ejercicio 8 --- ejercicios-clase-8.js | 31 +++++++++++++++++++++++++++++++ estilo.css | 11 +++++++++++ 2 files changed, 42 insertions(+) diff --git a/ejercicios-clase-8.js b/ejercicios-clase-8.js index d6d0108..94cf262 100644 --- a/ejercicios-clase-8.js +++ b/ejercicios-clase-8.js @@ -173,3 +173,34 @@ lista `
      `, con un `
    • ` por cada elemento del array. Agregar esta lista a la //
    ``` */ + +let comidasMendocinas = ["Sopaipilla", "Vino tinto", "Chivo"]; + +function construirLista (comidas) { + + let div = document.createElement("div"); + div.classList.add("grupos-comidas"); + + let titulo8 = document.createElement("h2"); + titulo8.textContent = "Comidas Mendocinas"; + + let lista8 = document.createElement("ul"); + lista8.classList.add("lista-comidas"); + + + for (let comida of comidas) { + + let item = document.createElement("li") + + item.textContent = comida; + lista8.appendChild(item); + + } + + div.appendChild(titulo8); + + div.appendChild(lista8); + + document.body.appendChild(div); + +} \ No newline at end of file diff --git a/estilo.css b/estilo.css index f8bd053..0e993e7 100644 --- a/estilo.css +++ b/estilo.css @@ -181,4 +181,15 @@ h1 { .item-lista { color: red; +} + +h2 { + font-size: 2rem; + color: #357abd; + margin-bottom: 20px; + text-align: left; + letter-spacing: 1px; + text-shadow: 2px 2px 6px rgba(0,0,0,0.15); + border-bottom: 3px solid #4a90e2; + padding-bottom: 10px; } \ No newline at end of file -- 2.49.1