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.

Related tags

Learning resource To-Do-List
Overview

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 student's ability on using webpack in a real life project.

Built With

  • HTML
  • CSS
  • JAVASCRIPT
  • Webpack

Live Demo Link

Live Demo

Getting Started

To get a local copy up and running:

  1. Clone this repository or download the Zip folder:

https://github.com/zieeco/To-Do-List.git

  1. Navigate to the location of the folder in your machine:

you@your-Pc-name:~$ cd <folder>

Author

👤 zieeco

Credits

Lesson by Microverse

Contributing

Contributions, issues, and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project and how we manage to build it!

📝 License

This project is MIT licensed

Comments
  • Add remove edit

    Add remove edit

    To Do List: Add_remove

    In this milestone, I did the following

    • Added a status update file in the src folder
    • Used the npm run build command to generate the files in the dist folder
    • Ensured there were no linters error
    • Added some classes in the style.css file
    • Added the index parameter to the saveToDos() in the index.js file according to the required changes from the previous code review..
    opened by zieeco 1
  • Add list structure

    Add list structure

    To Do List: List Structure

    In this milestone, I did the following

    • Added all the webpack configuration
    • Added the html file in the src folder
    • Added the style.css file in the src folder
    • Added the index.js file in the src folder
    • Ensured there were no linters error
    opened by zieeco 1
  • Interactive list

    Interactive list

    To Do List: Interactive-list

    In this milestone, I did the following

    • Updated the dist folder by running the npm run build
    • Added the clearAllCompletedTask() in the index.js file and statusUpdate.js file
    • Added some classes and media queries in the style.css file
    • Ensured there were no linters error

    This is the final feature of my To-Do List App. It gives the user total control over the app to improve the user experience.

    opened by zieeco 0
  • Personal issue checking for the use of javaScript, HTML and CSS best practices

    Personal issue checking for the use of javaScript, HTML and CSS best practices

    Hi @zieeco 👋🏻,

    You've done a great job so far by implementing all the features of your app, However: There are some issues that you still need to work on according to following the JavaScript, HTML, and CSS best practices! Please refer to the links below:

    • [ ] Please reduce the addition of unnecessary trailing spaces where you declared your variables, I think it would be better if you added the trailing space after all your variables declaration, therefore making them next to each other here and also to these lines where you added the eventListeners in your index.js file.
    • [ ] According to the YAGNI rule, comparing this line of code with this line of code, the latter: label variable and its CSS property label.style.textDecoration: 'line-through' was never having any effect in your code, so why add it when you won't use it. Please remove it as it does nothing in your application!
    • [ ] Also, the variable ***itemm*** is not descriptive enough. Please name your variables in a way that reveals the intention behind them in your statusUpdate.js file.

    Cheers and happy coding! :computer:

    opened by zieeco 0
  • Peer to Peer Review

    Peer to Peer Review

    Hey @zieeco :wave: . Your project is looking great, it's perfect :100: . However, there are some issues you should work on:

    • [ ] As required in the project, your task index should start at 1 instead of 0. And even if you delete something in the list, your tasks index should be updated.
    opened by tresorsawasawa 1
Owner
zieeco
Full-Stack Developer, part-time drummer with knowledge in HTML | CSS | JavaScript - still learning to update my skills for my next job!
zieeco
GitHub
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 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
ToDo list app is a simple web app that helps you organize your day, by adding, checking and deleting daily tasks

TODO List App "To-do list" is a WebApp tool that helps to organize your day. It simply lists the tasks that you need to do and allows you to mark them

Adel Guitoun 8 Oct 18, 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
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.

Screenshot Here is a screenshot for the project. To-Do-List Project This is a Microverse project that entails a to-do-list which one is able to add an

Grayce Muthui 8 Jun 16, 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 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
Todo application is a web app that helps to organise your daily activities. It lists all the activities that you need to be completed and allows you to mark them as complete or not. Tasks can also be dragged and dropped in any position. It's a minimalistic website built using JavaScript ES6, Webpack and CSS

Todo Application Todo application is a web app that helps to organise your daily activities. It lists all the activities that you need to be completed

Shamuobe Buingo Joseph 5 May 3, 2022
This is simple To-Do App for managing the daily tasks and to keep track on tasks during the day.

Event Page Todo List. This is simple To-Do App for managing the daily tasks and to keep track on tasks during the day. Built With HTML CSS JavaScript

Miftah Amin 16 Mar 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
Application that uses the localStorage to keep the information on the activities that are pending to be done and also those that are completed

Application that uses the localStorage to keep the information on the activities that are pending to be done and also those that are completed. It provides an option to edit activities and also delete them. The clear all applies to those that are marked as completed by selecting the checkbox.

Oscar Bermudez 8 Apr 8, 2022
To Do List Application Organize your tasks with simple add and delete functionality. Organize your items with ease.

TODO-LIST To Do List Application Organize your tasks with simple add and delete functionality. Organize your items with ease. Additional description a

Steve 12 Jul 22, 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
Keep a track of all the tasks you need to do and Check off ones you have completed - Created using HTML, SCSS, JavaScript and Webpack.

To Do List Keep a track of tasks you need to do. An Application where you can keep a track of the tasks you need to do and checkout the ones that have

Awais Amjed 19 Jul 28, 2022
A simple app that helps a user monitor daily activities by adding, storing and deleting activities.Built with HTML,CSS and JavaScript

To-do-list A simple list app that allows a user to add and remove tasks. Built With HTML CSS JS Webpack Live Demo Click To-do-list to see the page. Ge

Catherine K 7 Apr 8, 2022
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 This is a project that create a simple todo tool that help you organize your day. This is build using ES6 and webpack. Built With HTML CSS

suzana marsela 8 Oct 26, 2022
A single-page application that allows users to keep track of their books. Users can add the book details (book title and author) and also, and the books can also be removed. Built with JavaScript, HTML, and CSS

Project Name Awesome book with ES6 Description the project. This is a single page application that allows users to keep track of their books. Users ca

Micheal Oguntayo 4 Oct 13, 2022
A simple project to keep track of your activities. It allows basic CRUD operations to organize your to do list.

todo-list A simple project to keep track of todo list. Built With HTML CSS Javascript Webpack Live Demo You can checkout the live version here Getting

Abdelmejid Oumer Ali 9 Jul 20, 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