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

        } 
    }
}

// Ejercicio 5
/*
Crear una función que agregue un nuevo div a la página, que incluya comidas típicas de la región del litoral. 
Este div debe incluir un h2, un párrafo introductorio y una lista de comidas típicas. 
Probarla utilizando las devtools.

* Al ejercicio le agregue que el nuevo div y la nueva lista tengan el mismo estilo que lo otros. 
*/

function addLitoral() {

    let comidasLitoral = document.createElement("div");
    comidasLitoral.classList.add("grupo-comidas");

    let titulo = document.createElement("h2");
    titulo.textContent = "Comidas típicas de la region del litoral";

    let parrafoLitoral = document.createElement("p");
    parrafoLitoral.textContent = "La región del litoral cuenta con comidas tradicionales muy populares.";

    let lista = document.createElement("ul");

    lista.classList.add("lista-comidas");
    lista.id = "lista-final";

    let comida1 = document.createElement("li");
    comida1.textContent = "Chipá";

    let comida2 = document.createElement("li");
    comida2.textContent = "Pacú asado";

    let comida3 = document.createElement("li");
    comida3.textContent = "Mbejú";

    lista.appendChild(comida1);
    lista.appendChild(comida2);
    lista.appendChild(comida3);

    comidasLitoral.appendChild(titulo);
    comidasLitoral.appendChild(parrafoLitoral);
    comidasLitoral.appendChild(lista);

    document.body.appendChild(comidasLitoral);
}


// Ejercicio 6

/*

Crear una función limpiarLista que reciba por parámetro el id de una lista, y que elimine todos los <li> de esa lista. Llamarla sobre la lista del ejercicio 2.
Pista: querySelectorAll + for...of + remove. 
Probarla utilizando las devtools, tanto con la lista original de la página como con la lista agregada en el ejercicio anterior.

*/

function limpiarLista(idLista) {

    let items = document.querySelectorAll(`#${idLista} li`);

    for (let item of items) {

        item.remove();

    }
}

// Ejercicio 7 

/* 
La página contiene el siguiente HTML:
   ```html
   <img id="foto" src="foto1.jpg" alt="Empanadas">
   ```
   Escribir el código que cambie el `src` de la imagen a `"foto2.jpg"` y el
   `alt` a `"Locro"`.
*/

// Ejercicio 8 

/*

Crear una función `construirLista` que reciba un array de strings y construya dinámicamente y retorne un `div` con que contenga un título y una
lista `<ul>`, con un `<li>` por cada elemento del array. Agregar esta lista a la página desde las devtools.

   ```js
   construirLista(["Comidas mendocinas", "Sopaipilla", "Vino tinto"]);
   // Debe generar y retornar:
   // <div class="grupo-comidas">
   //   <h2>Comidas mendocinas</h2>
   //   <ul>
   //     <li>Sopaipilla</li>
   //     <li>Vino tinto</li>
   //   </ul>
   // </div>
   ```
*/

let comidasMendocinas = ["Sopaipilla", "Vino tinto", "Chivo"];

function construirLista (comidas) {

    let div = document.createElement("div");
    div.classList.add("grupos-comidas");

    let titulo8 = document.createElement("h2");
    titulo8.textContent = "Comidas Mendocinas";

    let lista8 = document.createElement("ul");
    lista8.classList.add("lista-comidas");


    for (let comida of comidas) {

        let item = document.createElement("li")
        
        item.textContent = comida;
        lista8.appendChild(item);
        
    }

    div.appendChild(titulo8);

    div.appendChild(lista8);

    document.body.appendChild(div);

}