ejercicio 8: construir listas dinamicas con createElement

ejercicios-clase-8.js

@@ -1 +1,141 @@
 // Vincular este archivo al archivo index.html, y resolver aquí los ejercicios.
+
+console.log("JS conectado");
+
+// 1
+function cambiarTitulo() {
+  const titulo = document.querySelector("h1");
+
+  titulo.textContent = "Nuevo título desde JavaScript";
+}
+// 2
+
+function destacarComidas() {
+  const comidas = document.querySelectorAll("li");
+
+  for (const comida of comidas) {
+    comida.style.color = "red";
+  }
+}
+// 3
+
+function agregarItem(texto) {
+  const lista = document.querySelector("#lista-inicial");
+
+  const nuevoItem = document.createElement("li");
+
+  nuevoItem.textContent = texto;
+
+  lista.appendChild(nuevoItem);
+}
+// 4
+
+function destacarParrafos() {
+  const parrafos = document.querySelectorAll("#parrafos p");
+
+  for (const parrafo of parrafos) {
+    if (parrafo.textContent.includes("importante")) {
+      parrafo.classList.add("destacado");
+    }
+  }
+}
+// 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 del litoral argentino.";
+
+  const lista = document.createElement("ul");
+
+  const comidas = ["Chipá", "Surubí", "Pacú"];
+
+  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 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 del litoral argentino.";
+
+  const lista = document.createElement("ul");
+
+  const comidas = ["Chipá", "Surubí", "Pacú"];
+
+  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);
+}
+// 6
+
+function limpiarLista(idLista) {
+  const items = document.querySelectorAll(`#${idLista} li`);
+
+  for (const item of items) {
+    item.remove();
+  }
+}
+// 7
+
+function cambiarImagen() {
+  const imagen = document.querySelector("#foto");
+
+  imagen.setAttribute("src", "foto2.jpg");
+
+  imagen.setAttribute("alt", "Locro");
+}
+// 8
+
+function construirLista(datos) {
+  const div = document.createElement("div");
+
+  div.classList.add("grupo-comidas");
+
+  const titulo = document.createElement("h2");
+  titulo.textContent = datos[0];
+
+  const lista = document.createElement("ul");
+
+  for (let i = 1; i < datos.length; i++) {
+    const item = document.createElement("li");
+
+    item.textContent = datos[i];
+
+    lista.appendChild(item);
+  }
+
+  div.appendChild(titulo);
+  div.appendChild(lista);
+
+  return div;
+}

estilo.css

@@ -8,6 +8,8 @@
 * {
     box-sizing: border-box;
 }
+.item-lista { 
+    color:red;}
 
 body {
     margin: 0;

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>