Modern Interactive To-Do List with HTML, CSS, and JavaScript
By Cristian Quiñones, Published on January 21st 2025 | 9 mins, 1717 words
Today we will be creating a Modern Interactive To-Do List with just HTML, CSS, and JavaScript. This tutorial will give you a basic understanding on how to create a clean and user-friendly to-do list application with interactive functionalities like adding task, filtering, and task deletion.
after finishing this project, you will have a complete functional and stylish to-do list that you can customize to fit your own projects. Let's get into the code!
Step 1: Setting Up the Front End Layout
Let's start by creating a new file called index.hmtl then follow this command:
Step 3: Make our website more interactive with Javascript
Now lets add some JavaScript logic that drives the interactivity of the to-do list. Create a new file called main.js and follow this code:
// main.js
document.addEventListener('DOMContentLoaded', () => {
const taskInput = document.getElementById('task-input');
const addTaskBtn = document.getElementById('add-task-btn');
const taskList = document.querySelector('.task-list');
const filterButtons = document.querySelectorAll('.filter-btn');
let currentFilter = 'all';
// Load tasks from localStorage
loadTasks();
// Add a new task
addTaskBtn.addEventListener('click', () => {
const taskText = taskInput.value.trim();
if (taskText !== '') {
addTask(taskText);
taskInput.value = '';
saveTasks();
showNotification('Task added successfully!', 'success');
}
});
// Add a task by pressing Enter
taskInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
addTaskBtn.click();
}
});
// Function to add a task
function addTask(text, completed = false) {
const li = document.createElement('li');
li.classList.add('task-item');
if (completed) li.classList.add('completed');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = completed;
checkbox.setAttribute('aria-label', 'Mark as completed');
checkbox.addEventListener('change', () => {
li.classList.toggle('completed');
const taskTextSpan = li.querySelector('.task-text');
taskTextSpan.classList.toggle('completed');
saveTasks();
applyFilter();
});
const span = document.createElement('span');
span.classList.add('task-text');
span.textContent = text;
if (completed) span.classList.add('completed');
const deleteBtn = document.createElement('button');
deleteBtn.classList.add('delete-btn');
deleteBtn.innerHTML = '<i class="fas fa-trash"></i>';
deleteBtn.setAttribute('aria-label', 'Delete task');
deleteBtn.addEventListener('click', () => {
if (confirm('Are you sure you want to delete this task?')) {
li.classList.add('fade-out');
li.addEventListener('transitionend', () => {
li.remove();
saveTasks();
showNotification('Task deleted successfully!', 'success');
});
}
});
li.appendChild(checkbox);
li.appendChild(span);
li.appendChild(deleteBtn);
taskList.appendChild(li);
// Add animation
li.style.opacity = 0;
li.style.transform = 'translateY(-20px)';
setTimeout(() => {
li.style.transition = 'all 0.5s ease';
li.style.opacity = 1;
li.style.transform = 'translateY(0)';
}, 10);
}
// Filter tasks
filterButtons.forEach(btn => {
btn.addEventListener('click', () => {
filterButtons.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
currentFilter = btn.getAttribute('data-filter');
applyFilter();
});
});
function applyFilter() {
const tasks = document.querySelectorAll('.task-item');
tasks.forEach(task => {
if (currentFilter === 'all') {
task.style.display = 'flex';
} else if (currentFilter === 'active') {
task.style.display = task.classList.contains('completed') ? 'none' : 'flex';
} else if (currentFilter === 'completed') {
task.style.display = task.classList.contains('completed') ? 'flex' : 'none';
}
});
}
// Save tasks to localStorage
function saveTasks() {
const tasks = [];
const taskItems = document.querySelectorAll('.task-item');
taskItems.forEach(item => {
const taskText = item.querySelector('.task-text').textContent;
const completed = item.classList.contains('completed');
tasks.push({ text: taskText, completed });
});
localStorage.setItem('tasks', JSON.stringify(tasks));
}
// Load tasks from localStorage
function loadTasks() {
const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
tasks.forEach(task => addTask(task.text, task.completed));
}
// Initialize SortableJS for drag-and-drop functionality
if (typeof Sortable !== 'undefined') {
const sortable = Sortable.create(taskList, {
animation: 150,
onEnd: function () {
saveTasks();
}
});
}
// Function to display notifications
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.classList.add('notification', `notification-${type}`);
notification.textContent = message;
document.body.appendChild(notification);
// Trigger reflow to enable transition
void notification.offsetWidth;
// Add show class for animation
notification.classList.add('show');
// Remove notification after 3 seconds
setTimeout(() => {
notification.classList.remove('show');
notification.addEventListener('transitionend', () => {
notification.remove();
});
}, 3000);
}
});
Testing the To-Do List Application
Once you’ve written your HTML, CSS, and JavaScript, it’s time to test the functionality of our to-do list. Now open your index.html file in the browser.
moderntodolist.png33.81 KB
Congratulations! You’ve just built a Modern Interactive To-Do List with HTML, CSS, and JavaScript. This simple to-do list application can be enhance further with additional features like task prioritization, date tracking, or saving tasks to local storage.
Feel free to experiment with the code, tweak the styles, and add more functionality to suit your needs. Happy coding!
