diff --git a/ejercicios-clase-8.js b/ejercicios-clase-8.js
index af39c43..aef9cc8 100644
--- a/ejercicios-clase-8.js
+++ b/ejercicios-clase-8.js
@@ -1 +1,189 @@
// Vincular este archivo al archivo index.html, y resolver aquí los ejercicios.
+
+//EJERCICIO 1
+
+function cambiarPrimerTitulo() {
+ // 1. Selecciono el primer h1 de la página usando querySelector
+ const titulo = document.querySelector("h1");
+
+ // 2. Verifico que el elemento exista para evitar errores
+ if (titulo) {
+ // 3. Cambio su contenido de texto
+ titulo.textContent = "¡Texto cambiado con JavaScript!";
+ console.log("El título ha sido modificado exitosamente.");
+ } else {
+ console.log("No se encontró ningún elemento en la página.");
+ }
+}
+
+//Verificar llamando a la funcion en consola
+//cambiarPrimerTitulo()
+
+//EJERCICIO 2
+
+function aplicarEstiloALista() {
+ // 1. Selecciono todos los elementos
de la página
+ const items = document.querySelectorAll("li");
+
+ // 2. Recorro la lista de elementos usando for...of
+ for (const item of items) {
+ // 3. Agrego la clase "item-lista" a cada elemento
+ item.classList.add("item-lista");
+ }
+ console.log("Clase agregada a todos los elementos de la lista.");
+}
+
+//Verificar llamando a la funcion en consola
+//aplicarEstiloALista()
+
+
+//EJERCICIO 3
+
+function agregarItem(texto) {
+ // 1. Selecciono la lista usando su id (#lista-inicial)
+ const lista = document.querySelector("#lista-inicial");
+
+ // 2. Creo el nuevo elemento en memoria
+ const nuevoLi = document.createElement("li");
+
+ // 3. Le asigno el texto recibido por parámetro
+ nuevoLi.textContent = texto;
+
+ // 4. Verifico si la lista existe y lo agrego al final
+ if (lista) {
+ lista.appendChild(nuevoLi);
+ } else {
+ console.log("Error: No se encontró la lista con id='lista-inicial'");
+ }
+}
+
+//Verificar llamando a la funcion en consola
+//agregarItem("Chinchulines")
+
+//EJERCICIO 4
+
+// 1. Selecciono todos los párrafos que son descendientes del div con id "parrafos"
+const parrafos = document.querySelectorAll("#parrafos p");
+
+// 2. Recorro la lista de elementos
+for (const p of parrafos) {
+ // 3. Verifico si el texto del párrafo incluye la palabra "importante"
+ // Usamos el método .includes() de los strings de JavaScript
+ if (p.textContent.includes("importante")) {
+ // 4. Si la contiene, agregamos la clase "destacado" sin pisar las existentes
+ p.classList.add("destacado");
+ }
+}
+
+//EJERCICIO 5
+
+function agregarSeccionLitoral() {
+ // 1. Creo el contenedor principal
+ const contenedorComidas = document.createElement("div");
+
+ // 2. Creo y configuro el título h2
+ const titulo = document.createElement("h2");
+ titulo.textContent = "Comidas Típicas del Litoral";
+
+ // 3. Creo y configuro el párrafo introductorio
+ const parrafo = document.createElement("p");
+ parrafo.textContent = "La gastronomía del litoral argentino se destaca por sus platos a base de pescados de río y la influencia de la cultura guaraní.";
+
+ // 4. Creo la lista y sus elementos
+ const lista = document.createElement("ul");
+ const platos = ["Surubí a la parrilla", "Pacú frito", "Chipa", "Sopa paraguaya"];
+
+ for (const plato of platos) {
+ const item = document.createElement("li");
+ item.textContent = plato;
+ lista.appendChild(item);
+ }
+
+ // 5. Armo la estructura: meto el h2, el p y la ul dentro del div
+ contenedorComidas.appendChild(titulo);
+ contenedorComidas.appendChild(parrafo);
+ contenedorComidas.appendChild(lista);
+
+ // 6. Finalmente, inserto el div completo al final del body de la página
+ document.body.appendChild(contenedorComidas);
+
+ console.log("Sección del litoral agregada exitosamente.");
+}
+
+//Verificar llamando a la funcion en consola
+//agregarSeccionLitoral()
+
+
+//EJERCICIO 6
+
+function limpiarLista(idDeLista) {
+ // 1. Selecciono todos los que son hijos de la lista con el id pasado por parámetro
+ // Usamos el símbolo # para indicar que buscamos un ID
+ const items = document.querySelectorAll("#" + idDeLista + " li");
+
+ // 2. Recorro la lista de elementos (NodeList) usando for...of
+ for (const item of items) {
+ // 3. Elimino cada elemento del DOM
+ item.remove();
+ }
+ console.log("Todos los items de la lista '" + idDeLista + "' han sido eliminados.");
+}
+
+//Verificar llamando a la funcion en consola
+//limpiarLista("lista-inicial")
+
+
+//EJERCICIO 7
+
+// 1. Selecciono el elemento por su id usando el símbolo #
+const imagen = document.querySelector("#foto");
+
+// 2. Verifico que el elemento exista para evitar errores
+if (imagen) {
+ // 3. Modifico el atributo 'src'
+ imagen.setAttribute("src", "foto2.jpg");
+
+ // 4. Modifico el atributo 'alt'
+ imagen.setAttribute("alt", "Locro");
+
+ console.log("Atributos de la imagen actualizados.");
+}
+
+
+//EJERCICIO 8
+
+function construirLista(elementos) {
+ // Validar que el array contenga elementos
+ if (!elementos || elementos.length === 0) {
+ return document.createElement('div');
+ }
+
+ // Separo el primer elemento para el título y el resto para los ítems
+ const [tituloTexto, ...items] = elementos;
+
+ // Creo el contenedor principal
+ const divContenedor = document.createElement('div');
+ divContenedor.className = 'grupo-comidas';
+
+ // Creo y asigno el título (h2)
+ const h2Titulo = document.createElement('h2');
+ h2Titulo.textContent = tituloTexto;
+ divContenedor.appendChild(h2Titulo);
+
+ // Creo la lista (ul)
+ const ulLista = document.createElement('ul');
+
+ // Recorro los ítems restantes y creo los li
+ items.forEach(textoItem => {
+ const liItem = document.createElement('li');
+ liItem.textContent = textoItem;
+ ulLista.appendChild(liItem);
+ });
+
+ // Agrego la lista al contenedor
+ divContenedor.appendChild(ulLista);
+
+ return divContenedor;
+}
+
+const nuevaListaComida = construirLista(["Carnes", "Churrasco", "Asado con cuero", "Colita de cuadril"]);
\ No newline at end of file
diff --git a/estilo.css b/estilo.css
index fcb26fc..b114495 100644
--- a/estilo.css
+++ b/estilo.css
@@ -41,7 +41,7 @@ h1 {
background: white;
padding: 30px;
border-radius: 18px;
- box-shadow: 0 8px 25px rgba(0,0,0,0.08);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
@@ -93,6 +93,11 @@ h1 {
border-color: #4a90e2;
}
+.item-lista {
+ color: green;
+ font-weight: bold;
+}
+
/* Clase para agregar/quitar desde JS */
.lista-comidas.resaltada li {
background: #fff4d6;
@@ -111,7 +116,7 @@ h1 {
display: block;
margin: 30px auto 0 auto;
border-radius: 16px;
- box-shadow: 0 10px 25px rgba(0,0,0,0.15);
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
transition: all 0.35s ease;
}
@@ -119,7 +124,7 @@ h1 {
#foto.zoom {
transform: scale(1.08) rotate(-1deg);
filter: saturate(1.4);
- box-shadow: 0 18px 40px rgba(0,0,0,0.25);
+ box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}
/* =========================
@@ -175,4 +180,4 @@ h1 {
#parrafos {
padding: 20px;
}
-}
+}
\ No newline at end of file
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.
+