https://github.com/anandpilania/todos
Collection of ToDo apps developed for educational purposes. These apps demonstrate different web development concepts and frameworks, including HTML, CSS, JavaScript, and various libraries and frameworks. Each version of the app showcases a different approach to building and managing tasks.
https://github.com/anandpilania/todos
angularjs backbonejs bootstrap es6-javascript jquery knockoutjs php reactjs todo vanilla-js vuejs
Last synced: 2 months ago
JSON representation
Collection of ToDo apps developed for educational purposes. These apps demonstrate different web development concepts and frameworks, including HTML, CSS, JavaScript, and various libraries and frameworks. Each version of the app showcases a different approach to building and managing tasks.
- Host: GitHub
- URL: https://github.com/anandpilania/todos
- Owner: AnandPilania
- Created: 2023-08-18T15:56:57.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-20T16:01:28.000Z (almost 3 years ago)
- Last Synced: 2025-05-10T21:02:10.638Z (about 1 year ago)
- Topics: angularjs, backbonejs, bootstrap, es6-javascript, jquery, knockoutjs, php, reactjs, todo, vanilla-js, vuejs
- Language: HTML
- Homepage:
- Size: 36.1 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ToDo App
This is a collection of ToDo apps developed for educational purposes. These apps demonstrate different web development concepts and frameworks, including HTML, CSS, JavaScript, and various libraries and frameworks. Each version of the app showcases a different approach to building and managing tasks.
## Available Versions
### Basic JavaScript Versions
1|2|3|4. **Vanilla JS - Approach 1/2/3/4:** Basic implementation using plain JavaScript and HTML.
### Framework Versions
5. **ES6:** Modern version using ES6 syntax and features.
6. **Backbone:** Implementing the app using the Backbone.js framework.
7. **Vue:** Building the app with the Vue.js framework.
8. **React:** Creating the app using the React.js library.
9. **Angular:** Developing the app using the Angular framework.
10. **Knockout:** Building the app using the Knockout.js library.
### PHP Version
11. The PHP version of the app supports multiple storage mechanisms using drivers:
- **Session Storage Driver:** Uses an in-memory array to store tasks.
- **MySQL Storage Driver:** Stores tasks in a MySQL database using PHP drivers.
- **Additional Storage Drivers:** Feel free to explore and learn from the code!
### jQuery Versions
12. **jQuery:** Simple implemention with jquery.
13. **jQuery V2:** Advance implemention with events, plugin arch.
## Features
jQuery V2 version of the ToDo app includes the following features:
- Create new tasks
- Mark tasks as completed
- Delete tasks
- Edit task
- Sort tasks using drag and drop
- Filter tasks by status
- Fuzzy search for tasks with keyboard shortcut
- Select tasks using long-press
- Support for different storage plugins
- Task count summary
- Information modal with plugin details
## Usage
1. Clone this repository to your local machine.
2. Navigate to the version specific file you're interested in (e.g., `react`, `vue`, etc.).
3. Open the `[SELECTED_VERSION].html` file in your web browser.
4. Start managing your tasks with the chosen version!
## Contribute
These apps are intended as learning resources. If you're interested in contributing, you can fork the repository, make improvements, and submit pull requests. You can also suggest new features, add more frameworks, or report any issues you encounter.
## License
This project is licensed under the [MIT License](LICENSE).
## Disclaimer
These apps are developed for educational purposes only. They serve as demonstrations of various web development concepts and technologies. They should not be used in production environments.
---