72 lines
3.3 KiB
JavaScript
72 lines
3.3 KiB
JavaScript
//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 `<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){
|
|
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") |