diff --git a/ejercicios-clase-8.js b/ejercicios-clase-8.js index af39c43..829aeef 100644 --- a/ejercicios-clase-8.js +++ b/ejercicios-clase-8.js @@ -1 +1,85 @@ // Vincular este archivo al archivo index.html, y resolver aquí los ejercicios. +//Ejercicio 1 +function cambiarTitulo() { + const titulo = document.querySelector("h1"); + + titulo.textContent = "Nuevo título de la página"; +} + +//Ejercicio 2 + +function agregarClaseLista() { + const items = document.querySelectorAll("li"); + + for (const item of items) { + item.classList.add("item-lista"); + } +} + +//Ejercicio 3 +function agregarItem(texto) { + const lista = document.querySelector("#lista-inicial"); + + const nuevoItem = document.createElement("li"); + + nuevoItem.textContent = texto; + + lista.appendChild(nuevoItem); +} + +//Ejercicio 4 +function destacarParrafos() { + const parrafos = document.querySelectorAll("#parrafos p"); + + for (const parrafo of parrafos) { + if (parrafo.textContent.includes("importante")) { + parrafo.classList.add("destacado"); + } + } +} + +//Ejercicio 5 +function agregarComidasLitoral() { + const div = document.createElement("div"); + + const titulo = document.createElement("h2"); + titulo.textContent = "Comidas típicas del litoral"; + + const parrafo = document.createElement("p"); + parrafo.textContent = "Algunas comidas tradicionales de la región."; + + const lista = document.createElement("ul"); + + const comidas = ["Chipá", "Pacú", "Mbejú"]; + + for (const comida of comidas) { + const item = document.createElement("li"); + + item.textContent = comida; + + lista.appendChild(item); + } + + div.appendChild(titulo); + div.appendChild(parrafo); + div.appendChild(lista); + + document.body.appendChild(div); +} + +//Ejercicio 6 +function limpiarLista(idLista) { + const items = document.querySelectorAll(`#${idLista} li`); + + for (const item of items) { + item.remove(); + } +} + +//Ejercicio 7 +function cambiarImagen() { + const imagen = document.querySelector("#foto"); + + imagen.src = "foto2.jpg"; + imagen.alt = "Locro"; +} \ No newline at end of file diff --git a/estilo.css b/estilo.css index fcb26fc..bda8e45 100644 --- a/estilo.css +++ b/estilo.css @@ -176,3 +176,23 @@ h1 { padding: 20px; } } + +/* Se usa para el ejercicio 2*/ +.item-lista { + color: green; + font-weight: bold; + background-color: lightyellow; +} + +/* Se usa para el ejercicio 4*/ +.destacado { + background-color: yellow; + font-weight: bold; + color: red; +} +/* Se usa para el ejercicio 8*/ +.grupo-comidas { + background-color: beige; + padding: 15px; + border: 2px dashed brown; +} \ No newline at end of file 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.

+