This is your virtual to-do list, a website where you can add, remove and edit your tasks.

  • By Romina PatiΓ±o
  • Last update: Aug 19, 2022
  • Comments: 7

To Do List Project - Testing

In this project we applied test to multiple functions using Jest.

Built With

  • HTML
  • CSS
  • Javascript ES6
  • Webpack
  • Jest


  • Modern web browser with Javascript enabled


git clone [email protected]:rominana/to-do-list.git


  • GitHub: @rominana

  • Twitter: @romina_pati

  • Linkedin: romina-patino

  • GitHub: @diegoyon

  • Twitter: @diegoyon

  • Linkedin: @diego_yon



πŸ“ License

This project is MIT licensed.



  • 1

    Testing part 1 - Pair programming

    Testing To Do list: part 1 :smile:

    In this project, @diegoyon and I :

    • Created test files for a file containing the add item and delete item functions.
    • Mocked a storage object to "imitate" localStorage operations.
    • Mocked HTML to test if add/delete functions add or remove exactly one li element to/from the list in the DOM.
    • Created tests using the describe() method.

    side note: we also had to apply a test on a createLi function to check the correct functioning of add and remove

  • 2

    Add & remove task from To-Do List

    In this project I : :nerd_face:

    • Created new JavaScript files and imported modules.
    • Implement a function for adding a new and deleting task from the app and the array.
    • Implement a function for editing task descriptions.
    • Saved all the changes to the To-Do List on the local storage.
  • 3

    Testing part 2

    In this project, @diegoyon and I : :smile:

    • Used jest framework for testing.
    • Created multiple test files containing the following functions:
    1. a function for editing the task description.
    2. a function for updating an item's 'completed' status.
    3. the "Clear all completed" function.
    • Used the mock storage object you have created in Part 1 of this project to mock the localStorage updates.
    • Mocked the HTML elements to test DOM manipulation functions.


  • 4

    To Do List - Interactive list

    In this project I : :nerd_face:

    • Added new JavaScript files and import them as a module.
    • Added event listener to the checkbox (change).
    • Updated items object's value for completed key upon user actions.
    • Implement a function for the "Clear all completed" button (use filter() method).
    • Stored the updated array of items in local storage, so the user gets the correct list values after the page reloads.
  • 5

    To Do List - Project 1. List structure

    In this project I: :nerd_face:

    • Set up a new project with Webpack.
    • Create an empty To-Do List and editable placeholder.
    • Set the index.html file as a template using the HTML Webpack Plugin.
    • Create an index.js file and set an array of some simple to-do tasks (array of objects).
    • Write 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.
    • Created a style.css and set rules for the To Do List. CSS must be loaded by Webpack Style/CSS Loader.
    • Created a clone of
  • 6

    Morning session: Peer-to-peer code review 15/07/2022

    Hi πŸ‘‹ your code looks pretty good πŸ’― but i think its much easer and better to use the local storage mock package , to avoid mistakes.

    Cheers Happy Coding

  • 7

    Spelling errors in the index.html file

    There are several spelling errors in the creation of classes within the HTML file. This could lead to future errors when applying styles or javascript.