1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>To-Do List</title>
7 <style>
8 .completed {
9 text-decoration: line-through;
10 }
11 </style>
12</head>
13<body>
14 <h1>To-Do List</h1>
15 <input type="text" id="taskInput" placeholder="Add a new task">
16 <button id="addTaskButton">Add Task</button>
17 <ul id="taskList"></ul>
18
19 <script>
20 const taskInput = document.getElementById('taskInput');
21 const addTaskButton = document.getElementById('addTaskButton');
22 const taskList = document.getElementById('taskList');
23
24 const loadTasks = () => {
25 const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
26 tasks.forEach(task => addTaskToDOM(task.text, task.completed));
27 };
28
29 const saveTasks = () => {
30 const tasks = [];
31 taskList.querySelectorAll('li').forEach(taskItem => {
32 tasks.push({
33 text: taskItem.textContent,
34 completed: taskItem.classList.contains('completed')
35 });
36 });
37 localStorage.setItem('tasks', JSON.stringify(tasks));
38 };
39
40 const addTaskToDOM = (taskText, completed = false) => {
41 const taskItem = document.createElement('li');
42 taskItem.textContent = taskText;
43 if (completed) {
44 taskItem.classList.add('completed');
45 }
46 taskItem.addEventListener('click', () => {
47 taskItem.classList.toggle('completed');
48 saveTasks();
49 });
50 taskItem.addEventListener('dblclick', () => {
51 taskItem.remove();
52 saveTasks();
53 });
54 taskList.appendChild(taskItem);
55 };
56
57 addTaskButton.addEventListener('click', () => {
58 const taskText = taskInput.value.trim();
59 if (taskText) {
60 addTaskToDOM(taskText);
61 saveTasks();
62 taskInput.value = '';
63 }
64 });
65
66 loadTasks();
67 </script>
68</body>
69</html>