Scribd
Upload
9 views

Todo List

Uploaded by

Gil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

Todo List

Uploaded by

Gil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

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('&times;');

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.

You might also like