"To-do list" is a tool that lists the things you need to do and allows you to mark them as complete. Built with JavaScript, HTML, CSS, and Webpack!

Overview

HTML CSS JS ES6 WEBPACK NPM LINTERS

Todo List Project

"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. I built a simple website that allows for doing that, and you will do it using ES6 and Webpack!

Built With

  • HTML/CSS/JS-Es6
  • NPM
  • Webpack
  • ES Modules
  • Linters
  • Github actions

Source Code

Source Code

Live Demo

Click here to find the website.

Getting Started

Clone the repo into your local machine.

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

Prerequisites

NPM should be installed

Install

run npm install in the project folder.

Usage

open index.html.

run npm run start.

Authors

👤 Farida Hamid

👤 Shaheer

🤝 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!

📝 License

This project is MIT licensed.

Comments
  • Testing To Do list: part 1

    Testing To Do list: part 1

    In this project we wrote unit tests for the To Do list application. The testing project has been divided into two parts. In part 1 we tested functions responsible for adding and deleting list items.

    For this project, we mocked the add and delete functions as they are a part of a class. The input, a list, is mocked and the functionality is checked. Both tests are passed.

    opened by Farida-Hamid 1
  • To Do list: interactive list

    To Do list: interactive list

    In this project, I added some functionality to my application to make it interactive. The user will be able to mark task completion by selecting the corresponding checkbox (or undo it by unchecking the checkbox). The updated tasks list will be stored in local storage.

    Steps:

    • Add a new JavaScript file and import it as a module:
    • 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.
    opened by Farida-Hamid 0
  • To Do list: add & remove

    To Do list: add & remove

    In this project, I implemented the CRUD (create, update, delete) methods. All the elements of the user interface are now fully functional.

    Steps:

    • Remove all hardcoded items from the tasks array.
    • Implement a function for adding a new task.
    • Implement a function for deleting a task.
    • Implement a function for editing task descriptions.
    • By default new tasks have the property completed set to false and the property index set to the value of the new array length.
    • Deleting a task updates all remaining items' indexes.
    • All changes to the To-Do List are saved in local storage.
    opened by Farida-Hamid 0
  • To Do list: list structure

    To Do list: list structure

    In this project, I built a simple HTML list of To-Do tasks. The list is styled according to the specifications listed in the project description. This simple web page is built using Webpack and served by a Webpack dev server.

    opened by Farida-Hamid 0
  • DRY issues

    DRY issues

    Where DRY is not followed:

    • Both checker.js and task-manager.js repeat local storage code.
    • The file checker.js repeats code that's already written in methods that are members of class Tasks.

    Where KISS is not followed:

    • For loop in the delete function.
    • Use map, filter, and reduce to manipulate the to-do list.
    opened by Farida-Hamid 0
Owner
Web developer. Stack: JavaScript, Ruby, Rails, React, Python. AI enthusiast. Looking for a Full-Stack Developer job!
null
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. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Microverse Webpack Javascript For the second Javascript milestone in building a todo website, set up a new repository and prepare it for development u

TOFANA SILVIA 16 Jun 13, 2022
"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. It is created with HTML , CSS , JS and webpack and NPM.

My Todo 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 com

Dyary Raoof Bayz Agha 5 Mar 29, 2022
Cindy Dorantes 12 Oct 18, 2022
Ajayi Ridwan 7 Oct 21, 2022
Chris Siku 13 Aug 22, 2022
Harrison Njuguna 5 Nov 11, 2022
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 JavaScript.

To Do List Application that record the tasks to remind you and got many features that you might need. This is an image for it Live Demo Live Demo Here

Omar Ragheb 14 Jul 13, 2022
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 JavaScript.

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 complet

Leonardo Goss 9 Mar 4, 2022
To-do list" is an app that helps to organize your day. the user simply lists the things that needs to done and the app allows the to mark them as complete when they are done. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Todo-list project This is a Microverse project that entails a to-do-list. Built With HTML CSS Javascript Webpack VS code Live Demo (if available) Live

Youta Lactio Christabelle 10 Aug 3, 2022
"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

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 compl

Sahar Abdel Samad 16 Aug 9, 2022
"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.

Todo_List Description "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 th

Cynthia Inga 4 Apr 19, 2022
"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.

todo-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 comple

Okoroji Victor Ebube 13 Jul 4, 2022
"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.

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 compl

Juan Palacios 10 May 24, 2022
"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.

Hello! I am a software developer! I can help you build a product, feature or website. Tak a look of my works. If you like what you see and have a proj

Roberto A. Baños Alvarez 5 Apr 29, 2022
"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.

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 compl

Ndikumana Isaie 4 Jun 10, 2022
"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.

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 compl

Tushar Singh 4 Jul 19, 2022
"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.

To-do List build with Webpack "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

PRATAP PANABAKA 5 Aug 19, 2022
A to-do list is a tool that helps organize your day. It simply lists the things that you need to do and allows you to mark them as complete.

ToDo-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 comple

Mohammed Hussen 6 Aug 20, 2022