Reading time: 2 minutes
Good morning!
Continuing from the previous tutorial on how to create a TO-DO LIST, in today’s tutorial, I provide you with an update on functionality in which we have implemented the following:
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2023/07/pexels-mart-production-7718755.jpg?resize=900%2C600&ssl=1)
In this example, we have added a new event listener to the completed tasks list’s <ul>
element (completedList
). When a task is checked or unchecked in the completed tasks list, we check if the parent element is an <li>
and if so, we move it back to the to-do list (todoList
) or to the completed tasks list, depending on the checkbox state.
Now, when a task is unchecked in the completed tasks list, it will automatically move to the to-do list.
<!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 for devcodelight</title> </head> <body> <div class="container"> <h1 class="text-center">Task List</h1> <form id="todo-form"> <div class="input-group mb-3"> <input type="text" id="todo-input" class="form-control" placeholder="Add new task"> <div class="input-group-append"> <button class="btn btn-primary" type="submit">Add</button> </div> </div> </form> <h2 class="text-center">Pending Tasks</h2> <ul id="todo-list" class="list-group"></ul> <h2 class="text-center">Completed Tasks</h2> <ul id="completed-list" class="list-group"></ul> <button id="clear-btn" class="btn btn-danger">Clear List</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; } javascript Copy code function saveTodos() { localStorage.setItem('todos', todoList.innerHTML); localStorage.setItem('completedTodos', completedList.innerHTML); } // Clear stored data when the page is loaded window.addEventListener('beforeunload', function () { localStorage.clear(); }); loadTodos(); }); </script>
I hope you like it and find it helpful! :memo:
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2023/07/cropped-light_logo-5.png?resize=100%2C100&ssl=1)