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:
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:
