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

Related tags

Learning resource javascript css html font-awesome es6-modules
Overview

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, linters

Setup

To get a local copy up and running you'll need to have NodeJS installed on your local machine.

Install

After installing NodeJS please follow the next steps...

Usage

npm i

-- for installing dev dependecies.

npm run build

-- to run the project.

Testing

npm i jest

npm i jest-environment-jsdom

-- to install jest

npm test

-- to run the test

## Live Demo

[Live Demo Link](https://promzzykoncepts.github.io/To-Do-List/)

## Author

👤 **PROMISE OKECHUKWU**

- GitHub: [@promzzykoncepts](https://github.com/PromzzyKoncepts)
- Twitter: [@promzzy](https://twitter.com/promzzy)
- LinkedIn: [promiseokechukwu](https://linkedin.com/in/promiseokechukwu)

## 🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](../../issues/).

## Show your support

Give a ⭐️ if you like this project!

## Acknowledgments

- minimalist website
- etc

## 📝 License

This project is [MIT](./MIT.md) licensed.
Comments
  • testing for clear completed functions

    testing for clear completed functions

    Hey There, 😄

    In this PR, we have:

    • [x] created a clearCompleted.test.js file to test for updateChecked and clearCompleted functions in the project.
    • [x] Mocked the local storage to test for the respective functions.
    • [x] Mocked the Dom with JSDOM
    • [x] Added comments and corrected linter errors.
    • [x] Added, committed, and pushed all changes

    Thanks for reviewing! 👍

    opened by PromzzyKoncepts 0
  • Testing To Do list: part 1

    Testing To Do list: part 1

    Hey There, 😄

    In this PR, we have:

    • [x] created a function.test.js file for testing adding and removing functionalities of the project.
    • [x] wrote a function to test for editing and saving edited tasks.
    • [x] Mocked the local storage to test for the respective functions.
    • [x] Mocked the Dom with JSDOM

    Thanks for reviewing! 👍

    opened by username-forGithub 0
  • Interactive lists

    Interactive lists

    Hello there 🤗

    🔽 In this project, it was built with Javascript ES6 I:

    💯

    • [x] Created a new modules folder called functions.js and clearCompleted.js where I built all functions for the project 💯
    • [x] Created a function that: - lines through a task when the user marks it completed - sets each task to the local storage - deletes a task from local storage and displays output when marked as completed and cleared - on loading windows, displays all tasks from the local storage
    • [x] Imported and exported all necessary functions.
    • [x] checked for linter errors and made corrections
    • [x] Added, committed and pushed all changes

    if any changes are required, pls drop comments below

    Happy Reviewing! 👍🏻

    opened by PromzzyKoncepts 0
  • Create functions based on project requirements

    Create functions based on project requirements

    Hello there 🤗

    🔽 In this project, it was built with Javascript ES6 I:

    💯

    • [x] Created a new modules folder called functions.js where I built all functions for the project 💯

    • [x] Created a function that: - adds a task to the list by pressing enter key - sets each task to the local storage - deletes a task from local storage and displays output - on loading windows, displays all tasks from the local storage - allows a user to edit an already added task and save it to local storage.

    • [x] Imported and exported all necessary functions.

    • [x] checked for linter errors and made corrections

    • [x] Added, committed and pushed all changes

    if any changes are required, pls drop comments below

    Happy Reviewing! 👍🏻

    opened by PromzzyKoncepts 0
  • List structure and Project setup

    List structure and Project setup

    Hey There, 👍🏻

    In this project, I:

    • Setup the project with Webpack and other dependencies
    • Installed and enabled the webpack dev Server
    • created the HTML document and stylings for the project
    • Dynamically generated the HTML for the input values
    • Committed, pushed changes

    Happy Reviewing

    opened by PromzzyKoncepts 0
  • Morning Peer Code Review

    Morning Peer Code Review

    Recommendations

    • Consider removing unused lines of code that are commented.
    • [Optional] Consider adding clickable options to add a new task and also to edit existing tasks.
    • [Optional] Consider beaking functions from the function.js module inter smaller modules to ease readability.

    Appraisal

    • No Linter errors
    • Good use of HTML semantics
    • Great implementation of best JavaScript practice (DRY, YAGNI & KISS)
    • Impressive user experience and interface.

    Happy Happy!!!!!!!!!!

    opened by PraisesPJMT 0
  • Personal review on this project

    Personal review on this project

    Great Job implementing all functions and functionalities required in the project However I found some issues with your final code

    • in your deployed page, it gives off an error of 404 Not found Page, please kindly fix the error
    • The page has some repeated codes and some functions not necessary like the highlight function which contains some code that weren't implemented in the final work, Kindly address this issue and make use of only the codes and functions that are meant to be added or displayed Thank you!
    opened by PromzzyKoncepts 0
Owner
Promise Okechukwu
- Full-Stack Software Engineer and Mentor at @microverseinc - Journey to Full-stack Developer: HTML-CSS-JS-RUBY-RAILS--Node.JS - Open to new opportunities
Promise Okechukwu
GitHub https://PromzzyKoncepts.github.io/To-Do-List/
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 To-Do-List app that input's a task by user and saves itself in the localStorage with a unique ID and when the task it checked as complete, user can click on clear all task to remove the task form the UI and localStorage. Built using JavaScript ES6

To Do List App It's an app in which user will be able to add tasks into the list and when completed the user can check it as complete!. Built With HTM

Satyam Sharma 3 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
Module '2' Week two '2' project. The following technologies are used: HTML, CSS , Webpack, and JavaScript. Features of this app are rendered dynamically. It allows user to pinned or add task the will be doing on it. Local storage session is implemented. Task stay on app when user refresh or reload page. Task can be checked when completed.

To Do list: Description the project. Built With Major languages Frameworks Technologies used Screenshot of project Built With HTML, JAVASCRIPT, CSS, a

Evans Kupour 8 Nov 4, 2022
This "To-do-list" app is a simple web application that displays a list of task and allows you to add and remove task from that list. it is built with the latest technology namely; JavaScript with webpack Configuration.

To-do-list "To-do-list" is a simple web application that displays a list of task and allows you to add and remove task from that list. Built With HTML

Aniekan udo 10 Nov 21, 2022
This "To-do-list" app is a simple web application that displays a list of task and allows you to add and remove task from that list

This "To-do-list" app is a simple web application that displays a list of task and allows you to add and remove task from that list. it is built with the latest technology including but not limited to HTML, CSS, JavaScript and webpack to manipulate DOM.

Jerry Owusu 2 Feb 19, 2022
Microverse Module 02 Project: This is an educational project to make a TodoList web application, where the users can add new todo, remove todo, edit todo, mark todo as completed, and remove all completed todo. Built with Webpack

todo-list This project is about building a list of To Do tasks. Where you can save your daily activities and help in daily evaluation. Live demo you v

divine charlotte 25 Jan 3, 2023
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 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

Richard Chileya 5 Nov 11, 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 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
"To Do List" is a minimalist project that displays a list of task and allows you to add and remove task from that list. Built with JavaScript

To Do List Structure Solo programming project for module 2 week 2 of the Microverse Program. Live Demo Live Demo Link "To Do List" is a minimalist pro

Yersel Hurtado 7 Mar 5, 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
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
This is a project being built to show the usage of Webpack. It's an application were you are able to add a task to the list, and remove a task from the list

Microverse Project To Do List This is a project being built to show the usage of webpack. Its an application were you are able to add a task to the li

Roland Ossisa Yuma 4 May 6, 2022
This is a simple yet powerful to-do list app. It allows the user to add, remove, edit and check a task as completed.

To-Do-List App In this project, I made a simple website called To-do-List. The user is able to add and remove tasks, mark them as done or undone, the

Tracy Musongole 8 Dec 27, 2022
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.

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 JavaScrip

IBRAHIM AHMAT 7 Aug 4, 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
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