A to-do list website task by (@microverseinc), you can easily manage your daily tasks

Yousef Hesham

Last update: Oct 22, 2022

Overview

To DO list

Is a website to manage daily tasks

Built With

HTML,CSS,JS
webpack

Live Demo (if available)

Live Demo Link

Getting Started

This is an example of how you may give instructions on setting up your project locally. Modify this file to match your project, remove sections that don't apply. For example: delete the testing section if the currect project doesn't require testing.

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

Prerequisites

node and npm installed

Setup

clone the repo.
run npm i to install packages.

Install

run npm start

Authors

👤 yosefHesham

GitHub: @yosefHesham
LinkedIn:yousef

Contributers

👤 bizibPascal

GitHub: @bizip
Twitter: @twitterhandle
LinkedIn: LinkedIn

🤝 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
Hat tip to my contributer @bizip
Inspiration
etc

📝 License

This project is MIT licensed.

Comments

To do list edit task
Hi @yosefHesham We appreciate how your code is clean and how you managed to refactor the JavaScript files.

We suggest you can fix edit and delete button because is not working (functioning) correctly.
opened by Ghilain 0
Testing part2
What does this PR do?

Add tests for editing items and editing the status of the item

Description of Task to be completed

All tasks related to deployment are completed

Changes Made:

Installed jest and configured it with es6 modules

Add a test suite for an editing todo item

Add a test suite for editing the status of the todo item

How should this be manually tested?

Clone this repository and switch to testing-part2

Install all required dependencies npm install

Run npm test
opened by bizip 0
Testing part1
What does this PR do?

Add tests for adding and removing list item functions

Description of Task to be completed

All tasks related to deployment are completed

Changes Made:

Installed jest and configured it with es6 modules

Add test suite for adding todo

Add test suite for removing todo

How should this be manually tested?

Clone this repository and switch to testing-part1

Install all required dependencies npm install

Run npm test
opened by bizip 0
Delete button is not functioning well

Hi @yosefHesham, We appreciate how your code is clean and how you managed to refactor the javascript file into different files however I have seen that the delete button is not functioning correctly. we suggest that you kindly fix that, otherwise you did a great job.

opened by bizip 0
Refactor UI updating
Brief of What Changed:

I figured out another way of updating UI, instead of re-rendering the list after every modification.

Changes Made:

In the add method, I add all needed event listeners to each new item before I append it to the DOM.

Created configureNewAddedItem module.

Created a getElement module.

Created a module for event listeners.

In the delete, I am not depending on the class of the element anymore, I use the index of the current child node from the list:

more on that :arrow_double_down: const list = document.querySelector('.list'); const arrayNodes = Array.from(list.childNodes); removeToDo(arrayNodes.indexOf(parent) + 1);

by that, I managed to stop the headache of re-rendering the items and adding a loop through them every time to add event listeners, and the code is more clean.
opened by yosefHesham 0
Violation of DRY

https://github.com/yosefHesham/todo-list/blob/f2865511d23bc6459f44256e8cff63b109d1bff8/modules/change_status.js#L3

https://github.com/yosefHesham/todo-list/blob/f2865511d23bc6459f44256e8cff63b109d1bff8/modules/change_status.js#L21

In the above functions, you are repeating the same logic:

https://github.com/yosefHesham/todo-list/blob/f2865511d23bc6459f44256e8cff63b109d1bff8/modules/change_status.js#L25-L32

it's better to separate that block of code inside another function to avoid repetition.

opened by yosefHesham 0
Js best practice violation

https://github.com/yosefHesham/todo-list/blob/f2865511d23bc6459f44256e8cff63b109d1bff8/modules/todo-controller.js#L43-L48

its best to execute only one thing in the function, so its better to execute that loop into another function and call it .

opened by yosefHesham 0
Add remove
Brief of what changed

Added the functionality to add, remove and edit tasks.

Changes Made:

Create a todo class to manage the logic.

Saved todos in local storage.

Created to do item class.
opened by yosefHesham 0
List structure
Brief of what changed

Created to-do list UI with an array of objects.

Changes Made:

Create render function with js.

Create an array with todo items.

Create text input to add items
opened by yosefHesham 0

A to-do list website task by (@microverseinc), you can easily manage your daily tasks

Related tags

Overview

To DO list

Built With

Live Demo (if available)

Getting Started

Prerequisites

Setup

Install

Authors

Contributers

🤝 Contributing

Show your support

Acknowledgments

📝 License

Comments

Owner

Yousef Hesham

A simple to-do list application that helps to organize your daily tasks and keep track of the task you have completed and the task you are yet to have completed, and also deleting the completed task leaving those yet to be completed.

This is a Microverse (@microverseinc) project in which I created a To-do list using Webpack. User can add a task, delete it, edit its description, and clear the completed tasks.

A To-Do-List app that input's a task by user and saves itself in the localStorage with a unique ID and when the task it checked as complete, user can click on clear all task to remove the task form the UI and localStorage. Built using JavaScript ES6

A simple JS To Do List bundled using Webpack. You can add new tasks, edit existing tasks, check completed tasks, and delete tasks from the list. It is built mainly with Javascript.

In this project I have build a To Do List app that you can list, add, delete and manage your daily tasks better. Build with HTML, CSS, JS, ES6, JSON

A simple to do list app built with HTML, CSS and JavaScript. Users can add daily tasks, edit the tasks, delete the tasks when it's done

This project entails a To-do-List whereby a user can input the tasks they want to do, check the tasks done and also clear all tasks when all of them are completed. It is efficient for a user who want to manage their time and keep track of their day.

A to-do-list project is about keeping the track of all the daily task. This application can add move or delete task.

To Do list is a small but useful project to make list app , you can add tasks delete tasks and modify tasks, the project built using HTML, CSS, JavaScript

This "To-do-list" app is a simple web application that displays a list of task and allows you to add and remove task from that list. it is built with the latest technology namely; JavaScript with webpack Configuration.

This "To-do-list" app is a simple web application that displays a list of task and allows you to add and remove task from that list

"To Do List" is a minimalist project that displays a list of task and allows you to add and remove task from that list. Built with JavaScript

A simple todo list app written in javascript and html with basic CSS styling This project makes use of webpack to bundle the code. I implemented 3 functionalities on the this project namely: Add task edit task delete task using Js

Use this project as a tool for remembering your daily tasks, confirming, editing, remove are actions you can do to tasks, your data is saved in the LocalStorage so every time you open or refresh the page all changes will be present.

This is a simple web application of a To-do List in which you can add, remove and edit all your tasks and also you can mark each task as completed and delete all completed ones.

A daily activity tracking application that helps to organize your daily tasks and keep track of tasks that have been completed, or yet to be completed.