https://github.com/chiragsdev/task-manager
https://github.com/chiragsdev/task-manager
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/chiragsdev/task-manager
- Owner: chiragsdev
- Created: 2024-12-21T10:22:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-21T10:23:55.000Z (over 1 year ago)
- Last Synced: 2025-08-10T13:33:20.137Z (11 months ago)
- Language: JavaScript
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
# Task Manager Application
This is a simple and interactive Task Manager web application. It allows users to add, mark as complete, delete tasks, and filter tasks (All, Completed, Pending) using a dropdown. The project is implemented with HTML, CSS, JavaScript, and jQuery.
---
## Features
### Key Features:
1. **Add Tasks**:
- Users can input tasks and add them to the list.
- Includes validation to ensure no empty tasks are added.
2. **Mark Tasks as Complete**:
- Toggle a task's status to "completed" with a strike-through style.
3. **Delete Tasks**:
- Remove tasks from the list with a delete button.
4. **Filter Tasks**:
- Filter tasks by their status: All, Completed, or Pending.
- Dropdown is implemented using jQuery for dynamic filtering.
5. **Smooth Animations**:
- Add tasks with a fade-in effect.
- Remove tasks with a fade-out effect.
6. **Responsive Design**:
- Works seamlessly on desktop and mobile devices.
---
## Prerequisites
Ensure you have the following installed:
- **Web Browser**: Modern browser (e.g., Chrome, Firefox, Edge).
- **Code Editor** (Optional): Visual Studio Code or any text editor.
---
## How to Run the Project Locally
1. **Clone the Repository**:
```bash
git clone https://github.com/your-username/task-manager.git
```
2. **Navigate to the Project Directory**:
```bash
cd task-manager
```
3. **Open the Project in a Browser**:
- Locate the `index.html` file in the project folder.
- Double-click to open it in your default web browser.
Alternatively, you can right-click on the file and select "Open With" to choose a specific browser.
4. **Start Using the Task Manager**:
- Add tasks, mark them as complete, delete tasks, or filter them using the dropdown.
---
## Project Structure
```
|-- index.html # Main HTML file
|-- styles.css # Contains CSS for styling
|-- script.js # Contains JavaScript for functionality
|-- README.md # Project documentation
```
---
## Key Files
### `script.js`
- Implements core features such as adding, marking, deleting, and filtering tasks.
- Uses both JavaScript and jQuery for smooth animations and interactivity.
### `styles.css`
- Contains styles for a calm, modern, and user-friendly interface.
---