To Do app that helps the user to organize activities, with editable and autosaving input text area, marking activities as completed, and deleting selected activities one by one or in group. Built with JS, HTML and CSS as a Microverse Module 2 project.

  • By Dario Alessio
  • Last update: Jun 28, 2022
  • Comments: 12

Project Name: To Do List

Description the project:

It's a simple HTML page list of To Do tasks. The list will be styled according to the specifications listed later in this README file. This simple web page will be built using webpack and served by a webpack dev server.

Tests: The project is tested with JEST.

First round of tests includes only add and remove functions.

Second round of tests includes edit, clear all and update index of elements.

Requirements:

-- Phase 1:

  • Set up a new project with webpack that is based on the webpack exercise you have already completed.
  • Create an index.html file and write your HTML markup here. Create an empty To Do List placeholder (
    or
      element). The index.html file must be set 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). Each task object should contain three keys: description [string]. completed [bool]. index: [number].
    • 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. The list should appear in order of the index values for each task.
    • Create a style.css and set rules for the To Do List. CSS must be loaded by Webpack Style/CSS Loader. Your list should be a clone of the part of the minimalist project captured in the video below.
    • All your source files (index.html, index.js and style.css) must be located in /src directory and your distribution files will be generated by webpack and served by webpack dev server from /dist folder.

    -- Phase 2:

    • 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 each 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(i.e. if you're deleting the first task index 1 from the list, the index of the next task(2) should set to 1).

    All changes to the To Do List should be saved in local storage.

    -- Phase 3:

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

    Built With:

    • Major languages: Javascript, HTML, CSS
    • Frameworks: webpack, Jest
    • Technologies used: VSC, Github

    Live Demo (if available)

    "Not available"

    Getting Started:

    • Please run: npm run build and then npm start to see project displayed in your browser.
    • Populate the list with test cases.
    • CLick the upload button (right end of input field) to save content
    • Click each activity test to edit and change it
    • Click three dots icon to activate trash can icon
    • Click trash icon to delete activity
    • Click checkbox to change status of activity from pending to completed
    • Click "Clear all completed" tab to delete activities marked with checkbox

    Prerequisites

    "Not available"

    Setup

    "Not available"

    Install

    "Not available"

    Usage

    "Not available"

    Run tests

    run: npm test

    Deployment

    https://darioalessior.github.io/todolist2/dist/

    Authors

    👤 Author1

    • Dario Alessio

    GitHub: https://github.com/DarioAlessioR

    Slack: https://microverse-students.slack.com/team/U039GCFRK9B

    LinkedIn: https://www.linkedin.com/in/dario-alessio-3a3b7911b

    👤 Author2

    • Mauricio Gallegos

    GitHub: https://github.com/maury18

    Twitter: https://twitter.com/MauryRodrguez6

    LinkedIn:https://www.linkedin.com/in/mauricio-gallegos-rodr%C3%ADguez-380a96183/

    👤 Author3

    • Frederick Ankomah

    https://github.com/KingKowa

    🤝 Contributing

    Contributions, issues, and feature requests are welcome!

    Feel free to check the issues page.

    Show your support

    Give a ⭐️ if you like this project!

    Acknowledgments

    • Hat tip to anyone whose code was used
    • Inspiration
    • etc

    📝 License

    This project is MIT licensed.

Github

https://github.com/DarioAlessioR/todolist2

Comments(12)

  • 1

    PR Testing4 for activity Testing To Do List part 2

    PR Testing4 for activity Testing To-Do List part 2.

    The project has been done according to the following MICROVERSE instructions:

    • Use jest framework for testing.

    • Create a test file(s) ([..].test.js) for a file(s) containing the following functions: . a function for editing the task description. . a function for updating an item's 'completed' status. . the "Clear all completed" function.

    • Make sure you group your tests using the describe() method.

    • Optional requirements: Check the test coverage. You should aim for covering 100%.

    Thank you in advance.

  • 2

    PR for activity Testing To Do List part 2 - branch testing3

    • Created a function for editing the task description.
    • Created a function for updating an item's 'completed' status.
    • Created the "Clear all completed" function.
    • Use jest framework for testing.
    • Use the mock storage object you have created in Part 1 of this project to mock the localStorage updates.
    • Mock the HTML elements to test DOM manipulation functions.
    • Make sure you group your tests using the describe() method.
  • 3

    PR for test of add and remove functions on branch Testing2

    PR for the test of add and remove functions on branch Testing2, according to the following instructions:

    Project requirements:

    This is a pair-programming project.

    Use jest framework for testing.

    Create a test file ([..].test.js) for a file containing the add item and delete item functions that you want to test.

    Make sure you group your tests using the describe() method.

    Optional requirement Add a --coverage flag to your test script in package.json.

    Thank you a lot in advance.

  • 4

    Todo 5

    PR Todo5 for activity To Do list: interactive list

    Project requirements:

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

    Thank you a lot in advance.

  • 5

    PR Todo4 for activity To Do List: Interactive list

    PR Todo4 for activity To Do List: Interactive list

    Project requirements:

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

    Thank you in advance.

  • 6

    PR todo1 for activity To Do List: list structure

    PR Todo1 for activity To Do list: List structure

    Project requirements:

    • Set up a new project with webpack that is based on the webpack exercise you have already completed.

    • Create an index.html file and write your HTML markup here. Create an empty To Do List placeholder (

      or
        element). The index.html file must be set 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). Each task object should contain three keys: description [string]. completed [bool]. index: [number].

      • 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. The list should appear in order of the index values for each task.

      • All your source files (index.html, index.js and style.css) must be located in /src directory and your distribution files will be generated by webpack and served by webpack dev server from /dist folder.

      Thank you in advance.

  • 7

    PR Todo3 for activity To Do list: add & remove

    PR Todo3 for activity To Do list: add & remove

    Project requirements:

    • 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(i.e. if you're deleting the first task index 1 from the list, the index of the next task(2) should set to 1).

    • All changes to the To Do List should be saved in local storage.

    Thank you in advance.

  • 8

    PR todo1 for To Do List activity

    PR todo1 for To Do List activity

    ATTENTION REVIEWER: this is the PR for the activity To Do list: list structure You will notice that it contains part of the code for the following activity (add functionality, etc). However, what is required for the list structure-activity is completed. Thank you.

    Requirements:

    • Set up a new project with webpack that is based on the webpack exercise you have already completed.
    • Create an index.html file and write your HTML markup here. Create an empty To Do List placeholder (
      or
        element). The index.html file must be set 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). Each task object should contain three keys: description [string]. completed [bool]. index: [number].
      • 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. The list should appear in order of the index values for each task.
      • Create a style.css and set rules for the To Do List. CSS must be loaded by Webpack Style/CSS Loader. Your list should be a clone of the part of the minimalist project captured in the video below.
      • All your source files (index.html, index.js and style.css) must be located in /src directory and your distribution files will be generated by webpack and served by webpack dev server from /dist folder.

      Thank you very much in advance.

  • 9

    Unnecessary name attribute of checkbox element

    The attribute name of checkbox elements can be avoided, as it is not used in the rest of the code.

    https://github.com/DarioAlessioR/todolist2/blob/be38d7b079a9579e1ca16e7c4b45ca4a4054181b/src/index.js#L40

  • 10

    Name and 2 classes of activity element can be avoided

    Name and 2 classes of activity 'p' elements can be avoided. These name and classes of these p elements are not being used in the rest of the code.

    Lines 26, 27 and 28 can be deleted in index.js file.

    https://github.com/DarioAlessioR/todolist2/blob/be38d7b079a9579e1ca16e7c4b45ca4a4054181b/src/index.js#L26

  • 11

    Unnecessary use of variable deletetodo

    Use of deletetodo variable can be avoided. To do it, simply use ${i} as the argument in the splice in line 64.

    https://github.com/DarioAlessioR/todolist2/blob/be38d7b079a9579e1ca16e7c4b45ca4a4054181b/src/index.js#L62

  • 12

    TO-DO list

    #kindly fix the following issues

    • remove the unnecessary npm packages
    • remove unnecessary configurations from webpack.config.js
    • remove unused imports
    • don`t limit yourself by specifying the package versions