HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive To-Do List</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="text-center mt-5">My To-Do List</h1>
<div class="row justify-content-center mt-4">
<div class="col-md-6">
<form id="todo-form">
<div class="input-group mb-3">
<input type="text" id="todo-input" class="form-control" placeholder="Enter a new
task...">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Add Task</button>
</div>
</div>
</form>
</div>
</div>
<div class="row justify-content-center mt-3">
<div class="col-md-6">
<div class="btn-group w-100" role="group">
<button type="button" class="btn btn-outline-secondary active"
data-filter="all">All</button>
<button type="button" class="btn btn-outline-secondary"
data-filter="active">Active</button>
<button type="button" class="btn btn-outline-secondary" data-
filter="completed">Completed</button>
</div>
</div>
</div>
<div class="row justify-content-center mt-4">
<div class="col-md-6">
<ul id="todo-list" class="list-group"></ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></
script>
<script src="script.js"></script>
</body>
</html>
CSS Styling (style.css)
body {
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
min-height: 100vh;
.container {
padding-bottom: 50px;
h1 {
color: #2c3e50;
font-weight: 300;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
#todo-list .list-group-item {
background-color: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 15px;
margin-bottom: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
#todo-list .list-group-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(0,0,0,0.15);
#todo-list .list-group-item.completed {
background-color: rgba(200, 200, 200, 0.8);
text-decoration: line-through;
color: #666;
.delete-btn {
opacity: 0;
transition: opacity 0.3s ease;
#todo-list .list-group-item:hover .delete-btn {
opacity: 1;
.btn-group .btn {
transition: all 0.3s ease;
}
.btn-group .btn.active {
background-color: #007bff;
color: white;
JavaScript and jQuery (script.js)
$(document).ready(function() {
// Load tasks from localStorage
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
// Render initial tasks
renderTasks();
// Add new task
$('#todo-form').submit(function(e) {
e.preventDefault();
let taskText = $('#todo-input').val().trim();
if (taskText) {
tasks.push({ text: taskText, completed: false });
saveTasks();
renderTasks();
$('#todo-input').val('');
});
// Toggle task completion
$('#todo-list').on('click', '.list-group-item', function() {
let index = $(this).data('index');
tasks[index].completed = !tasks[index].completed;
saveTasks();
renderTasks();
});
// Delete task
$('#todo-list').on('click', '.delete-btn', function(e) {
e.stopPropagation();
let index = $(this).parent().data('index');
tasks.splice(index, 1);
saveTasks();
renderTasks();
});
// Filter tasks
$('.btn-group .btn').click(function() {
$(this).addClass('active').siblings().removeClass('active');
renderTasks();
});
function renderTasks() {
let filter = $('.btn-group .btn.active').data('filter');
let filteredTasks = tasks;
if (filter === 'active') {
filteredTasks = tasks.filter(task => !task.completed);
} else if (filter === 'completed') {
filteredTasks = tasks.filter(task => task.completed);
$('#todo-list').empty();
filteredTasks.forEach((task, index) => {
let listItem = $('<li>')
.addClass('list-group-item d-flex justify-content-between align-items-center')
.text(task.text)
.data('index', index);
if (task.completed) {
listItem.addClass('completed');
let deleteBtn = $('<button>')
.addClass('btn btn-danger btn-sm delete-btn')
.html('×');
listItem.append(deleteBtn);
$('#todo-list').append(listItem);
listItem.hide().slideDown(300);
});
function saveTasks() {
localStorage.setItem('tasks', JSON.stringify(tasks));
});
This implementation creates an interactive and visually appealing to-do list with the following features:
Add, complete, and delete tasks
Filter tasks by all, active, or completed
Smooth animations for adding and removing tasks
Hover effects for better user interaction
Local storage to persist tasks
Responsive design using Bootstrap
The design uses a gradient background and card-like task items for a modern look. Animations and
transitions provide a fluid user experience. The code structure allows for easy maintenance and future
enhancements.
