Basic-ToDo-webapp/index.html at main · Deepakdumka1/Basic-ToDo-webapp · 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaskFlow - Modern To-Do App</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="app-wrapper">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class="fas fa-check-circle"></i>
                    <span>TaskFlow</span>
                </div>
            </div>

            <nav class="sidebar-nav">
                <div class="nav-item active" data-filter="all">
                    <i class="fas fa-inbox"></i>
                    <span>All Tasks</span>
                </div>
                <div class="nav-item" data-filter="pending">
                    <i class="fas fa-circle"></i>
                    <span>Pending</span>
                </div>
                <div class="nav-item" data-filter="completed">
                    <i class="fas fa-check"></i>
                    <span>Completed</span>
                </div>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="main-content">
            <!-- Header -->
            <header class="app-header">
                <div class="header-content">
                    <h1>My Tasks</h1>
                    <p class="header-subtitle">Stay organized and productive</p>
                </div>
                <div class="header-stats">
                    <div class="stat">
                        <span class="stat-value" id="totalCount">0</span>
                        <span class="stat-label">Total</span>
                    </div>
                    <div class="stat">
                        <span class="stat-value" id="pendingCount">0</span>
                        <span class="stat-label">Pending</span>
                    </div>
                    <div class="stat">
                        <span class="stat-value" id="completedCount">0</span>
                        <span class="stat-label">Done</span>
                    </div>
                </div>
            </header>

            <!-- Add Task Section -->
            <section class="add-task-container">
                <div class="input-wrapper">
                    <input
                        type="text"
                        id="taskInput"
                        class="task-input"
                        placeholder="Add a new task..."
                        maxlength="200"
                    >
                    <button id="addTaskBtn" class="add-btn">
                        <i class="fas fa-plus"></i>
                        <span>Add Task</span>
                    </button>
                </div>
            </section>

            <!-- Tasks Display -->
            <section class="tasks-section">
                <!-- Pending Tasks -->
                <div class="tasks-group">
                    <div class="group-header">
                        <h2><i class="fas fa-circle"></i> Pending Tasks</h2>
                        <span class="group-count" id="pendingTaskCount">0</span>
                    </div>
                    <div class="tasks-list" id="pendingTasksList">
                        <div class="empty-state">
                            <i class="fas fa-inbox"></i>
                            <p>No pending tasks</p>
                            <small>Add a task to get started</small>
                        </div>
                    </div>
                </div>

                <!-- Completed Tasks -->
                <div class="tasks-group">
                    <div class="group-header">
                        <h2><i class="fas fa-check-circle"></i> Completed Tasks</h2>
                        <span class="group-count" id="completedTaskCount">0</span>
                    </div>
                    <div class="tasks-list" id="completedTasksList">
                        <div class="empty-state">
                            <i class="fas fa-trophy"></i>
                            <p>No completed tasks yet</p>
                            <small>Complete a task to see it here</small>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <!-- Edit Modal -->
    <div id="editModal" class="modal">
        <div class="modal-overlay"></div>
        <div class="modal-content">
            <div class="modal-header">
                <h3>Edit Task</h3>
                <button class="modal-close" onclick="closeEditModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <input
                    type="text"
                    id="editTaskInput"
                    class="modal-input"
                    placeholder="Edit your task..."
                    maxlength="200"
                >
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeEditModal()">Cancel</button>
                <button class="btn btn-primary" onclick="saveEditedTask()">Save Changes</button>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div id="deleteModal" class="modal">
        <div class="modal-overlay"></div>
        <div class="modal-content modal-danger">
            <div class="modal-header">
                <h3>Delete Task?</h3>
                <button class="modal-close" onclick="closeDeleteModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this task? This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeDeleteModal()">Cancel</button>
                <button class="btn btn-danger" onclick="confirmDelete()">Delete</button>
            </div>
        </div>
    </div>

    <!-- Notification -->
    <div id="notification" class="notification"></div>

    <script src="script.js"></script>
</body>
</html>