"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete.

  • By Joyous Kwambiee
  • Last update: Jul 8, 2022
  • Comments: 5

To Do List

"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete.

Built With

  • HTML
  • CSS
  • JavaScript (ES6)
  • Webpack
  • Jest

Requirements

  • No linter Errors
  • Correct Github Flow
  • Best Practices for HTML, CSS and Javascript

Project Requirements

  • Use jest framework for testing
  • Use webpack to bundle JavaScript.
  • Use proper ES6 syntax.
  • Use ES6 modules.
  • Implement a function for adding a new task.
  • Implement a function for deleting a task.
  • Set new task completedproperty to false.
  • Implement functions that will filter,updateTasksand check for status.
  • Save the list to Local Storage.

Live Demo

Live Demo Link

Getting Started

You can directly clone this repo git clone [''] and run the with applicable code-editor.

Prerequisites

  • Node.js
  • npm
  • git

Setup

  • Once you clone the repo, go to the directory and run npm install command to get all necessary installations.
  • You can run the project locally by running index.html in your browser.
  • You can test the application by writing npm test at your command line.

Joy Kwamboka

Eric Mahare

🤝 Contributing

Contributions, issues and feature requests are welcome!

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/kwambiee/ToDoList-App

Comments(5)

  • 1

    Edit and update test

    We did the following in this section : -

    • [ ] Added a test to check the edit method
    • [ ] Added a test to check the update method
    • [ ] Added a test to check the clear all method
  • 2

    Create-update-delete the To Do List

    1. Used Webpack, ES6 syntax and modularities.
    2. Added Add functionality.
    3. Added remove functionality.
    4. Added editing functionality.
    5. Assigned the right index to each item.
    6. Set the status of each new task
  • 3

    Milestone: Todo list with WebPack

    1. Create a source directory, where my working files are stored.
    2. Used Webpack to generate dist folder with HTML and js file.
    3. Created an array of objects and formed a function to loop through each.
    4. Used webpack webpack dev-server to run automatically in the browser.
  • 4

    Morning session: peer to peer code review

    Hey @kwambiee, Good job :clap:!, your project is perfect :100: you can follow these few suggestions to make it even better:

    • Kindly use better naming conventions and camelCase as it's recommended for best practices
    • please make sure the list items become editable and show the bin on mouse over, not on click as it would make your project more dynamic.
    • we suggest creating a function that deletes all selected items when clicking on the clear all button as recommended in the project requirements
  • 5

    Code Review:ToDoList App

    First of all big up for good work :clap: . We see the implementation of Javascript best practices, ES6 modularities and the required functionalities. However, there are some things you can add to improve your code.

    • Kindly, use semantic tags in your markup for understanding of your code.

Popular Tag

Related