diff --git a/ejercicios-clase-8.js b/ejercicios-clase-8.js index af39c43..94cf262 100644 --- a/ejercicios-clase-8.js +++ b/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

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
  • 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
  • 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 + 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 ` - Empanadas + Locro

    Este es un párrafo cualquiera.

    @@ -31,5 +31,6 @@

    ¿Y este párrafo? ¿Será importante?

    Este es otro párrafo del montón.

    +