Lista de tareas personalizada con checkbox para marcar y desmarcar tareas realizadas Bootstrap y almacenamiento local en este tutorial (parte 2)

por
Tiempo de lectura: 2 minutos

¡Buenos dias!,

continuando con el tutorial anterior sobre como crear un TO-DO LIST, en este de hoy, os dejo una actualización de funcionalidad, en la que hemos implementado lo siguiente:

En este ejemplo, hemos agregado un nuevo evento de escucha al <ul> de la lista de tareas completadas (completedList). Cuando se marque o desmarque una tarea en la lista de tareas completadas, verificamos si el elemento padre es un <li> y si es así, lo movemos nuevamente a la lista de tareas pendientes (todoList) o a la lista de tareas completadas, según el estado del checkbox.

Ahora, cuando se desactive una tarea en la lista de tareas completadas, se moverá automáticamente a la lista de tareas pendientes.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <title>To-do list para devcodelight</title>
</head>

<body>
    <div class="container">
        <h1 class="text-center">Lista de Tareas</h1>
        <form id="todo-form">
            <div class="input-group mb-3">
                <input type="text" id="todo-input" class="form-control" placeholder="Agregar nueva tarea">
                <div class="input-group-append">
                    <button class="btn btn-primary" type="submit">Agregar</button>
                </div>
            </div>
        </form>
        <h2 class="text-center">Tareas Pendientes</h2>
        <ul id="todo-list" class="list-group"></ul>
        <h2 class="text-center">Tareas Completadas</h2>
        <ul id="completed-list" class="list-group"></ul>
        <button id="clear-btn" class="btn btn-danger">Limpiar Lista</button>
    </div>


</body>

</html>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('todo-form');
            const todoInput = document.getElementById('todo-input');
            const todoList = document.getElementById('todo-list');
            const completedList = document.getElementById('completed-list');
            const clearButton = document.getElementById('clear-btn');

            form.addEventListener('submit', function (event) {
                event.preventDefault();
                const todoText = todoInput.value;

                if (todoText) {
                    const todoItem = document.createElement('li');
                    todoItem.classList.add('list-group-item');

                    const checkbox = document.createElement('input');
                    checkbox.setAttribute('type', 'checkbox');
                    checkbox.classList.add('mr-3');
                    todoItem.appendChild(checkbox);

                    const todoTextElement = document.createElement('span');
                    todoTextElement.textContent = todoText;
                    todoItem.appendChild(todoTextElement);

                    todoList.appendChild(todoItem);
                    todoInput.value = '';
                    saveTodos();
                }
            });

            todoList.addEventListener('change', function (event) {
                if (event.target.tagName === 'INPUT' && event.target.getAttribute('type') === 'checkbox') {
                    const todoItem = event.target.parentNode;
                    const isCompleted = event.target.checked;

                    if (isCompleted) {
                        completedList.appendChild(todoItem);
                    } else {
                        todoList.appendChild(todoItem);
                    }
                    saveTodos();
                }
            });

            completedList.addEventListener('change', function (event) {
                if (event.target.tagName === 'INPUT' && event.target.getAttribute('type') === 'checkbox') {
                    const todoItem = event.target.parentNode;
                    const isActive = !event.target.checked;

                    if (isActive) {
                        todoList.appendChild(todoItem);
                    } else {
                        completedList.appendChild(todoItem);
                    }
                    saveTodos();
                }
            });

            clearButton.addEventListener('click', function () {
                todoList.innerHTML = '';
                completedList.innerHTML = '';
                saveTodos();
            });

            function loadTodos() {
                const todos = localStorage.getItem('todos');
                const completedTodos = localStorage.getItem('completedTodos');

                if (todos) {
                    todoList.innerHTML = todos;
                }

                if (completedTodos) {
                    completedList.innerHTML = completedTodos;
                }
            }

            function saveTodos() {
                localStorage.setItem('todos', todoList.innerHTML);
                localStorage.setItem('completedTodos', completedList.innerHTML);
            }

            // Limpia los datos almacenados al cargar la página
            window.addEventListener('beforeunload', function () {
                localStorage.clear();
            });

            loadTodos();
        });
    </script>

Espero que os guste y os ayude!. 📝

Post Views: 14

Deja un comentario