https://github.com/syuvraj19/to-do-list-app
A sleek and functional to-do list app for efficient task management with features like task prioritization, due dates, filtering, search, dark mode, and tab management.
https://github.com/syuvraj19/to-do-list-app
css css3 html html5 javascript to-do-app to-do-list
Last synced: 7 months ago
JSON representation
A sleek and functional to-do list app for efficient task management with features like task prioritization, due dates, filtering, search, dark mode, and tab management.
- Host: GitHub
- URL: https://github.com/syuvraj19/to-do-list-app
- Owner: syuvraj19
- Created: 2024-07-29T06:34:16.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-29T06:48:30.000Z (about 1 year ago)
- Last Synced: 2025-01-18T04:42:49.603Z (9 months ago)
- Topics: css, css3, html, html5, javascript, to-do-app, to-do-list
- Language: JavaScript
- Homepage: https://to-do-list-appjs.netlify.app/
- Size: 9.77 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📝 To-Do List App
Welcome to the **To-Do List App**! This project is a sleek and functional to-do list application designed to help you manage your tasks efficiently. With a clean interface and a host of powerful features, staying organized has never been easier!
## 🚀 Features
- **Add Tasks:** Quickly add new tasks with priority levels and due dates.
- **Task Prioritization:** Set priority levels (Low, Medium, High) for your tasks to stay on top of what's important.
- **Due Dates:** Assign due dates to your tasks to keep track of deadlines.
- **Task Filtering:** Easily filter tasks based on priority levels.
- **Search Functionality:** Search for specific tasks by name for quick access.
- **Dark Mode:** Toggle between light and dark mode for a better user experience.
- **Tab Management:** Organize tasks with separate tabs for Personal and Professional tasks.## 📸 Screenshots
### Dark Mode
## 📥 Installation
Follow these steps to get started with the To-Do List App:
1. **Clone the repository:**
```bash
git clone https://github.com/your-username/todo-list-app.git
```2. **Navigate to the project directory:**
```bash
cd todo-list-app
```3. **Open `index.html` in your web browser to view the app.**
## 🛠️ Usage
Here's how to make the most of your To-Do List App:
1. **Add a Task:**
- Enter the task description in the input field.
- Select a due date from the calendar.
- Choose a priority level (Low, Medium, High) from the dropdown menu.
- Click the "ADD" button to add the task to your list.2. **Complete a Task:**
- Click the "Completed" button next to the task to mark it as done.3. **Remove a Task:**
- Click the "Remove Task" button next to the task to delete it from your list.4. **Filter Tasks:**
- Use the dropdown menu to filter tasks by their priority levels.5. **Search Tasks:**
- Enter a search term in the search box to quickly find specific tasks.6. **Toggle Dark Mode:**
- Click the dark mode toggle switch to switch between light and dark mode, enhancing your viewing experience based on your preference.## 🧰 Technologies Used
- **HTML5:** For the structure and layout of the app.
- **CSS3:** For styling the app, including dark mode.
- **JavaScript:** For dynamic behavior and functionality.
- **LocalStorage:** To persist tasks between sessions.