diff --git a/ejercicios-clase-8.js b/ejercicios-clase-8.js
index 4c405a1..1688335 100644
--- a/ejercicios-clase-8.js
+++ b/ejercicios-clase-8.js
@@ -16,3 +16,16 @@ function cambiarPrimerTitulo() {
//Verificar llamando a la funcion en consola
//cambiarPrimerTitulo()
+
+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.");
+}
+
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