diff --git a/ejercicios-clase-8.js b/ejercicios-clase-8.js index af39c43..f0c3315 100644 --- a/ejercicios-clase-8.js +++ b/ejercicios-clase-8.js @@ -1 +1,90 @@ // Vincular este archivo al archivo index.html, y resolver aquí los ejercicios. + +// Ejercicio 1 +const changeText = (str) => { + const h1 = document.querySelector("h1"); + h1.textContent = str; +} + +// Ejercicio 2 +const addClass = (className) => { + const itemLista = document.querySelectorAll("li"); + itemLista.forEach((item) => { + item.classList.add(className); + }); +} + +// Ejercicio 3 +const agregarItem = (text) => { + const list = document.querySelector("#lista-inicial"); + const newLi = document.createElement("li"); + newLi.textContent = text; + list.appendChild(newLi); +} + +// Ejercicio 4 +const parrafos = document.querySelectorAll("#parrafos p"); + +parrafos.forEach((p) => { + if (p.textContent.toLowerCase().includes("importante")){ + p.classList.add("destacado"); + } +}); + +// Ejercicio 5 +const agregarSec = () => { + const div = document.createElement("div"); + const body = document.querySelector("body"); + body.appendChild(div); + + const h2 = document.createElement("h2"); + h2.textContent = "Comidas tipicas del litoral"; + div.appendChild(h2); + + const parrafo = document.createElement("p"); + parrafo.textContent = "El litoral tiene una gran variedad de Exquisiteses aqui les presentamos algunas de ellas"; + div.appendChild(parrafo); + + const ul = document.createElement("ul"); + const comidas = ["Chipa","Sopa paraguaya","Pacu","Surubi","Mbeju"]; + comidas.forEach((comida) => { + const li = document.createElement("li"); + li.textContent = comida; + ul.appendChild(li); + }); + + div.appendChild(ul); +} + +// Ejercicio 6 +const limpiarList = (id) => { + const limpiar = document.getElementById(id); + while(limpiar.firstChild){ + limpiar.removeChild(limpiar.firstChild); + } +} + +// Ejercicio 7 +const cambiarImg = () => { + const img = document.querySelector("img"); + img.src = "foto2.jpg"; + img.alt = "Locro"; +} + +// Ejercicio 8 +const construirlist = (array) => { + const div = document.createElement("div"); + div.classList.add("grupo-comidas"); + const h2 = document.createElement("h2"); + h2.textContent = array[0]; + const ul = document.createElement("ul"); + for (let i = 1; i < array.length; i++){ + const li = document.createElement("li"); + li.textContent = array[i]; + ul.appendChild(li); + }; + div.appendChild(ul); + return div; +} + + diff --git a/estilo.css b/estilo.css index fcb26fc..e55df68 100644 --- a/estilo.css +++ b/estilo.css @@ -101,6 +101,14 @@ h1 { font-weight: bold; } +/* Clase item-lista */ +.item-lista { + background: #fff4d6; + border-color: #f4b400; + color: #7a5200; + font-weight: bold; +} + /* ========================= IMAGEN ========================= */ diff --git a/index.html b/index.html index 0c393ac..ebffcd8 100644 --- a/index.html +++ b/index.html @@ -32,4 +32,5 @@
Este es otro párrafo del montón.