<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
<div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
<h1 class="text-2xl font-bold mb-4">To-Do List</h1>
<form id="todo-form" class="flex mb-4">
<input id="todo-input" type="text" placeholder="Add a new task" class="flex-grow p-2 border rounded-l-lg focus:outline-none">
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700">Add</button>
</form>
<div class="mb-4">
<button id="filter-all" class="filter-btn bg-gray-200 text-black px-4 py-2 rounded-l-lg">All</button>
<button id="filter-active" class="filter-btn bg-gray-200 text-black px-4 py-2">Active</button>
<button id="filter-completed" class="filter-btn bg-gray-200 text-black px-4 py-2 rounded-r-lg">Completed</button>
</div>
<ul id="todo-list" class="list-disc pl-5">
<!-- To-Do items will be added here -->
</ul>
</div>
<script>
const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');
const filterButtons = document.querySelectorAll('.filter-btn');
document.addEventListener('DOMContentLoaded', loadTodos);
todoForm.addEventListener('submit', function(event) {
event.preventDefault();
addTodoItem(todoInput.value);
todoInput.value = '';
});
filterButtons.forEach(button => {
button.addEventListener('click', () => {
document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('bg-blue-500', 'text-white'));
button.classList.add('bg-blue-500', 'text-white');
filterTodos(button.id);
});
});
function addTodoItem(task) {
if (task === '') return;
const listItem = document.createElement('li');
listItem.classList.add('flex', 'items-center', 'justify-between', 'py-2', 'border-b', 'border-gray-200');
const taskText = document.createElement('span');
taskText.textContent = task;
taskText.classList.add('flex-grow', 'cursor-pointer');
taskText.addEventListener('click', toggleComplete);
const editButton = document.createElement('button');
editButton.textContent = 'Edit';
editButton.classList.add('bg-yellow-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-yellow-700');
editButton.addEventListener('click', () => editTodoItem(listItem, taskText));
const priorityButton = document.createElement('button');
priorityButton.textContent = 'Important';
priorityButton.classList.add('bg-green-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-green-700');
priorityButton.addEventListener('click', () => togglePriority(taskText));
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.classList.add('bg-red-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-red-700');
deleteButton.addEventListener('click', () => deleteTodoItem(listItem));
listItem.appendChild(taskText);
listItem.appendChild(editButton);
listItem.appendChild(priorityButton);
listItem.appendChild(deleteButton);
todoList.appendChild(listItem);
saveTodos();
}
function toggleComplete(event) {
event.target.classList.toggle('line-through');
event.target.classList.toggle('text-gray-500');
saveTodos();
}
function togglePriority(taskText) {
taskText.classList.toggle('font-bold');
saveTodos();
}
function editTodoItem(listItem, taskText) {
const newTask = prompt('Edit your task:', taskText.textContent);
if (newTask !== null && newTask !== '') {
taskText.textContent = newTask;
saveTodos();
}
}
function deleteTodoItem(listItem) {
listItem.remove();
saveTodos();
}
function saveTodos() {
const todos = [];
document.querySelectorAll('#todo-list li').forEach((item) => {
todos.push({
text: item.querySelector('span').textContent,
completed: item.querySelector('span').classList.contains('line-through'),
important: item.querySelector('span').classList.contains('font-bold')
});
});
localStorage.setItem('todos', JSON.stringify(todos));
}
function loadTodos() {
const savedTodos = JSON.parse(localStorage.getItem('todos')) || [];
savedTodos.forEach((todo) => {
const listItem = document.createElement('li');
listItem.classList.add('flex', 'items-center', 'justify-between', 'py-2', 'border-b', 'border-gray-200');
const taskText = document.createElement('span');
taskText.textContent = todo.text;
taskText.classList.add('flex-grow', 'cursor-pointer');
if (todo.completed) {
taskText.classList.add('line-through', 'text-gray-500');
}
if (todo.important) {
taskText.classList.add('font-bold');
}
taskText.addEventListener('click', toggleComplete);
const editButton = document.createElement('button');
editButton.textContent = 'Edit';
editButton.classList.add('bg-yellow-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-yellow-700');
editButton.addEventListener('click', () => editTodoItem(listItem, taskText));
const priorityButton = document.createElement('button');
priorityButton.textContent = 'Important';
priorityButton.classList.add('bg-green-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-green-700');
priorityButton.addEventListener('click', () => togglePriority(taskText));
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.classList.add('bg-red-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-red-700');
deleteButton.addEventListener('click', () => deleteTodoItem(listItem));
listItem.appendChild(taskText);
listItem.appendChild(editButton);
listItem.appendChild(priorityButton);
listItem.appendChild(deleteButton);
todoList.appendChild(listItem);
});
}
function filterTodos(filter) {
const allTodos = document.querySelectorAll('#todo-list li');
allTodos.forEach((todo) => {
switch (filter) {
case 'filter-all':
todo.style.display = 'flex';
break;
case 'filter-active':
todo.querySelector('span').classList.contains('line-through') ? todo.style.display = 'none' : todo.style.display = 'flex';
break;
case 'filter-completed':
todo.querySelector('span').classList.contains('line-through') ? todo.style.display = 'flex' : todo.style.display = 'none';
break;
}
});
}
</script>
</body>
</html>
