Ejercicio 8

ejercicios-clase-8.js

@@ -1 +1,85 @@
 // Vincular este archivo al archivo index.html, y resolver aquí los ejercicios.
+//Ejercicio 1
+function cambiarTitulo() {
+    const titulo = document.querySelector("h1");
+
+    titulo.textContent = "Nuevo título de la página";
+}
+
+//Ejercicio 2
+
+function agregarClaseLista() {
+    const items = document.querySelectorAll("li");
+
+    for (const item of items) {
+        item.classList.add("item-lista");
+    }
+}
+
+//Ejercicio 3
+function agregarItem(texto) {
+    const lista = document.querySelector("#lista-inicial");
+
+    const nuevoItem = document.createElement("li");
+
+    nuevoItem.textContent = texto;
+
+    lista.appendChild(nuevoItem);
+}
+
+//Ejercicio 4
+function destacarParrafos() {
+    const parrafos = document.querySelectorAll("#parrafos p");
+
+    for (const parrafo of parrafos) {
+        if (parrafo.textContent.includes("importante")) {
+            parrafo.classList.add("destacado");
+        }
+    }
+}
+
+//Ejercicio 5
+function agregarComidasLitoral() {
+    const div = document.createElement("div");
+
+    const titulo = document.createElement("h2");
+    titulo.textContent = "Comidas típicas del litoral";
+
+    const parrafo = document.createElement("p");
+    parrafo.textContent = "Algunas comidas tradicionales de la región.";
+
+    const lista = document.createElement("ul");
+
+    const comidas = ["Chipá", "Pacú", "Mbejú"];
+
+    for (const comida of comidas) {
+        const item = document.createElement("li");
+
+        item.textContent = comida;
+
+        lista.appendChild(item);
+    }
+
+    div.appendChild(titulo);
+    div.appendChild(parrafo);
+    div.appendChild(lista);
+
+    document.body.appendChild(div);
+}
+
+//Ejercicio 6
+function limpiarLista(idLista) {
+    const items = document.querySelectorAll(`#${idLista} li`);
+
+    for (const item of items) {
+        item.remove();
+    }
+}
+
+//Ejercicio 7
+function cambiarImagen() {
+    const imagen = document.querySelector("#foto");
+
+    imagen.src = "foto2.jpg";
+    imagen.alt = "Locro";
+}

estilo.css

@@ -176,3 +176,23 @@ h1 {
         padding: 20px;
     }
 }
+
+/* Se usa para el ejercicio 2*/
+.item-lista {
+    color: green;
+    font-weight: bold;
+    background-color: lightyellow;
+}
+
+/* Se usa para el ejercicio 4*/
+.destacado {
+    background-color: yellow;
+    font-weight: bold;
+    color: red;
+}
+/* Se usa para el ejercicio 8*/
+.grupo-comidas {
+    background-color: beige;
+    padding: 15px;
+    border: 2px dashed brown;
+}

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>