To do list is a simple CRUD application that allows you to add, delete, update tasks that you are supposed to do. It is built with HTML, CSS and JavaScript

  • By Lynette Acholah
  • Last update: Jun 7, 2022
  • Comments: 6

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.


A Web Browser (preferably Google Chrome)



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}"


  • Project is deployed using
  • git push <branch_name>


👤 Author

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

📝 License

This project is MIT licensed.



  • 1

    Peer Code Review

    Hey Lynette, Good job separating the DOM manipulation from the logic. Here are a few things missing in your testing fille:

    • [x] ** Create tests for edit todo
    • [x] ** Create tests for checking todos(i.e status update to completed todo)
    • [x] ** Create tests for clearing all completed todos

    Best of luck and great work!

  • 2

    Javascript best practices

    • Use method chaining. return this at the end of every function and you can chain further classes, methods onto it.

    • Name 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

  • 3

    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:

    1. description [string].

    2. completed [bool].

    3. 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.

  • 4

    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.

  • 5


    • 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.

  • 6

    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.