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 <li> 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.");
+}
+

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;
     }
-}
+}