vue-task-tracker/index.html at main · RIYA20063/vue-task-tracker · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Persistent Task Tracker</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        :root { --vue-green: #42b883; --vue-blue: #35495e; }
        body { font-family: 'Inter', sans-serif; background: #eef2f3; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
        #app { background: white; width: 100%; max-width: 400px; padding: 2rem; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        h2 { color: var(--vue-blue); text-align: center; }
        .input-group { display: flex; gap: 10px; margin-bottom: 20px; }
        input { flex: 1; padding: 12px; border: 2px solid #ddd; border-radius: 8px; outline: none; }
        input:focus { border-color: var(--vue-green); }
        .add-btn { background: var(--vue-green); color: white; border: none; padding: 0 20px; border-radius: 8px; cursor: pointer; font-weight: bold; }
        ul { list-style: none; padding: 0; }
        li { background: #fff; border: 1px solid #eee; margin-bottom: 10px; padding: 12px; display: flex; justify-content: space-between; align-items: center; border-radius: 8px; }
        .task-text { flex: 1; cursor: pointer; }
        .done { text-decoration: line-through; color: #888; }
        .delete-btn { background: #ff7675; color: white; border: none; width: 25px; height: 25px; border-radius: 50%; cursor: pointer; }
    </style>
</head>
<body>

<div id="app">
    <h2>✅ Task Master</h2>

    <div class="input-group">
        <input v-model="newTask" @keyup.enter="addTask" placeholder="What's next?">
        <button class="add-btn" @click="addTask">Add</button>
    </div>

    <ul>
        <li v-for="(task, index) in tasks" :key="task.id">
            <span class="task-text" :class="{ done: task.completed }" @click="toggleTask(task)">
                {{ task.text }}
            </span>
            <button class="delete-btn" @click="removeTask(index)">✕</button>
        </li>
    </ul>

    <p v-if="tasks.length === 0" style="text-align: center; color: #999;">No tasks found!</p>
</div>

<script>
    const { createApp, ref, watch, onMounted } = Vue

    createApp({
        setup() {
            const newTask = ref('')
            const tasks = ref([])

            // 1. LOAD: When the app starts, get data from LocalStorage
            onMounted(() => {
                const savedTasks = localStorage.getItem('my-midnight-tasks')
                if (savedTasks) {
                    tasks.value = JSON.parse(savedTasks)
                }
            })

            // 2. SAVE: Watch the 'tasks' array. If it changes, save to LocalStorage
            watch(tasks, (newVal) => {
                localStorage.setItem('my-midnight-tasks', JSON.stringify(newVal))
            }, { deep: true }) // 'deep' is needed to watch changes INSIDE the objects

            const addTask = () => {
                if (newTask.value.trim() !== '') {
                    tasks.value.push({ id: Date.now(), text: newTask.value, completed: false })
                    newTask.value = ''
                }
            }

            const toggleTask = (task) => {
                task.completed = !task.completed
            }

            const removeTask = (index) => {
                tasks.value.splice(index, 1)
            }

            return { newTask, tasks, addTask, removeTask, toggleTask }
        }
    }).mount('#app')
</script>

</body>
</html>