Ejercicio 3

ejercicios-clase-8.js

@@ -1 +1,60 @@
 // Vincular este archivo al archivo index.html, y resolver aquí los ejercicios.
+
+// Ejercicio 1 
+/*
+
+Crear una función que seleccione el primer <h1> 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"); 
+
+}
+
+// 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");
+    }
+}
+
+// Ejercicio 3
+
+/*
+Crear una función agregarItem que reciba un texto como parámetro, 
+cree un nuevo <li> 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 
+
+/* 
+

estilo.css

@@ -176,3 +176,9 @@ h1 {
         padding: 20px;
     }
 }
+
+/* Agrego un estilo para que se pueda ver el Ejercicio 2 */
+
+.item-lista {
+    color: red;
+}

index.html

@@ -31,5 +31,6 @@
             <p>¿Y este párrafo? ¿Será importante?</p>
             <p>Este es otro párrafo del montón.</p>
         </div>
+        <script src="ejercicios-clase-8.js"></script>
     </body>
 </html>