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.

Related tags

Learning resource To-Do-List
Overview

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 can delete all completed tasks at once. UI is taken from Frontend Mentor which helps you improve your coding skills by building realistic projects.

Built With

  • Html
  • Css
  • Javascript
  • Webpack

Live Demo

To Do app is live

Getting Started

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

Using it Locally

  • Clone the project from GitHub here
  • Run the following commands as listed in your terminal:
  • npm install
  • npm run build
  • npm start

Authors

👤 Ishpaul Singh

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!

Acknowledgment

  • The project idea is originally Microverse Javascript Curriculum.
  • UI is taken from Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

📝 License

This project is MIT licensed.

Comments
  • Testing part1

    Testing part1

    In this Pull request Me and my coding partner @hammaazarok Implemented the following-

    • Use jest framework for testing.
    • Created a test file [crud.test.js] to test the Add or Remove task to list in UI AND local Storage Functions

    Updated Testing Part 2 code added see after the Approval of test part1

    Following tests are written

    • checks for function for editing the task description.
    • checks for a function for updating an item's 'completed' status.
    • checks for the "Clear all completed" function.
    opened by ishpaul777 1
  • Check on the update todo event listener

    Check on the update todo event listener

    Impressed with your implementation of this todo application, here is one suggestion to improve on:

    • This button onClick only registers on keypress rather than independently when clicked on: https://github.com/ishpaul777/To-Do-List/blob/master/src/add_remove_update.js#L212
    opened by XsidX 0
  • Best Practices

    Best Practices

    DRY

    • spread operator can be used to make the code cleaner instead of Array.prototype.slice.call(taskList.children);

    KISS ✅

    YAGNI ✅

    • console.log(s) can be removed from code
    opened by ishpaul777 0
  • added user interactions

    added user interactions

    #Following User Interactions Implemented -

    • 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 ishpaul777 0
  • added add-remove-update feature to app

    added add-remove-update feature to app

    Following features implemented --

    • User can add a task to list
    • User can remove a task from list
    • User can update an existing task in list
    • All user tasks are stored in browser local storage
    opened by ishpaul777 0
  • # Basic list structure

    # Basic list structure

    In this Pull Request, I have done the following things

    • Setted up a project with webpack
    • Added Basic Html and CSS
    • Dynamically added To tasks by Javascript.
    opened by ishpaul777 0
  • Drag n drop

    Drag n drop

    Best Practices & drag and drop

    I implemented Drag and drop feature in this pull request also in this pull request. My coding Partner @hammaazarok reviewed my code.

    opened by ishpaul777 0
Owner
Ishpaul Singh
Full-Stack Developer with a passion for developing compelling products. Html/Css/Javascript/Bootstrap /React & Redux/C++/ Ruby on Rails
Ishpaul Singh
GitHub
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
The to-do list project is an app that allows users to successfully organize their day by inputting prioritized tasks. The project also allows users to carry out the CRUD operations for (add, edit and delete). Two special features of the app are that it saves tasks in the local storage of the user's browser, so when the user reloads or revisits the app, the user can view a list of tasks formerly inputted, and it allows users to prioritize their tasks by dragging up and down the list section.

TO-DO-LIST This is a To Do List Project that dynamically displays tasks to be done with interactions for removing and adding task when completed or no

Francis Ugorji 9 Nov 1, 2021
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.

To-Do-List A To-Do-List App helps users to get their task cordinated and organised. This project is from microverse javascript curriculum which tests

zieeco 12 Jul 8, 2022
A todo-list app designed to help users manage their tasks. Users can create a task, read tasks, update tasks, delete task, check completed tasks and delete all checked tasks. Also contains basic tests. Built with WebPack,, Modular JavaScript, Jest Libary and LocalStorage.

todolist This project is created to understand the use of ES6 with Webpack Built With HTML, CSS and Javascript. Webpack. Live Demo (if available) http

Shotola Ololade 3 Oct 13, 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 To-Do List. It shows a minimalist design with the next features: Add new tasks, edit tasks, markup completed tasks, and erase all completed tasks. Built with JavaScript.

Project Name To Do List Built With HTML CSS JavaScript Live Demo To do List Live Demo Link Getting Started This is a To Do List. It shows a minimalist

Santiago Cárdenas 6 Jun 9, 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
It is a simple yet powerful to do list app in which you can add daily to-do tasks.you can edit, remove, check it to change its status to complete or not complete. it would save all the data and changes in local storage and track your daily tasks whether you have completed them or not.Built with vanilla JavaScript

To Do list - minimalist It is a simple yet powerful to do list app in which you can add daily to-do tasks. it would save all the data and changes in l

Zuhaib Amjad 5 Oct 9, 2022
A simple To-Do List app built using JavaScript, where users can add, edit and remove tasks from the list as well as marking them as completed.

To-Do List This is a to-do list application. Built With Languages: HTML5 & CSS3 JavaScript Preprocessors: Sass Technologies: Webpack Conventions and M

Gabriel Santo 3 Jun 25, 2022
To-Do list a web app for tracking personal progress through the day. Users can input a list of tasks and mark them as completed once they are done. Built with JavaScript and Webpack

To-do-List-Project To Do List Project Description. This project creates a simple HTML list of To Do tasks. It was built using webpack and served by a

Olawale Olapetan 7 Jul 8, 2022
A to-do list Web application that lets the user add, remove and reorder to do lists and checks a task when completed with a button to delete all completed task

TO DO LISTS A Web application that lets the user add, remove and reorder to do lists Built With Html,JS,CSS Webpack and other dependencies Git, Github

Promise Okechukwu 14 Nov 1, 2022
A single-page application that allow users to add their To Do items. The items could be checked as completed and the completed task can be removed. Built with JavaScript, HTML and CSS

To Do list Application This is a single page application that allows users to keep track of their tasks. Users can add the task and also check the che

Micheal Oguntayo 4 Oct 14, 2022
A simple To Do List application that allows users to save, edit, mark completed, and delete their to-dos, and save their list when application is closed. Build with JavaScript.

To Do List A simple To Do List online application that allows users to save, and manipulate their to-dos, and save their list when application is clos

Mahmoud Rizk 10 Dec 20, 2022
A simple To-do app project made using JavaScript ES6 and Webpack - Microverse. You can add, remove, check tasks, and remove all the tasks that were done at the same time. Feel free to see the live version, if you like it please give it a star!

To Do List a to do list javascript app buit using webpack and es6. Built With HTML CSS JavaScript Wepack Live Demo (if available) Live Demo Link Getti

Aron 8 Dec 17, 2022
A web app designed to keep track of activities that are done and those that are and not done. Users can add, delete, mark as completed and update the activities. Built with Javscript, html, css and webpack.e your activites

ToDoListApp A web app designed to help web keep track of activities that are done and those that are still pending. Users can add, delete, mark as com

Francis Wayungi 6 Dec 23, 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
An app to manage tasks. A user can add, delete and edit a task and mark it as completed, It uses simple GUI and relies on DOM manipulation in pure JS and using local storage.

An app to manage tasks. A user can add, delete and edit a task and mark it as completed, It uses simple GUI and relies on DOM manipulation in pure JS and using local storage.

KHITER Mohamed Achraf 6 Aug 20, 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