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

// 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");
    }
}

//EJERCICIO 5

function agregarSeccionLitoral() {
    // 1. Creo el contenedor principal
    const contenedorComidas = document.createElement("div");

    // 2. Creo y configuro el título h2
    const titulo = document.createElement("h2");
    titulo.textContent = "Comidas Típicas del Litoral";

    // 3. Creo y configuro el párrafo introductorio
    const parrafo = document.createElement("p");
    parrafo.textContent = "La gastronomía del litoral argentino se destaca por sus platos a base de pescados de río y la influencia de la cultura guaraní.";

    // 4. Creo la lista y sus elementos
    const lista = document.createElement("ul");
    const platos = ["Surubí a la parrilla", "Pacú frito", "Chipa", "Sopa paraguaya"];

    for (const plato of platos) {
        const item = document.createElement("li");
        item.textContent = plato;
        lista.appendChild(item);
    }

    // 5. Armo la estructura: meto el h2, el p y la ul dentro del div
    contenedorComidas.appendChild(titulo);
    contenedorComidas.appendChild(parrafo);
    contenedorComidas.appendChild(lista);

    // 6. Finalmente, inserto el div completo al final del body de la página
    document.body.appendChild(contenedorComidas);

    console.log("Sección del litoral agregada exitosamente.");
}

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


//EJERCICIO 6

function limpiarLista(idDeLista) {
    // 1. Selecciono todos los <li> que son hijos de la lista con el id pasado por parámetro
    // Usamos el símbolo # para indicar que buscamos un ID
    const items = document.querySelectorAll("#" + idDeLista + " li");

    // 2. Recorro la lista de elementos (NodeList) usando for...of
    for (const item of items) {
        // 3. Elimino cada elemento del DOM
        item.remove();
    }
    console.log("Todos los items de la lista '" + idDeLista + "' han sido eliminados.");
}

//Verificar llamando a la funcion en consola
//limpiarLista("lista-inicial")


//EJERCICIO 7

// 1. Selecciono el elemento por su id usando el símbolo #
const imagen = document.querySelector("#foto");

// 2. Verifico que el elemento exista para evitar errores
if (imagen) {
    // 3. Modifico el atributo 'src'
    imagen.setAttribute("src", "foto2.jpg");

    // 4. Modifico el atributo 'alt'
    imagen.setAttribute("alt", "Locro");

    console.log("Atributos de la imagen actualizados.");
}


//EJERCICIO 8

function construirLista(elementos) {
    // Validar que el array contenga elementos
    if (!elementos || elementos.length === 0) {
        return document.createElement('div');
    }

    // Separo el primer elemento para el título y el resto para los ítems
    const [tituloTexto, ...items] = elementos;

    // Creo el contenedor principal
    const divContenedor = document.createElement('div');
    divContenedor.className = 'grupo-comidas';

    // Creo y asigno el título (h2)
    const h2Titulo = document.createElement('h2');
    h2Titulo.textContent = tituloTexto;
    divContenedor.appendChild(h2Titulo);

    // Creo la lista (ul)
    const ulLista = document.createElement('ul');

    // Recorro los ítems restantes y creo los li
    items.forEach(textoItem => {
        const liItem = document.createElement('li');
        liItem.textContent = textoItem;
        ulLista.appendChild(liItem);
    });

    // Agrego la lista al contenedor
    divContenedor.appendChild(ulLista);

    return divContenedor;
}

const nuevaListaComida = construirLista(["Carnes", "Churrasco", "Asado con cuero", "Colita de cuadril"]);