A Todo list app that allows the user to add tasks, delete, edit, chage, and clear all completed tasks. Built with JavaScript, CSS and Html.

Related tags

Learning resource javascript css html webpack
Overview

To Do list: interactive list

description:

  • A todo list app that allow users to add new task, delete, edit, and clear all completed.Built with JavaScript.

in this project:

  • Set up the linters for html, css, and JavaScript.
  • Set up webpack configurations.
  • Create a dynamic to do list using objects.
  • Create add, remove, and edit functions the save the changes in local storage.
  • Create a function to save the update the local storage when clicking the checkbox.
  • Create a function to clear all completed tasks.

Built With

  • Html
  • Css
  • JavaScript
  • Webpack

Live Demo (if available)

Click for Live Demo Link

Getting Started

steps to run the project

1 - Install npm.

npm install

2 - run the project

npm run dev

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

Prerequisites

  • HTML & CSS & JS
  • npm

Setup

  • linters for HTML, CSS and JS
  • Webpack

Run tests

  • Open your terminal, move to the directory where you want to clone the app (i.e cd Documents)
  • Enter git clone [email protected]:ibr5500.github.io/To-Do-List/
  • Change to the directory you just clone into (i.e cd To-Do-List)
  • Open index.html from the list of files in your left handside
  • Right click on your opened index.html file and launch the live server to preview
  • Include any possible changes and run "git add ."
  • Commit the changes with a descriptive message (i.e xyz features added)
  • Push the changes to changes to the repository (i.e git push)

Deployment

Author

👤 Ibrahim Ahmat

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Please give a ⭐️ if you like this project!

You might also like...

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

Jul 21, 2022

TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list.

TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list.

Todo TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list. App Screenshot Live Demo Todo Ap

May 12, 2022

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

Jul 25, 2022

ToDoList app helps users make their day organized and user can add tasks, delete completed tasks.Build with Javascript, HTML, CSS

ToDoList Description the project. This project we will help you organize your day. Add tasks Delete tasks And clear all tasks keep your list clean. Bu

Oct 11, 2022

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.

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

Jul 8, 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

Oct 9, 2022

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

My To-Do List 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 imp

Nov 11, 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

Nov 1, 2022

A to-do list app is a productivity tool designed to help users to create and maintain lists of tasks that they need to complete and it allows user to edit their tasks even after the task is saved. Built with CSS, HTML, and JAVASCRIPT.

Tumaini Maganiko 📗 Table of Contents 📗 Table of Contents 📖 To Do List PROJECT 🛠 Built With Tech Stack Key Features 🚀 Live Demo 💻 Getting Started

May 9, 2023
Comments
  • list structure

    list structure

    In this project I have:

    • Set up webpack configurations.
    • Set up linters configurations.
    • Added dynamic list tasks using objects.
    • Styled the layout to make it close to the original design.
    • Updated the READEME file.
    opened by ibr5500 3
  • Interactive list

    Interactive list

    in this project I have:

    • Update the local storage when checking the task as completed and uncompleted.
    • Add a function that clears all completed tasks.
    opened by ibr5500 2
  • Local storage funcs

    Local storage funcs

    In this Project I have:

    • Declared a module for the Task class.
    • Created a function to remove tasks and save the changes in localStorage.
    • Created a function to add tasks and save the changes in localStorage.
    • Created a function to edit tasks and save the changes in localStorage.
    opened by ibr5500 1
Owner
IBRAHIM AHMAT
Software developer, part-time athlete (Track). JavaScript, React. Looking for my next job!
IBRAHIM AHMAT
GitHub https://ibr5500.github.io/To-Do-List/
A simple todo list app that allows users to add, delete, edit, and clear all completed tasks, built with HTML, CSS, Javascript and webpack.

todo list In this website you will add books and also watch the lists of books. Built With HTML CSS JavaScript See Live click here Authors ?? HaaDiiii

Hamid Ali 10 Oct 7, 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 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
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
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.

Microverse To-Do list This is a Microverse (@microverseinc) project in which I created a To-do list using webpack. Requirements Build a Todo list usin

Manel Hammouche 11 Aug 3, 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
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
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