to do List
To do list is a simple CRUD application that allows you to add, delete, update tasks that you are supposed to do.
Built With
- HTML-5
- CSS3
- Javacript
- Webpack
- Linters
Live Demo
For the link to the live demo, Click here
Getting Started
- To get a local copy up and running follow these simple example steps.
Prerequisites
A Web Browser (preferably Google Chrome)
Setup
- Open your command prompt or terminal and run.
- Clone the GitHub Repository from https://github.com/iLynette/todo-list.git
- run this commands in your terminal:
npm install
npm run build
npm start
Usage
after running npm start
the website will be opened automatically on your default browser.
Run tests
- To run tests run :
- npx hint .
- npx stylelint "**/*.{css,scss}"
Deployment
- Project is deployed using
- git push <branch_name>
Authors
- GitHub: @iLynette
- Twitter: @acholah_lynette
- LinkedIn: acholah lynette
🤝
Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
📝
License
This project is MIT licensed.
Peer Code Review
Hey Lynette, Good job separating the DOM manipulation from the logic. Here are a few things missing in your testing fille:
Best of luck and great work!
Javascript best practices
Use method chaining. return
this
at the end of every function and you can chain further classes, methods onto it. https://github.com/iLynette/todo-list/blob/ea1fcce085cf38d6e2a89e33702861c57d201d58/src/modules/todoList.js#L34Name variables in such a way that they reveal what the intention behind it is, allTasks in the line of code below is not very clear https://github.com/iLynette/todo-list/blob/ea1fcce085cf38d6e2a89e33702861c57d201d58/src/modules/utils.js#L6
Todo project
In this project I implemented the following;
Set up a new project with webpack
Create an index.html file and HTML markup here. Create an empty To Do List placeholder.
Create an index.js file and set an array of some simple to do tasks (array of objects). Each task object should contain three keys:
description [string].
completed [bool].
index: [number].
Wrote a function to iterate over the tasks array and populate an HTML list item element for each task. On page, load render the dynamically created list of tasks in the dedicated placeholder.
Unit testing
In this project we implemented the following;
[ ] a function for editing the task description.
[ ] a function for updating an item's 'completed' status.
[ ] the "Clear all completed" function.
Testing
In this project we implemented the following;
[ ] Use jest framework for testing.
[ ] Create a test file ([..].test.js) for a file containing the add item and delete item functions that we want to test.
[ ] Take a look at each of these functions. Are they pure functions? If the answer is "yes" then writing tests for them should be straightforward. Some of those functions however will update localStorage and manipulate the DOM. For those, you will need to use mocks:
[ ] Mock HTML to test if add/delete functions add or remove exactly one li element to/from the list in the DOM.
[ ] Make sure you group your tests using the describe() method.
Add and remove
In this project i implemented the following;
Remove all hardcoded items from the tasks array.
Create a new JavaScript file for the new functionality.
Implement a function for adding a new task (add a new element to the array).
Implement a function for deleting a task (remove an element from the array).
Implement a function for editing task descriptions.
By default new tasks should have the property completed set to false and the property index set to the value of the new array length (i.e. if you're adding a 5th task to the list, the index of that task should equal to 5).
Deleting a task should update all remaining items' indexes, so they represent the current list order and are unique.
All changes to the To-Do List should be saved in local storage.
Add a new JavaScript file and import it as a module:
it will contain methods related to the status updates (completed: true/false).
Add event listener to the checkbox (change).
Update items object's value for completed key upon user actions.
Implement a function for the "Clear all completed" button (use filter() method).
Store the updated array of items in local storage, so the user gets the correct list values after the page reloads.