"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

Last update: Aug 9, 2022

Overview

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.

This website is built using ES6 and Webpack!

Below is a PNG showing the app

Live Demo

You can see the app live here

Built With

HTML, CSS, JavaScript, Webpack.

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

Setup

Clone the repository using git clone and pasting the following link [email protected]:Sahar-AbdelSamad/To-do-list.git. Clone it in your desired location on your computer.

Install

Run the command npm install to install all project's dependencies.

Deployment

Run the command line npm start, the basic template will automatically open the index.html file in a browser. Distribution files are generated by webpack and served by webpack dev server from /dist folder.

Authors

👤 Sahar Abdel Samad

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

Comments

Peer-to-peer morning review

I would recommend putting more detail into what the test actually does, for example: https://github.com/Sahar-AbdelSamad/To-do-list/blob/c6ed1c4fa46b324e6b7c7566ad465b3943d87dc8/src/tests/tests/addDelete.test.js#L19-L23 Here the test is actually testing if the task list length is 0, and that implies that the task was deleted, it is necessary to make the description test a statement as objective as possible, in this particular test I would recommend The length of the task list that has a task inside it after removing a task is 0, in the suggestion I describe the start of the test and the expected result of the test. The same issue can be found in every test.

opened by Yothu 1
Keep your clean by DRY, the background-color could be assigned to several classes one time.

https://github.com/Sahar-AbdelSamad/To-do-list/blob/76b8d028c965428240395c3cda8fa24cb40dfe98/src/style.css#L15-L21 https://github.com/Sahar-AbdelSamad/To-do-list/blob/76b8d028c965428240395c3cda8fa24cb40dfe98/src/style.css#L35-L37 https://github.com/Sahar-AbdelSamad/To-do-list/blob/76b8d028c965428240395c3cda8fa24cb40dfe98/src/style.css#L79-L87

opened by Sahar-AbdelSamad 1
Add and remove
In this branch:

We removed all items from the tasks array

Created a new JavaScript file for the new functionality

Implemented a function for adding a new task (add a new element to the array)

Implemented a function for deleting a task (remove an element from the array)

Implemented a function for editing task descriptions All changes to the To Do List are saved in local storage
opened by Sahar-AbdelSamad 1
List structure
In this branch we created a list Structure of the TO-Do-List app:

We created an HTML file in /src directory with en empty placeholder for the tasks

We created a JavaScript file in /src directory that populates the list of tasks from an array of objects

We styled the page

We updated the README file

Distribution files are generated by webpack and served by webpack dev server from /dist folder
opened by Sahar-AbdelSamad 1
Reorder list by dragging items
In this branch I:

Added a new JavaScript file and imported it as a module. It, allows users to reorder the list by dragging each item and moving it into the desired position
opened by Sahar-AbdelSamad 0
Interactive list
In this branch I:

Added a new JavaScript file for the status updates functionalities and import it as a module

Implemented a function for the "Clear all completed" button
opened by Sahar-AbdelSamad 0

"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

Related tags

Overview

To Do List

Below is a PNG showing the app

Live Demo

Built With

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

Setup

Install

Deployment

Authors

🤝 Contributing

Show your support

Comments

Peer-to-peer morning review

Keep your clean by DRY, the background-color could be assigned to several classes one time.

Add and remove

List structure

Reorder list by dragging items

Interactive list

Owner

Sahar Abdel Samad

This is the version to be reviewed - "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. A simple website that allows for doing that, and built using ES6 and 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 mark them as complete. It is created with HTML , CSS , JS and webpack and NPM.

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

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.

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 tested by JavaScript Unit testing using Jest framework. It is build by using ES6 and 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 mark them as complete

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

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.

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.

Microverse Module 02 Project: This is educational project 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, Sass, JavaScript and Webpack.

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.