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.

Overview

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

Built With

  • HTML
  • CSS
  • Markdown
  • JavaScript

Prerequisites

  • text-editor
  • git
  • github

Getting Started

To Create A Portfolio from this Repository feel free to contact me.

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

  • you can clone this repo by typing git clone [email protected]:omar25ahmed/Omar-Ragheb-ToDo-List.
  • type cd ToDo List to access the project on terminal.

Authors

👤 Omar Ragheb

🤝 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

  • Cindy Shin's design
  • SciComm Link
  • Aspen Global Congress on Scientific Thinking & Action Link
  • Microverse Team

📝 License

This project is MIT licensed.

Comments
  • To do Day3

    To do Day3

    What has been Implemented:

    • [x] Add a new JavaScript file and import it as a module: it will contain methods related to the status updates (completed: true / false).
    • [x] Add event listener to the checkbox (change).
    • [x] Update items object's value for completed key upon user actions.
    • [x] Implement a function for the "Clear all completed" button.
    • [x] Store the updated array of items in local storage, so the user gets the correct list values after the page reloads.
    opened by omar25ahmed 0
  • To do day2

    To do day2

    Learning Objectives:

    • Remove all hardcoded items from the tasks array.
    • Create a new JavaScript file for the new functionality.
    • Implement a function for adding a new task (add a new element to the array).
    • Implement a function for deleting a task (remove an element from the array).
    • Implement a function for editing task descriptions.
    • By default new tasks should have the property completed set to false and the property index set to the value of the new array - length (i.e. if you're adding a 5th task to the list, the index of that task should equal to 5).
    • Deleting a task should update all remaining items' indexes, so they represent the current list order and are unique.
    • All changes to the To-Do List should be saved in local storage.
    opened by omar25ahmed 0
  • Peer to peer code review

    Peer to peer code review

    Congratulations, your project meets all the requirements and your style of code is understandable. Only a few suggestions that can improve your project:

    • When I click on the edit icon, it automatically autoselects all the tasks, could be better if only the cursor appears at the end to start the editing. See image here
    • As you created a class, you can take advantage of it using methods. It could help you to avoid defining many functions and your code will you more organized.
    • About the use of modules, you can try moving functions to a new module. In this way, your index.js only maintains the event listener.
    • You can delete a task without the need to mark it as completed. Could be better if only the completed tasks can be deleted.

    Happy coding!

    opened by yersel500 0
  • Peer-to-peer Code Review

    Peer-to-peer Code Review

    Dear @omar25ahmed ,

    Congratulations. 💯 💥

    • Your code is readable
    • You code structure is well organized
    • All functionalities are working as expected

    Optional Suggestions ♻️

    DOM manipulation using element.innerHTML has security concern. I think it is better to modify it using JavaScript function like createElement() , append(), appendChild(). https://github.com/omar25ahmed/ToDo-List/blob/1965b75430663f46804360834d5c359de8b66b63/src/index.js#L41-L50

    opened by mengiefen 0
  • Does my coding partner follow JS best practices?

    Does my coding partner follow JS best practices?

    Suggestions to be made:

    • Adding the add and remove function in another file would be better.
    • also the set item of local storage has been repeated more than one time so it will be better to put it inside a function and use it whenever you need
    • the code needs to be organized better than that.
    • the event listeners shouldn't be on the ul tag because it could cause many Errors
    opened by omar25ahmed 0
Owner
Omar Ragheb
Aspiring Full-Stack web developer, With a love for React and Redux, Always open to new opportunities.
Omar Ragheb
Chris Siku 13 Aug 22, 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 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.

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

ABDUL ALI 7 Jul 17, 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. 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
Harrison Njuguna 5 Nov 11, 2022
Ajayi Ridwan 7 Oct 21, 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
"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
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 This Projects involves building a clone of minimalist ToDo List. Built With HTML, CSS & JS Live demo Getting Started To get a local copy up

Samuel Munyi 6 Oct 7, 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