A list manager that will allow a user organize a list of their tasks.

Related tags

Learning resource javascript css html webpack
Overview

todo-list

This project is a todo list that would allow a user manage a list of their tasks. They can conveniently create, update and delete tasks.

Here's how it looks:

todo_list_demo.mp4

Test is done using the Jest library. Here's a screenshot of its coverage:

image

Built With

  • HTML
  • CSS
  • Javascript
  • Webpack

Live Demo

Live Demo Link

Getting Started

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

Prerequisites

Setup

Deployment

  • Deploy on any web server that can host a Node.js runtime environment

Author

👤 Emmanuel Orji-Ihuoma

🤝 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

  • Microverse
  • Coding Partners
  • Code Reviewers

📝 License

This project is MIT licensed.

Comments
  • Remove commented code

    Remove commented code

    Kindly avoid committing old pieces of code as inline comments as found here.

    They will make your project look quite messy. You can always visit your commit history whenever you need to review a previous version of the code.

    opened by emmiiorji 1
  • Peer to Peer code review.

    Peer to Peer code review.

    @ Brenda309: Good job, your project looks good and codes are clean, but you should implements the function to the delete and edit better user experience. @Fatima-hub333 No issues found. @amklass11: No issues found.

    opened by Brenda309 1
  • Write test for application

    Write test for application

    This change has @AlphaNtihinduka and I implement a test for the application.

    With the local storage and DOM mocked, the following applies: There're functions for testing

    • editing the task description
    • updating an item's 'completed' status
    • the "Clear all completed" function.
    • adding an item
    • deleting an item

    Find below a screenshot of the test coverage:

    image

    Thank you for your kind review.

    opened by emmiiorji 0
  • Make the list more interactive

    Make the list more interactive

    This change implements some more functionalities for a better experience of the user.

    Some highlights includes:

    • Each to-do list marked as completed is saved to the local storage.
    • The "clear all completed" button is now functional and clears all tasks marked as completed.
    • All changes are saved so the user gets the correct list values after the page reloads.

    Here's a short video demo of the app:

    https://user-images.githubusercontent.com/20554583/167130783-3dcfdc22-544c-4860-937a-a790b45b8c78.mp4

    opened by emmiiorji 0
  • Implement add, remove and modify functionalities

    Implement add, remove and modify functionalities

    This change implements add, remove and modify of the todo tasks.

    The following applies:

    • Each created task has a default completed value as false.
    • The correct order of the remaining items is maintained on the delete of an item.
    • Every modification of the items gets saved in the local storage.

    Kindly find a screenshot of the app below:

    image

    opened by emmiiorji 0
  • Create the todo list structure

    Create the todo list structure

    This change implements the structure of the todo list app.

    • Webpack is used to bundle the modules including the stylesheet.
    • The DOM is loaded with a dummy todo array from within the script.
    • The loading to the DOM happens on page load.

    Find the screenshot below:

    image

    Kindly leave your comments and any suggested changes down below, they're appreciated.

    opened by emmiiorji 0
Owner
Emmanuel Orji-Ihuoma
Software developer, part-time pianist. Stack: HTML/CSS, JavaScript, Python, Node.js. On the lookout for a new position.
Emmanuel Orji-Ihuoma
GitHub https://emmiiorji.github.io/todo-list/
A list manager that will allow a user organize a list of their tasks.

A list manager that will allow a user organize a list of their tasks. They can conveniently create, update and delete tasks. The application is tested using the Jest library.

Emmanuel Orji-Ihuoma 4 May 15, 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
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
A simple HTML list of To Do tasks built using webpack, JS ES6 and CSS. This app allows users to add and delete tasks to organize their days.

To-Do List "To-do list" is an app that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as compl

Karla Delgado 15 Sep 26, 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 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
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 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

Tumaini Maganiko 7 May 9, 2023
See a banned user's profile, their friends, their favorite games, their followers etc.

Roblox-Banned-User-Viewer AKA BanView See a banned user's profile, their friends, their favorite games, their followers etc. Ever wondered how to view

SCR1PP3D 4 Nov 18, 2022
Todo List is a simple web-based application that gives users the ability to organize their work and life daily tasks. Built with JavaScript, HTML/CSS.

Javascript Project Todo List Using Javascript to create a simple Todo List project. Populating the todo list and then removing from the list. Built Wi

Ghazanfar Ali 9 Sep 28, 2022
To-Do List is a simple web based application that gives users an opportunity to note and organize their daily tasks. This app is built with JavaScript, HTML/CSS.

Project Name To-Do App Live Demo About Project In this feature, I built a to do list app which helps to list the tasks to be done at a particular time

Hatim Eddinani 8 Aug 18, 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

Nurgul Kereikhan 6 Oct 11, 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

Alzubair Alqaraghuli 5 Jul 25, 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
This project is a To-do list app which users can store and edit their Todo Tasks. Users can also change the order of their todo

Project This project is about a todo app bundling using webpack Additional description about the project and its features. Built With HTML CSS Javascr

Richmond Adu-Kyere 2 Jun 17, 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
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

Mustafa Fahimy 8 Jul 21, 2022
A Minimalist to do list website where user can add, remove and edit multiple tasks and All the changes user makes in his to do list is saved in browser local storage so that it can be accessed later.

Testing for Add Remove function in To Do List App Jest framework is used for testing. Created (addremove.test.js) for a file containing the add item a

Krishna Prasad Acharya 8 Aug 15, 2022
A To-DO-List app that allows user to create, update, and remove their daily tasks in and from the browser localstorage. Built with HTLM5, CSS, JavaScript, and Webpack.

To-Do-List A To-DO-List app that allows user to create, update, and remove their daily tasks in and from the browser localstorage. Built with HTLM, CS

Steven Ntakirutimana 5 Jul 7, 2022