Skip to content

Commit ec57508

Browse files
skyforge-glitchskyforge-glitch
authored
Add files via upload
Added content of the project.
0 parents  commit ec57508

4 files changed

Lines changed: 763 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
2+
# 📝 Smart Task Manager (Vanilla JavaScript)
3+
4+
A **modern, lightweight, and fully client-side Task Manager** built using **HTML, CSS, and Vanilla JavaScript**, focusing on **clean UX, smooth animations, and correct state management** — without any frameworks.
5+
6+
This project demonstrates **real-world frontend engineering practices**, including controlled animations, persistent storage, inline editing, undo actions, and time-based task expiry.
7+
8+
---
9+
10+
## 📌 Table of Contents
11+
12+
1. [Project Overview](#project-overview)
13+
2. [Live Features](#live-features)
14+
3. [UX & Design Philosophy](#ux--design-philosophy)
15+
4. [Project Structure](#project-structure)
16+
5. [Core Functionalities Explained](#core-functionalities-explained)
17+
6. [Animation Architecture (Important)](#animation-architecture-important)
18+
7. [Data Persistence](#data-persistence)
19+
8. [Edge Cases Handled](#edge-cases-handled)
20+
9. [Installation & Usage](#installation--usage)
21+
10. [Technology Stack](#technology-stack)
22+
11. [Future Enhancements](#future-enhancements)
23+
12. [Learning Outcomes](#learning-outcomes)
24+
13. [Screenshots](#screenshots)
25+
14. [License](#license)
26+
27+
---
28+
29+
## Project Overview
30+
31+
**Smart Task Manager** is a feature-rich to-do application that prioritizes:
32+
33+
- ✨ User Experience
34+
- 🧠 Correct state handling
35+
- 🎯 Minimal yet powerful UI
36+
- ⚡ Zero dependencies
37+
38+
It is **not a beginner CRUD app** — instead, it showcases how a real-world app behaves with **isolated animations, undo functionality, and persistent state**.
39+
40+
---
41+
42+
## Live Features
43+
44+
### 🟢 Task Creation
45+
- Add tasks using button click or `Enter` key
46+
- First letter auto-capitalized
47+
- Button disabled when input is empty
48+
49+
### 🟢 Task Completion
50+
- Custom animated checkbox
51+
- Smooth visual feedback on completion
52+
- Strike-through styling with fade effect
53+
54+
### 🟢 Inline Editing
55+
- Double-click any task to edit
56+
- `Enter` → Save
57+
- `Escape` / Blur → Cancel
58+
59+
### 🟢 Delete with Undo
60+
- Smooth delete animation
61+
- Undo toast appears for **5 seconds**
62+
- Task restored if undo is clicked
63+
64+
### 🟢 Task Expiry System
65+
- Tasks older than **24 hours** automatically move to **Expired Zone**
66+
- Expired tasks can be restored with one click
67+
68+
### 🟢 Persistent Storage
69+
- All tasks saved in `localStorage`
70+
- Data survives page refresh and browser restart
71+
72+
---
73+
74+
## UX & Design Philosophy
75+
76+
This app follows **real product UX rules**:
77+
78+
- ❌ No list blinking on re-render
79+
- ✅ Only affected items animate
80+
- ❌ No accidental empty submissions
81+
- ✅ Keyboard-friendly interactions
82+
- ✅ Clear visual hierarchy
83+
84+
Animations are **intentional**, not decorative.
85+
86+
---
87+
88+
## Project Structure
89+
90+
```text
91+
├── index.html # App structure
92+
├── style.css # Styling, animations, themes
93+
├── script.js # Application logic & state
94+
└── README.md # Documentation
95+
```
96+
97+
---
98+
99+
## Core Functionalities Explained
100+
101+
### ➕ Add Task Flow
102+
1. User types task
103+
2. Button activates dynamically
104+
3. Task object created with timestamp
105+
4. State updated → UI re-rendered
106+
5. Only new task animates
107+
108+
---
109+
110+
### ✔ Toggle Completion
111+
- Task state updated immutably
112+
- Only toggled task pulses
113+
- No full list re-animation
114+
115+
---
116+
117+
### ✏ Inline Edit System
118+
- Replaces task text with input field
119+
- Preserves task ID and timestamp
120+
- Ensures clean cancel/save logic
121+
122+
---
123+
124+
### 🗑 Delete with Undo
125+
- Task visually fades out
126+
- Temporarily stored in memory
127+
- Toast provides recovery window
128+
129+
---
130+
131+
## Animation Architecture (Important)
132+
133+
**Problem Solved:**
134+
Preventing full list animation on every re-render.
135+
136+
**Solution Used:**
137+
- No default animation on `<li>`
138+
- Animation classes applied conditionally:
139+
- `animate-in` → new task
140+
- `animate-check` → toggled task
141+
- Animation flags reset after render
142+
143+
This mirrors **React-style diffing behavior**, achieved manually.
144+
145+
---
146+
147+
## Data Persistence
148+
149+
- Uses browser `localStorage`
150+
- Stores complete task objects
151+
- No backend required
152+
- Safe JSON serialization
153+
154+
---
155+
156+
## Edge Cases Handled
157+
158+
✔ Empty input submission
159+
✔ Rapid add/delete actions
160+
✔ Undo timeout cleanup
161+
✔ Editing with empty value
162+
✔ Checkbox + edit conflicts
163+
✔ Expired task restoration
164+
165+
---
166+
167+
## Installation & Usage
168+
169+
### Option 1: Local Run
170+
```bash
171+
git clone <repo-url>
172+
cd smart-task-manager
173+
open index.html
174+
```
175+
176+
### Option 2: Direct
177+
Just open `index.html` in any modern browser.
178+
179+
No build steps. No dependencies.
180+
181+
---
182+
183+
## Technology Stack
184+
185+
| Layer | Tech Used |
186+
|-------------|------------------------|
187+
| Markup | HTML5 |
188+
| Styling | CSS3 (Flexbox, Animations) |
189+
| Logic | Vanilla JavaScript (ES6+) |
190+
| Storage | Browser LocalStorage |
191+
| Icons | Font Awesome |
192+
193+
---
194+
195+
## Future Enhancements
196+
197+
- 🔃 Drag & reorder tasks
198+
- 🌙 Dark mode (system-aware)
199+
- 🚦 Priority levels
200+
- 🔔 Due dates & reminders
201+
- 📊 Task analytics
202+
203+
---
204+
205+
## Learning Outcomes
206+
207+
This project demonstrates:
208+
209+
- Advanced DOM manipulation
210+
- State-driven UI updates
211+
- Animation isolation techniques
212+
- UX-driven frontend decisions
213+
- Clean, maintainable vanilla JS code
214+
215+
---
216+
217+
## License
218+
219+
This project is open-source and free to use for learning and portfolio purposes.
220+
221+
---
222+
223+
## 🙌 Final Note
224+
225+
> This project proves that **frameworks are tools — not crutches**.
226+
> Clean thinking + Vanilla JS can still build production-quality interfaces.
227+
228+
Built with ❤️ and discipline.
229+
230+
---

‎index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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>Task Manager</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1>Task Manager</h1>
13+
<div class="input-group">
14+
<input type="text" id="taskInput" placeholder="Add a new task...">
15+
<button id="addBtn">
16+
<i class="fa-solid fa-plus"></i> Add Task
17+
</button>
18+
</div>
19+
20+
<div class="section">
21+
<h3>Active Tasks</h3>
22+
<ul id="taskList"></ul>
23+
</div>
24+
25+
<div class="section">
26+
<h3 class="expired-title">Expired Zone (Older than 24h)</h3>
27+
<ul id="expiredList"></ul>
28+
</div>
29+
</div>
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

0 commit comments

Comments
 (0)