clase-8-DOM/ejercicios-clase-8.js

// Vincular este archivo al archivo index.html, y resolver aquí los ejercicios.

// Ejercicio 1 
/*

Crear una función que seleccione el primer <h1> 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 <li> 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");

        } 
    }
}