Lista de tareas en html

// script.js
window.onload = function() {
    const nombre = prompt("¿Cuál es tu nombre?");
    alert(`¡Bienvenido, ${nombre}!`);

    const agregarBtn = document.getElementById('agregarBtn');
    const tareaEntrada = document.getElementById('tareaEntrada');
    const listaTareas = document.getElementById('listaTareas');

    // Cargar tareas desde localStorage
    cargarTareas();

    agregarBtn.addEventListener('click', function() {
        const tareaTexto = tareaEntrada.value.trim(); // Eliminar espacios en blanco
        if (tareaTexto) {
            const li = crearTarea(tareaTexto);
            listaTareas.appendChild(li); // Añadir el li a la lista de tareas
            tareaEntrada.value = ''; // Limpiar el campo de entrada
            guardarTareas(); // Guardar tareas en localStorage
        } else {
            alert("Por favor, escribe una tarea."); // Mensaje si el campo está vacío
        }
    });

    function crearTarea(tareaTexto) {
        const li = document.createElement('li');

        // Contenedor para el texto de la tarea
        const textoTarea = document.createElement('span');
        textoTarea.className = 'texto-tarea';
        textoTarea.textContent = tareaTexto;

        // Botón de editar
        const editarBtn = document.createElement('button');
        editarBtn.textContent = 'Editar';
        editarBtn.className = 'editar';
        editarBtn.addEventListener('click', function(event) {
            event.stopPropagation(); // Evitar que el clic en el botón active el evento de la tarea
            const nuevoTexto = prompt("Edita tu tarea:", tareaTexto);
            if (nuevoTexto !== null && nuevoTexto.trim() !== '') {
                textoTarea.textContent = nuevoTexto.trim(); // Actualizar el texto de la tarea
                guardarTareas(); // Guardar tareas en localStorage
            }
        });

        // Botón de eliminar
        const eliminarBtn = document.createElement('button');
        eliminarBtn.textContent = 'Eliminar';
        eliminarBtn.className = 'eliminar';
        eliminarBtn.addEventListener('click', function(event) {
            event.stopPropagation(); // Evitar que el clic en el botón active el evento de la tarea
            listaTareas.removeChild(li);
            guardarTareas(); // Guardar tareas en localStorage
        });

        // Añadir evento de clic para marcar como completada
        li.addEventListener('click', function() {
            li.classList.toggle('completada'); // Alternar la clase 'completada'
            const tic = document.createElement('span');
            tic.className = 'tic';
            tic.textContent = '✔'; // Carácter Unicode para el tic
            if (li.classList.contains('completada')) {
                // Si la tarea está completada, añadir el tic
                if (textoTarea.firstChild.nodeName === "#text") {
                    li.insertBefore(tic, textoTarea); // Añadir el tic antes del texto
                }
                textoTarea.classList.add('completada'); // Aplicar clase de completada al texto
            } else {
                // Si la tarea no está completada, eliminar el tic
                const tics = li.getElementsByClassName('tic');
                if (tics.length > 0) {
                    li.removeChild(tics[0]); // Eliminar el tic si la tarea no está completada
                }
                textoTarea.classList.remove('completada'); // Remover clase de completada del texto
            }
            guardarTareas(); // Guardar tareas en localStorage
        });

        li.appendChild(textoTarea); // Añadir el texto de la tarea al li
        li.appendChild(editarBtn); // Añadir el botón de editar al li
        li.appendChild(eliminarBtn); // Añadir el botón de eliminar al li

        return li;
    }

    function guardarTareas() {
        const tareas = [];
        const items = listaTareas.getElementsByTagName('li');
        for (let item of items) {
            const texto = item.querySelector('.texto-tarea').textContent;
            const completada = item.classList.contains('completada');
            tareas.push({ texto, completada });
        }
        localStorage.setItem('tareas', JSON.stringify(tareas)); // Guardar en localStorage
    }

    function cargarTareas() {
        const tareasGuardadas = JSON.parse(localStorage.getItem('tareas')) || [];
        tareasGuardadas.forEach(tarea => {
            const li = crearTarea(tarea.texto);
            if (tarea.completada) {
                li.classList.add('completada');
                const tic = document.createElement('span');
                tic.className = 'tic';
                tic.textContent = '✔'; // Carácter Unicode para el tic
                li.insertBefore(tic, li.querySelector('.texto-tarea')); // Añadir el tic antes del texto
                li.querySelector('.texto-tarea').classList.add('completada'); // Aplicar clase de completada al texto
            }
            listaTareas.appendChild(li); // Añadir el li a la lista de tareas
        });
    }
};