A simple to do list webpage where you can log the daily tasks you have to do, mark them as checked, modify them, reorder them and remove them. Made using HTML, CSS and JavaScript.

Overview

To-Do-List

This Webpage is for an app called To-Do-List which helps you add, remove or check tasks you have to do.

screenshot

It is a simple web page which contains information about all the tasks you have to do.

Built With

  • HTML / CSS / JavaScript

Live Demo

Getting Started

To launch the project locally:

Step 1:

Step 2:

  • Run npm install
  • Run npm start

Authors

๐Ÿ‘ค Zeeshan Haider

๐Ÿค 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

๐Ÿ“ License

This project is MIT licensed.

Comments
  • Add JS best practices

    Add JS best practices

    The following changes were implemented in this Milestone

    • All the requested KISS, YAGNI, Dry, and best JS practices as required in this branch

    Thanks for taking out the time to review this project ๐Ÿงจ

    It really is appreciated :) โค๏ธ

    • Note: I personally love optional suggestions so please do leave some ๐Ÿ˜„
    opened by zhadier 0
  • JavaScript best practices 2

    JavaScript best practices 2

    • I have failed to separate DOM manipulation tasks and function logic here https://github.com/zhadier/To-Do-List/blob/79aed69ebedb62eaad86a3b51867e76eb4cb559e/src/modules/Drag%26Drop.js#L22-L41
    opened by zhadier 0
  • Kiss issue 2

    Kiss issue 2

    • I have failed to implement KISS here, I could use .Remove() instead of removeChild() https://github.com/zhadier/To-Do-List/blob/79aed69ebedb62eaad86a3b51867e76eb4cb559e/src/modules/Check%24Clear.js#L37
    opened by zhadier 0
  • KISS issue 2

    KISS issue 2

    • I have failed to implement KISS here, I could use .Remove() instead of removeChild() https://github.com/zhadier/To-Do-List/blob/79aed69ebedb62eaad86a3b51867e76eb4cb559e/src/modules/Add%26Remove.js#L39-L54
    opened by zhadier 0
  • Kiss issue 2

    Kiss issue 2

    • I have failed to implement KISS here, I could use .Remove() instead of removeChild() https://github.com/zhadier/To-Do-List/blob/79aed69ebedb62eaad86a3b51867e76eb4cb559e/src/modules/Add%26Remove.js#L39-L54
    opened by zhadier 0
  • KISS

    KISS

    • I have failed to implement KISS here, I could use .Remove() instead of removeChild() https://github.com/zhadier/To-Do-List/blob/79aed69ebedb62eaad86a3b51867e76eb4cb559e/src/modules/Add%26Remove.js#L39-L54
    opened by zhadier 0
  • JavaScript best practices.

    JavaScript best practices.

    • I have failed to separate the application logic from DOM manipulation tasks https://github.com/zhadier/To-Do-List/blob/79aed69ebedb62eaad86a3b51867e76eb4cb559e/src/modules/Add%26Remove.js#L39-L54
    opened by zhadier 0
  • Peer-to-peer code review

    Peer-to-peer code review

    Hello Zhadier ๐Ÿ‘‹

    You did a really good job ๐Ÿ‘ your code looks amazing. I really like the feature of deleting the item when there are no characters, it shows that you know what the user might expect.

    suggestions โ™ป๏ธ

    • you could use the inbuilt method remove() from the elements so you don't have to point to the parent and iterate to find the desired item.
    • You should make some transitions and animations to make your application more attractive to recruiters.
    opened by Leboroz 0
  • Milestone 3

    Milestone 3

    The following changes were implemented in this Milestone

    • Added a new JavaScript file and import it as a module. It contains methods related to the status updates (completed: true / false).
    • Added event listener to the checkbox (change).
    • Updated items object's value for completed key upon user actions.
    • Implement a function for the "Clear all completed" button
    • Stored the updated array of items in local storage, so the user gets the correct list values after the page reloads.

    Thanks for taking out the time to review this project ๐Ÿงจ

    It really is appreciated :) โค๏ธ

    • Note: I personally love optional suggestions so please do leave some ๐Ÿ˜„
    opened by zhadier 0
  • Milestone 2

    Milestone 2

    The following changes were implemented in this Milestone

    • Removed all hardcoded 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).
    • Implement a function for editing task descriptions (Press enter for it to be registered and stored in local storage).
    • Index and completed functionality working properly
    • Deleting tasks updates all remaining tasks with correct index
    • All changes to the To-Do List saved in local storage.

    Additional Implementations

    • The clear functionality
    • The checked functionality

    Thanks for taking out the time to review this project ๐Ÿงจ

    It really is appreciated :) โค๏ธ

    • Note: I personally love optional suggestions so please do leave some ๐Ÿ˜„
    opened by zhadier 0
  • Milestone 1: Basic structure

    Milestone 1: Basic structure

    The following changes were implemented in this Milestone

    • Set up a new to-do list project with webpack.
    • Created an empty To-Do List element and setup the index.html file as a template using the HTML Webpack Plugin.
    • Create an index.js file and set an array of some simple to-do tasks (array of objects). (Array is inside Class List)
    • Wrote a function to iterate over the tasks array and populate an HTML list item element for each task. (In Class List, method is called display)
    • On page load render the dynamically created list of tasks in the dedicated placeholder. The list appears in order of the index values for each task.
    • CSS is loaded by Webpack Style/CSS Loader

    Note

    I have tried to follow ES6 practices since I heard they are the standard and should be used everywhere. The functionality is the same as required but the array and the display method are in a class called list.

    Thanks for taking out the time to review this project ๐Ÿงจ

    It really is appreciated :) โค๏ธ

    • Note: I personally love optional suggestions so please do leave some ๐Ÿ˜„
    opened by zhadier 0
