NS-PORTFOLIO/TO-DO-ROUTINE.html at main · NSSTUDIO-html/NS-PORTFOLIO · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Persistent To-Do List</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-br from-blue-100 to-green-100 min-h-screen flex items-center justify-center p-4">
  <div class="bg-white shadow-2xl rounded-2xl w-full max-w-md p-6 space-y-6">
    <h1 class="text-2xl font-bold text-center text-blue-800">📝 Daily To-Do List</h1>

    <ul id="todo-list" class="space-y-3">
      <!-- Tasks will be added by JavaScript -->
    </ul>

    <button id="clearAll" class="w-full mt-4 bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-300">
      🗑️ Clear All
    </button>
  </div>

  <script>
    const tasks = [
      "Wake up and freshen up",
      "Light exercise or walk",
      "Eat breakfast",
      "Drawing Session 1",
      "Coding Session 1",
      "Short break / snack",
      "Coding Session 2",
      "Lunch and relax",
      "Drawing Session 2",
      "Personal tasks or errands",
      "Optional learning (video/book)",
      "Dinner and unwind",
      "Free time (social/planning)",
      "Project updates or goal check",
      "Prepare for bed",
      "Sleep"
    ];

    const todoList = document.getElementById('todo-list');

    tasks.forEach((task, index) => {
      const taskId = `task${index + 1}`;
      const isChecked = localStorage.getItem(taskId) === 'true';

      const listItem = document.createElement('li');
      listItem.className = "flex items-center";

      listItem.innerHTML = `
        <input type="checkbox" id="${taskId}" class="w-5 h-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-400" ${isChecked ? 'checked' : ''}>
        <label for="${taskId}" class="ml-3 text-gray-800">${task}</label>
      `;

      todoList.appendChild(listItem);

      const checkbox = listItem.querySelector('input');
      checkbox.addEventListener('change', () => {
        localStorage.setItem(taskId, checkbox.checked);
      });
    });

    // Clear all button functionality
    document.getElementById('clearAll').addEventListener('click', () => {
      tasks.forEach((_, index) => {
        const taskId = `task${index + 1}`;
        localStorage.removeItem(taskId);
        const checkbox = document.getElementById(taskId);
        if (checkbox) checkbox.checked = false;
      });
    });
  </script>
</body>
</html>