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

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

// Ejercicio 1: Cambiar el título de la página
function cambiarTitulos(nuevoTitulo) {
    const titulo = document.querySelector('h1');
    if (titulo){
        titulo.textContent = nuevoTitulo;
        console.log(`Titulo cambiado a: ${nuevoTitulo}`);
    } else {
        console.error('No se encontro el elemento h1 en el documentio.');
    }
}

// Ejercicio 2:clase item-lista

function estilizarLista(){
    const items = document.querySelectorAll('li');
    for ( const item of items){
        item.classList.add('item-lista');
    }
    console.log(`Se aplico la clase item-lista a ${items.length} elementos`);
}

// Al invocar la función, vas a notar que los elementos de la lista cambian visualmente (por ejemplo, pueden cambiar de color, tamaño o tipografía).
//¿Por qué pasa esto si solo escribimos JavaScript y no tocamos el diseño?
//Porque en el archivo de estilos (estilos.css o los estilos que ya venían configurados en el repositorio que clonaste del profesor) ya existe una regla armada para la clase .item-lista.


// Ejercicio 3: Agregar nuevo item a la lista

function agregarItem(texto) {
    const lista = document.querySelector('#lista-inicial');
    const nuevoItem = document.createElement('li');
    nuevoItem.textContent = texto;
    lista.appendChild(nuevoItem);
    console.log(`Se agrego el item: ${texto}`);
}

// Ejercicio 4: parrafo

function destacarImportante() {
    const parrafos = document.querySelectorAll('#parrafos p');
    let contador = 0;
    for(const p of parrafos){
        if (p.textContent.includes('importante')){
            p.classList.add('destacado');
            contador++;
        }
    }
    console.log(`Se destacaron ${contador} párrafos.`);
}