An open API service indexing awesome lists of open source software.

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.

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
Screenshot 2024-07-29 at 12 17 39 PM

## 📥 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.