diff --git a/ejercicios-clase-8.js b/ejercicios-clase-8.js index af39c43..ee6fb1c 100644 --- a/ejercicios-clase-8.js +++ b/ejercicios-clase-8.js @@ -1 +1,105 @@ // Vincular este archivo al archivo index.html, y resolver aquí los ejercicios. +function cambiarText(texto){ + const textoH1 = document.querySelector("h1"); + textoH1.textContent = texto; +} + +function agregarClase(){ + const listaComida = document.querySelectorAll(".item-comida"); + for (const i of listaComida){ + i.classList.add("item-lista"); + } +} + +function agregarItem(texto){ + const lista = document.querySelector("#lista-inicial"); + const nuevo = document.createElement("li"); + + nuevo.textContent = texto; + + lista.appendChild(nuevo); + +} + +function destacarImportantes() { + const parrafos = document.querySelectorAll("#parrafos p"); + + for (const p of parrafos) { + if (p.textContent.includes("importante")) { + p.classList.add("destacado"); + } + } +} + +function agregarComidasLitoral() { + + const contenedor = document.createElement("div"); + + const titulo = document.createElement("h2"); + titulo.textContent = "Comidas típicas del litoral"; + + const parrafo = document.createElement("p"); + parrafo.textContent = "Comidas tradicionales de la región"; + + const lista = document.createElement("ul"); + + const comidas = [ + "Chipá", + "Surubí", + "Pacú", + "Empanadas de pescado", + "Mbejú" + ]; + + for (const comida of comidas) { + const item = document.createElement("li"); + item.textContent = comida; + lista.appendChild(item); + } + + contenedor.appendChild(titulo); + contenedor.appendChild(parrafo); + contenedor.appendChild(lista); + + document.body.appendChild(contenedor); +} + +function limpiarLista(idLista){ + + const items = document.querySelectorAll(`#${idLista} li`); + + for (const item of items){ + item.remove(); + } +} + +function cambiarFoto(foto, texto){ + const imagen = document.querySelector("#foto"); + imagen.setAttribute("src", foto); + imagen.setAttribute("alt", texto); +} + +function construirLista(items){ + + const contenedor = document.createElement("div"); + + const titulo = document.createElement("h2"); + titulo.textContent = "Lista dinámica"; + + const lista = document.createElement("ul"); + + for (const item of items){ + + const li = document.createElement("li"); + + li.textContent = item; + + lista.appendChild(li); + } + + contenedor.appendChild(titulo); + contenedor.appendChild(lista); + document.body.appendChild(contenedor); + contenedor.classList.add("grupo-comidas"); + return contenedor; +} \ No newline at end of file diff --git a/estilo.css b/estilo.css index fcb26fc..dc6a0dc 100644 --- a/estilo.css +++ b/estilo.css @@ -101,6 +101,7 @@ h1 { font-weight: bold; } + /* ========================= IMAGEN ========================= */ @@ -143,7 +144,7 @@ h1 { .destacado { background: linear-gradient(135deg, #4a90e2, #357abd); - color: white; + color: rgb(255, 255, 255); font-weight: bold; padding: 18px !important; box-shadow: 0 6px 16px rgba(74, 144, 226, 0.35); diff --git a/index.html b/index.html index 0c393ac..64e23af 100644 --- a/index.html +++ b/index.html @@ -31,5 +31,6 @@

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

Este es otro párrafo del montón.

+