Ejercicio 8

ejercicios-clase-8.js

@@ -146,4 +146,61 @@ function limpiarLista(idLista) {
 // 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

@@ -181,4 +181,15 @@ h1 {
 
 .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>