Keep a track of tasks you need to do

  • By Awais Amjed
  • Last update: Jul 28, 2022
  • Comments: 6

To Do List

Keep a track of tasks you need to do.

screenshot

An Application where you can keep a track of the tasks you need to do and checkout the ones that have already been completed.

Built With

  • HTML
  • CSS
  • JavaScript
  • Webpack

Live Demo

Live Demo Link

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

A Web Browser (preferably Google Chrome)

Setup

  • Clone the GitHub Repository
  • Go to the Project Directory
  • Run npm install

Usage

  • Run npm build to build the project
  • Run npm start to start the live server

Authors

πŸ‘€ Author1

🀝 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

  • Microverse

Github

https://github.com/awais-amjed/to-do-list

Comments(6)

  • 1

    JavaScript best practices Check βœ…

    1. Keep all the JavaScript code in JS files, not in the script tag. βœ…

    2. Keep your Code Clean following this advice:

      • type checks. βœ…
      • naming. βœ…
      • simplicity. βœ…
      • DRY. βœ…
    3. If you use node modules, .lock files should be in the repository to avoid problems with future versions of the dependencies. βœ…

    4. If you use ES6, use object destructuring to get the values from an object. This way you can avoid repeating a lot of code. β›”

    5. Do not commit console.log to your repo. It’s ugly, it kills performance and it can make confidential data be visible to anyone using the browser tools to look at your website. βœ…

    6. Do not use window.alert() or window.confirm(). It’s ugly, impossible to style, stops code execution, and displays differently on different browsers. Use custom modal instead. βœ…

    7. Keep the number of changes/updates to the DOM as low as possible, they are very expensive for the browser. βœ…

    8. Keep the application logic separated from DOM manipulation tasks. βœ…

    9. Do not use document.write or eval βœ…

    10. Add node_modules dir to your .gitignore file as all those files are not needed in your repo (each team member will install all packages thanks to your package.json file). βœ…

    11. Do not commit old pieces of code as inline comments. They will make your project look messy. If you need to review a previous version of your code, you can always use git history. βœ…

  • 2

    Peer-to-peer code review - M2W2

    Great implementation. Regarding the specifications there is nothing to comment on.

    Animations are nice, colors are pleasing and using Scss also was a good learning practice.

    Great job.

  • 3

    Unit tests

    In this Pull Request, We added the following unit tests:

    • To add a new task. βœ…
    • To remove an existing task. βœ…
    • To check if a Task already exists. βœ…

    In the second part of this Pull Request, We implemented the following unit tests:

    • To check if a task has been added correctly. βœ…
    • To check if a task status updates correctly. βœ…
    • To check if the clear all completed function works correctly. βœ…
  • 4

    Interactions

    In this Pull Request, the following changes were implemented:

    • Added methods related to the status updates. βœ…
    • Add event listener to the checkbox. βœ…
    • Update items object's value for completed key upon user actions. βœ…
    • Implement a function for the "Clear all completed" button. βœ…
    • Store the updated array of items in local storage, so the user gets the correct list values after the page reloads. βœ…

    Live Demo Link

  • 5

    Crud functionality

    In this Pull Request, the following changes were implemented:

    • Removed all hardcoded items from the tasks array. βœ…
    • Created new JavaScript files for the new functionality. βœ…
    • Implemented a function for adding a new task. βœ…
    • Implemented a function for deleting a task. βœ…
    • Implemented a function for editing task descriptions. βœ…
    • By default new tasks have the property completed set to false and the property index set to the new array length. βœ…
    • Deleting a task updates all remaining items' indexes, so they represent the current list order and are unique. βœ…
    • All changes to the To-Do List are saved in local storage. βœ…

    Live Demo Link

  • 6

    List structure

    In this Pull Request:

    • Added HTML & CSS to style the basic To-Do List Structure βœ…
    • Added Tasks dynamically using JavaScript. βœ…
    • Used Webpack to Create bundle everything. βœ…
    • A deployed project to Github pages. βœ…