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

//EJERCICIO 1

function cambiarPrimerTitulo() {
    // 1. Selecciono el primer h1 de la página usando querySelector
    const titulo = document.querySelector("h1");

    // 2. Verifico que el elemento exista para evitar errores
    if (titulo) {
        // 3. Cambio su contenido de texto
        titulo.textContent = "¡Texto cambiado con JavaScript!";
        console.log("El título ha sido modificado exitosamente.");
    } else {
        console.log("No se encontró ningún elemento <h1> en la página.");
    }
}

//Verificar llamando a la funcion en consola
//cambiarPrimerTitulo()

//EJERCICIO 2

function aplicarEstiloALista() {
    // 1. Selecciono todos los elementos <li> de la página
    const items = document.querySelectorAll("li");

    // 2. Recorro la lista de elementos usando for...of
    for (const item of items) {
        // 3. Agrego la clase "item-lista" a cada elemento
        item.classList.add("item-lista");
    }
    console.log("Clase agregada a todos los elementos de la lista.");
}

//Verificar llamando a la funcion en consola
//aplicarEstiloALista()


//EJERCICIO 3

function agregarItem(texto) {
    // 1. Selecciono la lista usando su id (#lista-inicial)
    const lista = document.querySelector("#lista-inicial");

    // 2. Creo el nuevo elemento <li> en memoria
    const nuevoLi = document.createElement("li");

    // 3. Le asigno el texto recibido por parámetro
    nuevoLi.textContent = texto;

    // 4. Verifico si la lista existe y lo agrego al final
    if (lista) {
        lista.appendChild(nuevoLi);
    } else {
        console.log("Error: No se encontró la lista con id='lista-inicial'");
    }
}

//Verificar llamando a la funcion en consola
//agregarItem("Chinchulines")

//EJERCICIO 4

// 1. Selecciono todos los párrafos que son descendientes del div con id "parrafos"
const parrafos = document.querySelectorAll("#parrafos p");

// 2. Recorro la lista de elementos
for (const p of parrafos) {
    // 3. Verifico si el texto del párrafo incluye la palabra "importante"
    // Usamos el método .includes() de los strings de JavaScript
    if (p.textContent.includes("importante")) {
        // 4. Si la contiene, agregamos la clase "destacado" sin pisar las existentes
        p.classList.add("destacado");
    }
}