codespaces-blank/study.html at 715e87e75071c8f381010eb06159003989a027ff · github/codespaces-blank · 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
  <head>
    <title>The study planner</title>
  <style>
    body {
      font-family: Arial;
      background: linear-gradient(to right, #4facfe, #00f2fe);
      text-align: center;
      color: white;
    }
    h1 {
      margin-top: 20px;
    }
    .container {
      background: white;
      color: black;
      width: 90%;
      max-width: 400px;
      margin: auto;
      padding: 20px;
      border-radius: 10px;
    }
    input {
      width: 70%;
      padding: 8px;
      margin: 5px;
    }
    button {
      padding: 8px 12px;
      background: #4facfe;
      border: none;
      color: white;
      cursor: pointer;
      border-radius: 5px;
    }
    li {
      list-style: none;
      padding: 8px;
      margin: 5px;
      background: #f1f1f1;
      border-radius: 5px;
      cursor: pointer;
    }
    .completed {
      text-decoration: line-through;
      background: lightgreen;
    }
    .progress {
      margin-top: 15px;
      font-weight: bold;
    }
  </style>
                                                            </head>

                                                            <body>

                                                            <h1>📚 Smart Study Planner</h1>
                                        <div class="container">
                                                    <input type="text" id="taskInput" placeholder="Enter your task">
                                                        <button onclick="addTask()">Add</button>
                                                <ul id="taskList"></ul>

                                                    <div class="progress" id="progressText">
                                                            Progress: 0%
                                                                </div>
                                                                </div>
                                                <script>
                                                            let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
                                                            function saveTasks() {
                                                                        localStorage.setItem("tasks", JSON.stringify(tasks));
                                                                            }
                                                            function renderTasks() {
                                                                        const list = document.getElementById("taskList");
                                                                                list.innerHTML = "";

                                                                                        let completed = 0;
                                                            tasks.forEach((task, index) => {
                                                                            const li = document.createElement("li");
                                                                                        li.textContent = task.name;
                                                            if (task.done) {
                                                                                li.classList.add("completed");
                                                                                                completed++;
                                                            }
                                                                                                         li.onclick = () => {
                                                                                                                                                    tasks[index].done = !tasks[index].done;
                                                                                                                                                saveTasks();
                                                                                                                                                                renderTasks();
                                                                                                                                                                            };
                                                                                                                                                                            list.appendChild(li);
                                                            });

                                                                                                                                                let percent = tasks.length === 0 ? 0 :
                                                                                                                                                            Math.round((completed / tasks.length) * 100);
                                                                                                                                                            document.getElementById("progressText").textContent =
                                                                                                                                                            "Progress: " + percent +"%" ;
                                                                                                                                                                            }

                                                                                                                                                                            function addTask() {
                                                                                                                                                                                  const input = document.getElementById("taskInput");
                                                                                                                                                                                  const name = input.value.trim();
                                                                                                                                                                                  if (!name) return;
                                                                                                                                                                                  tasks.push({ name: name, done: false });
                                                                                                                                                                                  saveTasks();
                                                                                                                                                                                  input.value = "";
                                                                                                                                                                                  renderTasks();
                                                                                                                                                                            }

                                                                                                                                                                            // initialize
                                                                                                                                                                            renderTasks();
                                                                                                                                                                          </script>

                                                                                                                                                                                                                          </body>
                                                                                                                                                                                                                          </html>