Microsoft todo web app clone built with webpack, HTML and CSS in 2 days
The guests can create lists of todos, add/delete todos based on their priority, due date and title. The app never does a full refresh of the page and it automatically updates the DOM with every change. It is using
localStorage
for the database.
In this project, we were required to build a todo web app using Javascript`s Objects, Factory Functions, and The Module Patterns applying the concepts of Single Responsibility and Tightly Coupled Objects.
- Guests can create lists of todos, add/delete todos based on their priority, due date and title.
- The app is currently not mobile responsive.
- Todos with important priorities are colored dark red.
- Todos with high priorities are colored light red.
- Todos with normal priorities are colored green.
- Done todos are colored grey.
- HTML/SCSS
- Webpack/ES6/Javascript
- Bootstrap
- FontAwesome
- Local storage
To get this project up and running locally, you must have node installed locally. Node will automatically install npm.
To get this project set up on your local machine, follow these simple steps:
Step 1
Navigate through the local folder where you want to clone the repository and run
git@github.com:mahmoud717/todo-list.git
. It will clone the repo to your local folder.
or with https
https://github.com/mahmoud717/todo-list.git
.
Step 2
Run cd todo-list
Step 3
Run npm install
to install the npm packages from the package.json
file.
Step 4
Run npm run start
to start the webpack server, you can now navigate to http://localhost:3000
to view the app. The server refreshes the app every time you make a change to a file used by it.
Step 5
Most important, enjoy the app!
- Run
npm run test
command:
$ npm run test
👤 Mahmoud Mohammad
- Github: @mahmoud717
- Twitter: @mahmoud26369406
- Linkedin: @Mahmoud Mohammad
👤 Luciano Ilha Carbonel
- Github: @Luciano Ilha
- Twitter: @CarbonellIlha
- Linkedin: @Luciano Carbonell
Our favourite contributions are those that help us improve the project, whether with a contribution, an issue, or a feature request!
If you've read this far....give us a ⭐️!
This project is licensed by Microverse and the Odin Project