https://github.com/abhishekkulkarni360/to-do-app
Responsive To-Do List app with CRUD, localStorage, drag-and-drop, PDF export, and dark mode using vanilla JS, HTML, CSS.
https://github.com/abhishekkulkarni360/to-do-app
bootstrap crud css3 html5 javascript localstorage responsive task-manager to-do-list-app vanilla-js
Last synced: 3 months ago
JSON representation
Responsive To-Do List app with CRUD, localStorage, drag-and-drop, PDF export, and dark mode using vanilla JS, HTML, CSS.
- Host: GitHub
- URL: https://github.com/abhishekkulkarni360/to-do-app
- Owner: AbhishekKulkarni360
- License: mit
- Created: 2025-06-27T06:47:18.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-27T08:08:48.000Z (about 1 year ago)
- Last Synced: 2025-06-27T09:23:29.548Z (about 1 year ago)
- Topics: bootstrap, crud, css3, html5, javascript, localstorage, responsive, task-manager, to-do-list-app, vanilla-js
- Language: JavaScript
- Homepage:
- Size: 8.79 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ✅ To-Do List Web Application
A feature-rich, responsive, and user-centric **To-Do List Web App** built using **vanilla JavaScript**, **HTML5**, and **CSS3**. This application supports full **CRUD (Create, Read, Update, Delete)** operations, task filtering, sorting, and persistent storage using `localStorage`.
Designed for both usability and aesthetics, the app enables users to manage tasks efficiently, with accessibility and responsiveness in mind.
---
## 🔗 GitHub Repository
> [github.com/AbhishekKulkarni360](https://github.com/AbhishekKulkarni360/To-Do-app)
---
## 📌 Features
### ✅ Core Functionality (CRUD)
- **Create**: Add new tasks with optional due dates.
- **Read**: Dynamically display the task list on page load using `localStorage`.
- **Update**: Edit existing tasks, including titles and due dates.
- **Delete**: Remove individual tasks from the list and `localStorage`.
### 🧠 Enhanced Task Management
- **Due Date Handling**: Visually highlights tasks as:
- Overdue (past)
- Due Today
- Upcoming (future)
- **Sorting & Filtering**: Organize tasks based on due date or completion status.
- **Drag-and-Drop**: Reorder tasks manually via intuitive drag-and-drop.
- **Export to PDF**: Generate a downloadable task list using the [`jsPDF`](https://github.com/parallax/jsPDF) library.
### 💡 UI/UX & Accessibility
- Responsive design using **Bootstrap 5** and custom **CSS3**.
- Toggle between **Dark Mode** and **Light Mode**.
- Smooth transitions and animations for better interactivity.
- Keyboard accessibility and ARIA-friendly navigation focus states.
---
## 🏗️ Tech Stack
| Technology | Purpose |
|----------------|----------------------------------|
| **HTML5** | Markup structure |
| **CSS3** | Styling, responsiveness, themes |
| **Bootstrap** | Grid system, responsive UI |
| **JavaScript** | Application logic (vanilla JS) |
| **localStorage** | Persistent task storage |
| **jsPDF** | PDF export functionality |
---
## 🖼️ Screenshots
# Light mode
# Dark mode
# Downloaded PDF
## 🚀 Getting Started
You can run this project locally in just a few steps:
### 🛠️ Prerequisites
- A modern web browser (Chrome, Firefox, Edge, etc.)
- No server or frameworks required (client-side only)
### 📦 Installation
```bash
git clone https://github.com/AbhishekKulkarni360/todo-list-web-app.git
cd todo-list-web-app
```
### 🔮 Future Improvements
- Add category tags and filters
- User authentication and cloud sync
- Calendar integration
- Real-time notifications or reminders
- PWA support for offline usage
---
### 🧑💻 Author
**Abhishek Kulkarni**
GitHub: [@AbhishekKulkarni360](https://github.com/AbhishekKulkarni360)
---
### 📄 License
This project is licensed under the [MIT License](LICENSE).