Owner
Zeeshan Haider
Electrical Engineer | Front-end developer BS EE from NUST CEME | JavaScript | C++ | Python | Chess & Football enthusiast | Open to new opportunities
Zeeshan Haider
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

Project Name The To-Do-List app description this is a project in the second week of the second module in microverse. its a useful to do list that save

Alzubair Alqaraghuli 5 Jul 25, 2022
This is a website for a simple to do list, where you can add and remove tasks, edit and reorder them as you see fit.

To-Do-List This is a website for a simple to do list, where you can do the following: Add the tasks you want to do. Remove any tasks you finished alre

Ammar Hamlaoui 7 Apr 6, 2022
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

To Do List This is a website that allows users to manage the tasks. users can add every task to do and when the task is done users can delete the task

Mustafa Fahimy 8 Jul 21, 2022
To-Do List project is the application for a to-do list, users can add and remove tasks from the to-do list. Mark tasks as completed.

To Do App To-Do List project is the application for a to-do list, users can add and remove tasks from the to-do list. Mark tasks as completed. Users c

Ishpaul Singh 6 Jul 21, 2022
This is a Webpack based to-do-list project. With this app, users can add thier daily routine tasks to the list, mark them as complet, edit them or delete them.

To Do List This is a Webpack based to-do-list project. With this app, users can add thier daily routine tasks to the list, mark them as complet, edit

Ali Aqa Atayee 12 Oct 30, 2022
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.

To-Do-List A simple HTML list of To Do built using webpack and served by a webpack dev server. Live Link See Demo Built With HTML, CSS, Javascript To

Michael Ugochukwu 3 May 10, 2022
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

ToDo List This project is build by javascript web packages which can add and remove daily tasks. Built With Html Css Javascript Sublime Text Author ??

Sahar Saba Amiri 7 Oct 25, 2022
Aron 8 Dec 17, 2022
zieeco 12 Jul 8, 2022
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.

To-Do-List This is my To-Do List project in the Microverse curriculum. Built With HTML CSS Javascript (Webpack) GitHub Live Demo Live Demo Link Gettin

Hammed Adisa 8 May 7, 2022
An interactive list of tasks where you can add, remove, edit, mark as completed and clear all done tasks. Tested with Jest.

To do List This project its an interactive list of task where you can add and remove tasks dinamically Project Images Add new Tasks Edit Existing Task

Alex Puente 7 Nov 9, 2022
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.

To-Do List A simple web application of a to do list Built With HTML, CSS, JS, ES6 & Webpack Getting Started In this repository I created To-Do List SP

Juan Sebastian Sotomayor 12 Apr 11, 2022
A to do list where you can add tasks, mark completed tasks and clear all completed tasks.

To Do List A to do list where you can add tasks, mark completed tasks and clear all completed tasks. You can rearrange the order of the tasks by doubl

Amira 7 Mar 4, 2022
DoMe is a ToDo App. you can add, delete and reorder elements of the todo list using drag and drop. You can also toggle between dark&light mode

DO ME Todo App Live Preview : DO ME Built With : - ReactJS - TailwindCSS Make sure you have: - Git - Nodejs version 14 or higher (we recommend using

Medjahdi Islem 5 Nov 18, 2022
A simple task manager that allows that allows users to add, remove and modify tasks from a list.

TO-DO LIST TO-DO LIST is a basic app that allows users to add/remove task from a to-do list. Built With HTML, CSS, JavaScript, Live Demo Live Demo Lin

Shingirai Bhengesa 3 May 3, 2022