A simple yet powerful To-Do List application built with HTML, CSS, and JavaScript. This application allows users to manage their tasks efficiently with features like adding, editing, and deleting notes. It also supports dark and light themes, search functionality, and categorization of tasks into Incomplete, Completed, and All.
- Easily add new tasks to your to-do list.
- Input field with a placeholder for quick note-taking.
- TypeScript Exclusive Feature: Use the keyboard shortcut
Ctrl + Alt + N(orCtrl + Alt + n) to quickly open the "Add Note" dialog.
- Edit existing notes in place without deleting and re-adding them.
- Simple and intuitive interface for quick updates.
- Remove tasks you no longer need with a single click.
- Switch between dark and light themes based on your preference.
- Theme preference is saved in
localStoragefor persistence across sessions.
- Quickly find tasks using the search bar.
- Real-time filtering of notes as you type.
- Organize tasks into three categories:
- Incomplete: Tasks that are yet to be completed.
- Completed: Tasks that have been marked as done.
- All: Display all tasks regardless of their status.
- The application is designed to work seamlessly on both desktop and mobile devices.
- The application now includes a TypeScript version for improved type safety and maintainability.
- JavaScript version is also available for those who prefer it.
- Modules are used for better code organization and reusability.
The application in light mode with a clean and minimal design.
The application in dark mode for a sleek and modern look.
Adding a new task to the to-do list.
Editing an existing task in place.
Deleting a task with a single click.
NOTE #5 is deleted
Searching for tasks using the search bar.
Organizing tasks into Incomplete, Completed, and All categories.
-
Add a Note:
- Click the "Add Note" button.
- Enter your task in the textarea and press Enter or click Save.
- TypeScript Exclusive: Use the keyboard shortcut
Ctrl + Alt + N(orCtrl + Alt + n) to quickly open the "Add Note" dialog.
-
Edit a Note:
- Click the Edit button (pen icon) next to the task you want to edit.
- Modify the text and press Enter or click Save.
-
Delete a Note:
- Click the Delete button (trash icon) next to the task you want to remove.
-
Switch Themes:
- Use the Theme Toggle button to switch between dark and light modes.
-
Search for Tasks:
- Type in the search bar to filter tasks in real-time.
-
Categorize Tasks:
- Use the dropdown menu to filter tasks by Incomplete, Completed, or All.
- HTML: Structure of the application.
- CSS: Styling and theming.
- JavaScript: Logic and functionality.
- TypeScript: Added for type safety and improved maintainability (optional).
- ES Modules: Used for better code organization and reusability.
- LocalStorage: Persisting notes and theme preferences.
The TypeScript version of the application includes additional features and improvements:
- Static Type Checking: Catch errors during development for more robust code.
- Keyboard Shortcut: Use
Ctrl + Alt + N(orCtrl + Alt + n) to quickly add a new note. - ES Modules: Better code organization with
import/exportsyntax.
Note: The keyboard shortcut (
Ctrl + Alt + N) is exclusive to the TypeScript version and is not available in the JavaScript version.
Contributions are welcome! If you'd like to contribute, please follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature/YourFeatureName). - Commit your changes (
git commit -m 'Add some feature'). - Push to the branch (
git push origin feature/YourFeatureName). - Open a pull request.
For any questions or feedback, feel free to reach out:
- Email: ayanasamuel8@gmail.com
- GitHub: ayanasamuel8
Enjoy managing your tasks with this simple and elegant To-Do List application! 🚀