Skip to content

Commit

Permalink
Merge pull request #563 from Edasgh/to-do-list
Browse files Browse the repository at this point in the history 
"to-do-list added"
  • Loading branch information
@beRajeevKumar
beRajeevKumar authored Oct 25, 2024
2 parents 4ef951d + a6b8e53 commit 4147b15
Show file tree
Hide file tree
Showing 7 changed files with 757 additions and 3 deletions.
92 changes: 92 additions & 0 deletions 29-to-do-list/Readme.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
# To-Do List App

A simple and intuitive To-Do List app that allows users to manage their tasks. Users can add, edit, and delete tasks, with options for setting priority and tracking the progress of each task. Tasks are organized into two categories: "School/Work" and "Personal." This app uses local storage to persist tasks, so they remain even after the page is refreshed.

## Live link : https://a-minimal-todo-using-vanilla-js.netlify.app/

## Features

- **Add New Tasks:** Users can add new tasks with a title, category ("School/Work" or "Personal"), priority (High, Medium, Low), and initial status (Not Started).
- **Edit Tasks:** Tasks can be edited to update their content, priority, or status (Not Started, In Progress, Done).
- **Delete Tasks:** Users can delete tasks that are no longer needed.
- **Organize by Category:** Tasks are displayed in two separate sections: "Work / School Tasks" and "Personal Tasks."
- **Local Storage Persistence:** Tasks are saved in the browser's local storage to persist across sessions.

## Demo Video
![Demo Video](demo_video/demo.mp4)

## Technologies Used

- **HTML:** The structure of the app.
- **CSS:** Styling for the app.
- **JavaScript:** Functionality for task management (adding, editing, deleting) and local storage handling.
- **Font Awesome:** Icons used for buttons.

## Getting Started

### Prerequisites

To run this project, you will need a modern web browser that supports local storage.

### Installation

1. Clone this repository to your local machine:
```bash
git clone https://github.com/your-username/todo-list-app.git
```

2. Open the project directory:
```bash
cd todo-list-app
```

3. Open the `index.html` file in your browser:
```bash
open index.html
```

### Usage

1. Click the "Add a Todo" button to open the modal and add a new task.
2. Fill in the task details, including the title, category, and priority, then click "Add."
3. Tasks will appear in the "Work / School Tasks" or "Personal Tasks" section based on the selected category.
4. Click the edit (pencil) icon to modify a task, or the delete (trash can) icon to remove it.
5. The app will save your tasks in the browser's local storage, so they will still be there if you refresh the page.

## Code Structure

- `index.html`: The main HTML file that contains the app's layout and structure.
- `styles.css`: The CSS file for styling the app, including layout, buttons, and task appearance.
- `script.js`: The JavaScript file for handling app functionality such as task management, local storage, and modal display.

## Future Enhancements

Potential improvements to this project:
- **Add Due Dates:** Allow users to set due dates for tasks.
- **Search and Filter:** Enable task searching and filtering by priority, status, or category.
- **Drag and Drop:** Implement drag-and-drop functionality to rearrange tasks.
- **User Authentication:** Add user accounts to support multiple users with individual task lists.

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request or open an issue to improve the app.

1. Fork the repository.
2. Create a new branch for your feature:
```bash
git checkout -b feature-name
```
3. Commit your changes:
```bash
git commit -m "Add feature"
```
4. Push the branch:
```bash
git push origin feature-name
```
5. Open a Pull Request.

## License

This project is licensed under the MIT License. See the `LICENSE` file for more information.

Binary file added 29-to-do-list/demo_video/demo.mp4
View file
Binary file not shown.
Binary file added 29-to-do-list/design/desktop-design.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
121 changes: 121 additions & 0 deletions 29-to-do-list/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Todo App</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="./styles.css" />
<!-- Fontawesome link -->
<script
src="https://kit.fontawesome.com/a508d8e351.js"
crossorigin="anonymous"
></script>
</head>
<body>
<main>
<!-- Button to open the "Add Todo" modal -->
<button class="open-add-todo-modal">
Add a Todo&nbsp;<i class="fa-solid fa-plus"></i>
</button>
<!-- Here starts add todo modal -->
<div class="add-todo-modal">
<form id="add-todo_form">
<h2>Add a Todo</h2>
<div class="options-container">
<!-- Mode selection -->
<div class="option">
<label for="s-mode">Select Mode</label>
<br />
<select name="mode" id="s-mode" class="s-mode" required>
<option value="School/Work">School/Work</option>
<option value="Personal" selected>Personal</option>
</select>
</div>
<!-- Priority selection -->
<div class="option">
<label for="s-p">Priority</label>
<br />
<select name="priority" id="s-p" class="s-p" required>
<option value="High">High</option>
<option value="Medium">Medium</option>
<option value="Low" selected>Low</option>
</select>
</div>
</div>
<!-- Todo description input -->
<input
type="text"
name="t-i"
id="t-i"
class="todo_input"
placeholder="Add a todo"
required
/>
<!-- Status display (disabled by default) -->
<input
type="text"
name="status"
id="status"
class="status"
value="⬤ Not Started"
disabled
size="8"
/>
<!-- Submit button -->
<button type="submit" class="add-todo">Add</button>
</form>
<!-- Close modal icon -->
<i class="fa-solid fa-xmark cross-icon"></i>
</div>

<!-- Here starts edit todo modal -->

<div class="edit-todo-modal">
<form id="edit-todo_form">
<h2>Edit</h2>
<div class="options-container">
<div class="option" style="text-align: center;">
<label for="edit_s-p">Priority</label>
<br />
<select name="priority" id="edit_s-p" class="edit_s-p">
<option value="High">High</option>
<option value="Medium">Medium</option>
<option value="Low">Low</option>
</select>
</div>
</div>
<input type="text" name="t-i" id="edit_t-i" class="edit-todo_input" />
<select name="status" id="edit_status" class="edit-status">
<option value="⬤ Not Started">⬤ Not Started</option>
<option value="⬤ In Progress">⬤ In Progress</option>
<option value="⬤ Done">⬤ Done</option>
</select>
<!-- Submit button -->
<button type="button" class="edit-todo edit-todo-btn">Edit </i>
</button>
</form>
<!-- Close modal button -->
<i class="fa-solid fa-xmark cross-icon"></i>
</div>
<!-- Tasks Container -->
<div class="tasks-container">
<!-- work or school tasks -->
<div class="work">
<h2>&nbsp;&nbsp;Work / School Tasks</h2>
<div class="tasks">

</div>
</div>
<!-- personal tasks -->
<div class="personal">
<h2>&nbsp;&nbsp;Personal Tasks</h2>
<div class="tasks">

</div>
</div>
</div>
</main>
<script src="./script.js"></script>
</body>
</html>
Loading

0 comments on commit 4147b15

Please sign in to comment.