diff --git a/ejercicios-clase-8.js b/ejercicios-clase-8.js index af39c43..aca6cfe 100644 --- a/ejercicios-clase-8.js +++ b/ejercicios-clase-8.js @@ -1 +1,118 @@ -// Vincular este archivo al archivo index.html, y resolver aquí los ejercicios. +//ejercicio1 +let titulo = document.querySelector("h1"); +titulo.textContent = "Comida Rioplatense"; + +//ejercicio2 +function agregarClaseAItems(etiqueta){ //la funcion debe recibir como parametro la etiqueta html a la cual se le quiere agregar la clase +array_li = document.querySelectorAll(etiqueta); //lista con los items que tengan dicha etiqueta +for(let item of array_li){ + item.classList.add(`item-lista`); //agregamos a cada item la clase "item-lista" +}}; + +agregarClaseAItems("li"); //ejecutamos la funcion con la etiqueta HTML como parametro + +//ejercicio3 +function agregarItem(contenido){ + let lista_inicial = document.querySelector("#lista-inicial"); // alojamos la lista en una variable + let item_nuevo = document.createElement("li"); // creamos el item + item_nuevo.textContent = contenido; // le otorgamos el contenido del parametro + lista_inicial.appendChild(item_nuevo); // añadimos el item a la lista +}; + +agregarItem("Guiso de lentejas"); +agregarItem("Milanesa napolitana"); +agregarItem("Medialunas"); + +//ejercicio4 +let parrafosImportantes = document.querySelectorAll("#parrafos > p"); +for (let parrafo of parrafosImportantes){ + if (parrafo.textContent.includes("importante")){ + parrafo.classList.add("destacado") + } +}; + +//ejercicio5 +let divComidas = document.querySelector(".grupo-comidas"); //almacenamos en esta variable el div padre al que se anexara todo lo creado a continuacion + +let divLitoral = document.createElement("div"); //creamos las etiquetas html para "div" , "ul" , "h2" , "li" y "p" +let nuevoSubtitulo = document.createElement("h2"); +let parrafoIntroductorio = document.createElement("p") +let lista_litoral = document.createElement("ul"); +let itemUno = document.createElement("li") +let itemDos = document.createElement("li") +let itemTres = document.createElement("li") + +nuevoSubtitulo.textContent = "comidas del litoral"; // llenamos de texto las etiquetas que van a mostrarlo mediante textcontent +parrafoIntroductorio.textContent = "La region litoral comprende 6 provincias del centro y noreste argentino, donde gastronomicamente destaca mucho la presencia del pescado de rio y se incorpora a las demas comidas nacionales" +itemUno.textContent = "Pescados a la parrilla"; +itemDos.textContent = "Empanadas de pescado"; +itemTres.textContent = "Milanesa de merluza"; + +divComidas.appendChild(divLitoral); // anexamos los elementos creados previamente a sus respectivas etiquetas "padre" +divLitoral.appendChild(nuevoSubtitulo); +divLitoral.appendChild(parrafoIntroductorio); +divLitoral.appendChild(lista_litoral); +lista_litoral.appendChild(itemUno); +lista_litoral.appendChild(itemDos); +lista_litoral.appendChild(itemTres); + +//6. Crear una función `limpiarLista` que reciba por parámetro el id de una lista, +// y que elimine todos los `
  • ` 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){ + itemsLista = document.querySelectorAll(`#${idlista} > li` ); // hacemos un array con todos los "li" dentro de la lista con el id del parametro + for(li of itemsLista){ // iteramos dentro de la lista y aplicamos el li.remove() a cada "li" + li.remove(); + } +} + +limpiarLista("lista-inicial") + +// 7.Escribir el código que cambie el `src` de la imagen a `"foto2.jpg"` y el `alt` a `"Locro"`. + +let fotoEmpanadasUno = document.querySelector("#foto"); +fotoEmpanadasUno.setAttribute("src", "foto2.jpg"); +fotoEmpanadasUno.setAttribute("alt", "Locro"); + + +// 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 `