diff --git a/ejercicios-clase-8.js b/ejercicios-clase-8.js index af39c43..1c0320f 100644 --- a/ejercicios-clase-8.js +++ b/ejercicios-clase-8.js @@ -1 +1,99 @@ // Vincular este archivo al archivo index.html, y resolver aquí los ejercicios. +function cambiarTitulo() { + const titulo = document.querySelector("h1"); + titulo.textContent = "Agua"; +} + +function agregarClaseItems() { + const items = document.querySelectorAll("li"); + + for (const item of items) { + item.classList.add("item-lista"); + } +} + +function agregarItem(texto) { + const lista = document.querySelector("#lista-inicial"); + + const nuevaLista = document.createElement("li"); + nuevaLista.textContent = texto; + + lista.appendChild(nuevaLista); +} + +const parrafos = document.querySelectorAll("#parrafos p"); + +for (const p of parrafos) { + + if (p.textContent.includes("importante")) { + p.classList.add("destacado"); + } + +} + +function agregarDiv() { + const nuevoDiv = document.createElement("div"); + + const nuevoh2 = document.createElement("h2"); + nuevoh2.textContent = "Comidas tipicas de la region del litoral"; + + const pintroductorio = document.createElement("p"); + pintroductorio.textContent = "Estas son algunas comidas tradicionales de la región del litoral argentino."; + + const nuevoul = document.createElement("ul"); + + const comida1 = document.createElement("li"); + comida1.textContent = "Chipa"; + + const comida2 = document.createElement("li"); + comida2.textContent = "Pescado"; + + const comida3 = document.createElement("li"); + comida3.textContent = "Sopa paraguaya"; + + nuevoul.appendChild(comida1); + nuevoul.appendChild(comida2); + nuevoul.appendChild(comida3); + + nuevoDiv.appendChild(nuevoh2); + nuevoDiv.appendChild(pintroductorio); + nuevoDiv.appendChild(nuevoul); + + document.body.appendChild(nuevoDiv); +} + +function limpiarLista(idLista) { + const items = document.querySelectorAll(`#${idLista} li`); + + for (const li of items) { + li.remove(); + } + +} + +const foto = document.querySelector("#foto"); + +foto.src = "foto2.jpg"; +foto.alt = "Locro"; + +function construirLista(array) { + + const nuevoDiv2 = document.createElement("div") + nuevoDiv2.classList.add("grupo-comidas"); + + const titulo2 = document.createElement("h2"); + titulo2.textContent = array[0]; + + const ul2 = document.createElement("ul") + + for (let i = 1; i < array.length; i++) { + const li = document.createElement("li"); + li.textContent = array[i]; + ul2.appendChild(li); + } + + nuevoDiv2.appendChild(titulo2); + nuevoDiv2.appendChild(ul2); + + return nuevoDiv2; +} \ No newline at end of file diff --git a/estilo.css b/estilo.css index fcb26fc..35d4dbf 100644 --- a/estilo.css +++ b/estilo.css @@ -101,6 +101,12 @@ h1 { font-weight: bold; } +.item-lista { + color: red; + font-weight: bold; + background-color: yellow; +} + /* ========================= IMAGEN ========================= */ diff --git a/index.html b/index.html index 0c393ac..7eb6259 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,7 @@ comunes.
¿Y este párrafo? ¿Será importante?
Este es otro párrafo del montón.
+