Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mahammad-mostafa/to-do-list-review
This project is copied from the fourth project in the second module in Microverse program. It is intended for practicing code reviews & peer feedback. It should adhere to best practices in (HTML / CSS / JavaScript) & comply with (DRY / KISS / YAGNI) principles.
https://github.com/mahammad-mostafa/to-do-list-review
best-practices code-review dry-principle html-css-javascript kiss-principle microverse microverse-projects microverse-students peer-review single-page-app webpack5 yagni-principle
Last synced: 29 days ago
JSON representation
This project is copied from the fourth project in the second module in Microverse program. It is intended for practicing code reviews & peer feedback. It should adhere to best practices in (HTML / CSS / JavaScript) & comply with (DRY / KISS / YAGNI) principles.
- Host: GitHub
- URL: https://github.com/mahammad-mostafa/to-do-list-review
- Owner: mahammad-mostafa
- License: mit
- Created: 2023-07-18T19:08:13.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-12T18:09:37.000Z (over 1 year ago)
- Last Synced: 2024-10-19T03:01:53.030Z (2 months ago)
- Topics: best-practices, code-review, dry-principle, html-css-javascript, kiss-principle, microverse, microverse-projects, microverse-students, peer-review, single-page-app, webpack5, yagni-principle
- Language: JavaScript
- Homepage:
- Size: 245 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 🏷️ To Do List Review
This is an exercise practised on the fourth project in the second module in the **Microverse** program.
Check the below contents for further details about this project.
# 📗 Contents
- [Description](#description)
- [Instructions](#instructions)
- [Authors](#authors)
- [Future](#future)
- [Contributions](#contributions)
- [Support](#support)
- [Acknowledgements](#acknowledgements)
- [License](#license)
# 📖 Description
This project is copied from the fourth project which was a simple task management app with `ES6` modules and bundled with `WebPack`.
It is intended for practicing code reviews & peer feedback.
It should adhere to best practices in (HTML / CSS / JavaScript) & comply with (DRY / KISS / YAGNI) principles.
All project files are contained in `src` directory.
Also config linters for (`HTML` / `CSS3` / `JavaScript`) in the `.github` folder.
📌 **Live Demo:**
- See the project live from [here](https://mahammad-mostafa.github.io/to-do-list-app-review/dist).
📌 **Tech Stack:**
- Page strucutre is built with `HTML5`
- Styling is built with `CSS3`
- Dynamic content is built with `JavaScript`
📌 **Key Features:**
- Responsive layout for all screens
- Tasks list is loaded dynamically
- Clear all completed tasks
- All tasks are locally stored
- Mark any task for completion
- Organize tasks by drag & drop
- Hover effect for icons & buttons
- Refresh & reload list from storage
- Edit any task by clicking on it & typing
- Manually remove any task when higlighted
- Add new tasks with maximum of 50 charaters
# 🛠️ Instructions
You can easily download or fork this repository and work on it immadiately!
📌 **Prerequisites:**
- `NodeJS` for installing & running all packages
📌 **Setup:**
- Install all dependencies with `npm`
- For live development on `localhost:8080` run:
```
npm run start
```
📌 **Deployment:**
- You can deploy this project by uploading files in the `dist` folder to a live server.
- Create the distribution build using this command:
```
npm run build
```
# 👥 Authors
📌 **Mahammad:**
- [GitHub](https://github.com/mahammad-mostafa)
- [Twitter](https://twitter.com/mahammad_mostfa)
- [LinkedIn](https://linkedin.com/in/mahammad-mostafa)
# 🔭 Future
Some additional features I may implement in the project:
- [ ] Using `CSS` preprocessors and their relevant loaders
- [ ] Implement two `WebPack` configurations for production & development
# 🤝🏻 Contributions
Wish to contribute to this project?
Contributions, issues, and feature requests are more than welcome!
Feel free to check the [issues](../../issues) page too.
# ⭐️ Support
Like this project? Show your support by starring!
# 🙏🏻 Acknowledgements
I thank everyone at **Microverse** for guiding me through this project.
# 📝 License
This project is [MIT](LICENSE.md) licensed.