Ejercicio 8

ejercicios-clase-8.js

@@ -1 +1,206 @@
 // 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 
+
+/* 
+Seleccionar todos los párrafos que estén dentro del div con id="parrafos". 
+Si un párrafo contiene la palabra "importante" en su texto, agregarle la clase "destacado".
+
+*/
+
+let parrafos = document.querySelectorAll("#parrafos p");
+
+function addPalabra () {
+
+    for (let parrafo of parrafos) {
+
+        if (parrafo.textContent.includes("importante")) {
+
+            parrafo.classList.add("destacado");
+
+        } 
+    }
+}
+
+// Ejercicio 5
+/*
+Crear una función que agregue un nuevo div a la página, que incluya comidas típicas de la región del litoral. 
+Este div debe incluir un h2, un párrafo introductorio y una lista de comidas típicas. 
+Probarla utilizando las devtools.
+
+* Al ejercicio le agregue que el nuevo div y la nueva lista tengan el mismo estilo que lo otros. 
+*/
+
+function addLitoral() {
+
+    let comidasLitoral = document.createElement("div");
+    comidasLitoral.classList.add("grupo-comidas");
+
+    let titulo = document.createElement("h2");
+    titulo.textContent = "Comidas típicas de la region del litoral";
+
+    let parrafoLitoral = document.createElement("p");
+    parrafoLitoral.textContent = "La región del litoral cuenta con comidas tradicionales muy populares.";
+
+    let lista = document.createElement("ul");
+
+    lista.classList.add("lista-comidas");
+    lista.id = "lista-final";
+
+    let comida1 = document.createElement("li");
+    comida1.textContent = "Chipá";
+
+    let comida2 = document.createElement("li");
+    comida2.textContent = "Pacú asado";
+
+    let comida3 = document.createElement("li");
+    comida3.textContent = "Mbejú";
+
+    lista.appendChild(comida1);
+    lista.appendChild(comida2);
+    lista.appendChild(comida3);
+
+    comidasLitoral.appendChild(titulo);
+    comidasLitoral.appendChild(parrafoLitoral);
+    comidasLitoral.appendChild(lista);
+
+    document.body.appendChild(comidasLitoral);
+}
+
+
+// Ejercicio 6
+
+/*
+
+Crear una función limpiarLista que reciba por parámetro el id de una lista, y que elimine todos los <li> de esa lista. Llamarla sobre la lista del ejercicio 2.
+Pista: querySelectorAll + for...of + remove. 
+Probarla utilizando las devtools, tanto con la lista original de la página como con la lista agregada en el ejercicio anterior.
+
+*/
+
+function limpiarLista(idLista) {
+
+    let items = document.querySelectorAll(`#${idLista} li`);
+
+    for (let item of items) {
+
+        item.remove();
+
+    }
+}
+
+// Ejercicio 7 
+
+/* 
+La página contiene el siguiente HTML:
+   ```html
+   <img id="foto" src="foto1.jpg" alt="Empanadas">
+   ```
+   Escribir el código que cambie el `src` de la imagen a `"foto2.jpg"` y el
+   `alt` a `"Locro"`.
+*/
+
+// Ejercicio 8 
+
+/*
+
+Crear una función `construirLista` que reciba un array de strings y construya dinámicamente y retorne un `div` con que contenga un título y una
+lista `<ul>`, con un `<li>` por cada elemento del array. Agregar esta lista a la página desde las devtools.
+
+   ```js
+   construirLista(["Comidas mendocinas", "Sopaipilla", "Vino tinto"]);
+   // Debe generar y retornar:
+   // <div class="grupo-comidas">
+   //   <h2>Comidas mendocinas</h2>
+   //   <ul>
+   //     <li>Sopaipilla</li>
+   //     <li>Vino tinto</li>
+   //   </ul>
+   // </div>
+   ```
+*/
+
+let comidasMendocinas = ["Sopaipilla", "Vino tinto", "Chivo"];
+
+function construirLista (comidas) {
+
+    let div = document.createElement("div");
+    div.classList.add("grupos-comidas");
+
+    let titulo8 = document.createElement("h2");
+    titulo8.textContent = "Comidas Mendocinas";
+
+    let lista8 = document.createElement("ul");
+    lista8.classList.add("lista-comidas");
+
+
+    for (let comida of comidas) {
+
+        let item = document.createElement("li")
+        
+        item.textContent = comida;
+        lista8.appendChild(item);
+        
+    }
+
+    div.appendChild(titulo8);
+
+    div.appendChild(lista8);
+
+    document.body.appendChild(div);
+
+}

estilo.css

@@ -176,3 +176,20 @@ h1 {
         padding: 20px;
     }
 }
+
+/* Agrego un estilo para que se pueda ver el Ejercicio 2 */
+
+.item-lista {
+    color: red;
+}
+
+h2 {
+    font-size: 2rem;
+    color: #357abd;
+    margin-bottom: 20px;
+    text-align: left;
+    letter-spacing: 1px;
+    text-shadow: 2px 2px 6px rgba(0,0,0,0.15);
+    border-bottom: 3px solid #4a90e2;
+    padding-bottom: 10px;
+}

index.html

@@ -21,7 +21,7 @@
                 <li>Tortas fritas</li>
             </ul>
 
-            <img id="foto" src="foto1.jpg" alt="Empanadas">
+            <img id="foto" src="foto2.jpg" alt="Locro">
         </div>
         <div id="parrafos">
             <p>Este es un párrafo cualquiera.</p>
@@ -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>