Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/raminmammadzada/js-todo-list

A simple TODO app can be used to follow the scheduled tasks for your projects.
https://github.com/raminmammadzada/js-todo-list

es6 eslint github-actions jest npm stylelint webpack

Last synced: 21 days ago
JSON representation

A simple TODO app can be used to follow the scheduled tasks for your projects.

Awesome Lists containing this project

README

        

![](https://img.shields.io/badge/Microverse-blueviolet)

Microverse JS Project #3

## JS - TODO List Page

![screenshot](./docs/images/screenshot.png)

In the project I created a simple todo app by following the [requirements in Odin page](https://www.theodinproject.com/courses/javascript/lessons/todo-list).

The page is made with valinna JS (JS6) and the following milestones are finished:

- [x] Miltestone 1 - Setup webpack to load style files, pictures and bootstrap classes.
- [x] Miltestone 2 - Create Todo, Project and Organization objects that will be created dynamically. Expand objects with several attributes.
- [x] Milestone 3 - Add view files and logic for populating projects.
- [x] Milestone 4 - Add view files and logic for populating todos.
- [x] Milestone 5 - Add CRUD methods to save to `localStorage`, update, delete and edit objects in `localStorage` . I use factory functions to handle them.
- [x] Milestone 6 - Update UI.
- [x] Milestone 7 - Update readme file.
- [x] Milestone 8 - Update code to obey linter rules.
- [x] Milestone 9 - Add unit tests for objects, data manipulater methods and for some view files.

## Built With

- Javascript/ES6
- npm v14.13.1
- Webpack 5.11.0
- [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
- [style-loader](https://webpack.js.org/loaders/style-loader/#root)
- [css-loader](https://webpack.js.org/loaders/css-loader/#root)
- [file-loader](https://webpack.js.org/loaders/file-loader/#root)
- [DevServer](https://webpack.js.org/configuration/dev-server/)
- HTML5/CSS
- Github Actions
- Bootstrap v4.5
- ESLint
- Stylelint
- Unit tests with [JEST](https://jestjs.io)

## Live Demo

[Live Demo Link](https://raminmammadzada.github.io/js-todo-list/)

## Getting Started

To get a local copy up and running follow these simple example steps.

- Clone the repository by runing `git clone [email protected]:RaminMammadzada/js-todo-list.git` on your terminal
- Go into project folder `cd js-todo-list`
- Run `npm install`
- Run `npm run build`, if you want to create built files.
- Alternatively, run `npm run dev`, if you will work on it to improve.
- Go into `dist` folder by writing `cd dist` and open `index.html` file using your favorite browser.

## Testing
- Unit tests are done by using [JEST](https://jestjs.io) testing framework.
- Go to the root directory and type:
- npm run `npm run test-watch` or `npm test`

## Authors

👤 **Ramin Mammadzada**

- Github: [@RaminMammadzada](https://github.com/RaminMammadzada)
- Twitter: [@RaminMammadzada](https://twitter.com/RaminMammadzada)
- Linkedin: [@RaminMammadzada](https://www.linkedin.com/in/raminmammadzada)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the [issues page](issues/).

## Show your support

Give a ⭐️ if you like this project!

## Acknowledgments

- Microverse
- Odin project

## 📝 License

This project is [MIT](lic.url) licensed.