To Do List .. ### Live
This project is part of the Microverse curriculum in JavaScript course!
Explore the docs
Live Version
Watch Video
Report Bug
-
Request Feature
This is a small To-Do-List application where the user can create projects and add a list of tasks to be performed. Each task has its own check list, due date, priority, and notes to keep track of the procedute.
- Video Presentation
- Screen Shots
- About the Project
- Application Instructions
- Live Version
- System Requierments
- Development
- Dependencies
- Built With
- Contributors
- Acknowledgements
The project follows the MVC principles.
The main control is applied in index.js.
Partially,
- the model for projects is implemented in projectsDB.js for the database and projectClass.js for the project entity.
- the model for the todos is implemented in todosDB.js for the database and todoClass.js for the todo entity.
- the projects controller role is implemented in projectsController.js
- the todos controller in the todosController.js
- the projects view is in projectsSideBar.js for the projets index, and projectForm.js for the project new and edit.
- the todos view is in the todosView.js for the todos index, and todoForm.js for the todo new and edit.
Classes are used for entities of project, todo and checkItem for the todos checkList.
Modules are constructed for each controller.
- Data are percistently saved in localStorage.
- An initial population is performed when the localStorage is empty of projects by data held in seed.js.
- Shorthand commands for creating and accessing elements are used and are held in utils.js.
-
The application comes with some initial data held in seed.js file
-
Projects stand on the left of the screen. Clicking a project shows the relevant tasks on the right.
- To add a new project click the plus button at the top of the projects list.
-
In the project edit form add a title and optionally a description and a priority. A high priority shifts the project title to the top. A second priority factor is the last date it has been edited.
-
By selecting a project its to-dos appear on the right. Each task shows its priority, title, due date, and completion checkbox. The completion check can be used in place.
- Clicking on the title of a task shows the to-do edit form.
-
To add new tasks click the plus button at the top-right of the to-dos list.
-
Each task allows us to enter a title, a description, a notes field to track the procedure keeping notes, due date, priority, completion checkbox, and a checklist with description.
-
All entities can be deleted from their relevant edit views.
-
Since the persistence of data is achieved using the localStorage, all the data inserted or edited are available only on the computer and the particular browser which have been used.
- JavaScript Enabled
- You need to Disable Cross-Origin-Restrictions from your browser if you want to open the index.html from your file system without using a server.
- Clone the project
https://github.com/ioanniskousis/To-Do-List.git
Use VSCode and Live Server to show index.html
Since webpack is used, run 'npm run build' on you terminal before opening
please run
npm run build
to comply with the dependencies held in package.json
This project was built using these technologies.
- JavaScript (ES6)
- HTML5
- CSS3
- webpack
- date-fns
- Git - GitHub
- ESLint
- Stylelint
- Stickler
👤
- Github: @ioanniskousis
- Twitter: @ioanniskousis
- Linkedin: Ioannis Kousis
- E-mail: jgkousis@gmail.com