//ejercicio1
let titulo = document.querySelector("h1");
titulo.textContent = "Comida Rioplatense";

//ejercicio2
function agregarClaseAItems(etiqueta){ //la funcion debe recibir como parametro la etiqueta html a la cual se le quiere agregar la clase
array_li = document.querySelectorAll(etiqueta); //lista con los items que tengan dicha etiqueta
for(let item of array_li){
    item.classList.add(`item-lista`); //agregamos a cada item la clase "item-lista"
}};

agregarClaseAItems("li"); //ejecutamos la funcion con la etiqueta HTML como parametro

//ejercicio3
function agregarItem(contenido){
    let lista_inicial = document.querySelector("#lista-inicial");   // alojamos la lista en una variable
    let item_nuevo = document.createElement("li");  // creamos el item
    item_nuevo.textContent = contenido;     // le otorgamos el contenido del parametro
    lista_inicial.appendChild(item_nuevo);   // añadimos el item a la lista
};

agregarItem("Guiso de lentejas");
agregarItem("Milanesa napolitana");
agregarItem("Medialunas");

//ejercicio4
let parrafosImportantes = document.querySelectorAll("#parrafos > p");
for (let parrafo of parrafosImportantes){
    if (parrafo.textContent.includes("importante")){
        parrafo.classList.add("destacado")
    }
};

//ejercicio5
let divComidas = document.querySelector(".grupo-comidas");  //almacenamos en esta variable el div padre al que se anexara todo lo creado a continuacion

let divLitoral = document.createElement("div");   //creamos las etiquetas html para "div" , "ul" , "h2" , "li" y "p"
let nuevoSubtitulo = document.createElement("h2");
let parrafoIntroductorio = document.createElement("p") 
let lista_litoral = document.createElement("ul");  
let itemUno = document.createElement("li")
let itemDos = document.createElement("li")
let itemTres = document.createElement("li")

nuevoSubtitulo.textContent = "comidas del litoral";     // llenamos de texto las etiquetas que van a mostrarlo mediante textcontent
parrafoIntroductorio.textContent = "La region litoral comprende 6 provincias del centro y noreste argentino, donde gastronomicamente destaca mucho la presencia del pescado de rio y se incorpora a las demas comidas nacionales"
itemUno.textContent = "Pescados a la parrilla";
itemDos.textContent = "Empanadas de pescado";
itemTres.textContent = "Milanesa de merluza";

divComidas.appendChild(divLitoral);     // anexamos los elementos creados previamente a sus respectivas etiquetas "padre"
divLitoral.appendChild(nuevoSubtitulo); 
divLitoral.appendChild(parrafoIntroductorio); 
divLitoral.appendChild(lista_litoral);
lista_litoral.appendChild(itemUno);
lista_litoral.appendChild(itemDos);
lista_litoral.appendChild(itemTres);

//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){ 
    itemsLista = document.querySelectorAll(`#${idlista} > li` );    // hacemos un array con todos los "li" dentro de la lista con el id del parametro 
    for(li of itemsLista){  // iteramos dentro de la lista y aplicamos el li.remove() a cada "li"
        li.remove();
    }
}

limpiarLista("lista-inicial")

// 7.Escribir el código que cambie el `src` de la imagen a `"foto2.jpg"` y el `alt` a `"Locro"`.

let fotoEmpanadasUno = document.querySelector("#foto");
fotoEmpanadasUno.setAttribute("src", "foto2.jpg");
fotoEmpanadasUno.setAttribute("alt", "Locro");


// 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>
//    ```

function construirLista(array){

    let contenedor = document.querySelector(".grupo-comidas")
    let divMendoza = document.createElement("div");     // creamos las etiquetas necesarias para la funcion menos la de "li", ya que
    let titulo = document.createElement("h2");          // estas van a depender de la cantidad de elementos en el array.
    let lista = document.createElement("ul");
    
    for(let i=1; i < array.length; i++ ){ //empezamos la variable i en 1 en vez de 0 porque el primer elemento del array no hay que tenerlo en cuenta para la creacion de items
       let nuevoLi = document.createElement("li");  // en este for creamos el "li",
       nuevoLi.textContent = array[i];              // le damos el texto usando el index del array
       lista.appendChild(nuevoLi);                  // y lo anexamos a la lista

    titulo.textContent = array[0]; // llenamos el titulo con el primer elemento del array

    contenedor.appendChild(divMendoza); // anexamos las etiquetas html a sus "padres"
    divMendoza.appendChild(titulo);
    divMendoza.appendChild(lista)

}}

construirLista(["comidas mendocinas", "Sopaipilla", "Vino tinto"]);