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.

Overview

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 not.

Mobile Version Desktop Version
screenshot. screenshot2
  • The To Do List Project is a website project that helps the user organize his/her day by allowing the user do the following:

  • Add tasks to be done

  • Mark each tasks as completed when the user has done the tasks.

The website allows the user do the following:

  • Add a new task

  • Remove a selected task

  • Mark a selected task as complete

  • Remove all completed tasks at once from the list of tasks

  • Repriorirtize tasks by dragging tasks up and down the list

Built With

  • HTML, CSS, JavaScript
  • Git, Github, Webpack

Prerequisites

Basic understanding of HTML, JavaScript, CSS Git and GitHub

Live Demo Link

Getting Started

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

  1. Copy this website https://github.com/Gambit142/To-Do-List-Project
  2. Navigate to the location of the folder in your machine you wish to save this folder: you@your-Pc-name:~$ cd <folder>
  3. Clone this repository or download the Zip folder: https://github.com/Gambit142/To-Do-List-Project.git
  4. Change Directory into the cloned repository: you@your-Pc-name:~$ cd <To-Do-List-Project>
  5. Open the repository with Visual Code Editor: you@your-Pc-name:~$ code . or open with any code editor of your choice.

Authors

👤 Francis Nzenwa Ugorji

🤝 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 for the opportunity to underatake such project using their platform
  • To family and friends who motivated us throughout this project
  • To Minimalist for the design template used in this project

📝 License

This project is MIT |licensed.

Comments
  • Code Repetition Review

    Code Repetition Review

    Hi Francis,

    Wonderful job implementing the CRUD functions and the draggable function as well. I think improvements can be made by putting the code below in a function and calling that function in each of the CRUD functions you created. Doing this will ensure your code is DRY.

    Wonderful work done, keep at it, and in no time, you will be a genius. 💪

    https://github.com/Gambit142/To-Do-List-Project/blob/212fdf9574ccd56c5f0ecd36bcda0e15ec8a3231/src/functionality.js#L71-L72

    opened by Gambit142 1
  • Functionality branch

    Functionality branch

    I created a website that dynamically displays tasksto be done in a day using Webpackand ES 2015. In this branch, I did the following to meet all project requirements:

    • Configure linters to ensure that there are no errors
    • Document the project in a professional manner
    • Use of correct Github flow

    In this branch, I added some functionality to the project for great User Experience (UX). The functionalities added were:

    • [ ] Ability to add new tasks after input in the form field
    • [ ] Clicking the ellipsis button for a dropdown menu to be displayed
    • [ ] Clicking the edit link in the dropdown to edit each input value/tasks
    • [ ] Clicking the delete link in the dropdown to delete each input value/tasks
    • [ ] Adding an event listener to the clear all button to clear all completed tasks
    • [ ] Resetting the task div to be empty after clicking the reload button
    opened by Gambit142 1
  • Interactive branch

    Interactive branch

    I created a website that dynamically displays tasks to be done in a day using Webpackand ES 2015. In this branch, I did the following to meet all project requirements:

    • Configure linters to ensure that there are no errors
    • Documentation of work in a professional manner
    • Use of correct Github flow

    All specific project requirements enlisted below were implemented in this branch:

    • Add a new JavaScript file and import it as a module:
      • the scripts should contain methods related to the status updates (completed: true /false).
    • Add event listener to the checkbox (change).
    • Update items object's value for completed key upon user actions.
    • Store the updated array of items in local storage, so the user gets the correct list values after the page reloads.
    opened by Gambit142 1
  • To do list branch

    To do list branch

    I created a website that dynamically displays tasks to be done in a day using Webpack and ES 2015 The following were done to meet the project requirements:

    • Configure linters to ensure that there are no errors
    • Documentation of work in a professional manner
    • Use of correct Github flow

    All specific project requirements enlisted below were implemented in this branch:

    • Setting up of project with Webpack
    • Using an index.html template file through HTML Webpack Plugin
    • Create an index.js file and set an array of objects that contains the following keys:
      • description [string].
      • completed [bool].
      • index: [number].
    • Use a function to iterate through the array and render the dynamically created list of tasks in the placeholder created in the index.html file
    • The list of tasks should appear in order using the index value
    • Create a style.css file that must be loaded using Webpack Style/CSS Loader
    • All your source files (index.html, index.js and style.css) must be located in_/src_directory and your distribution files will be generated by Webpack and served by webpack dev server from /dist folder.
    opened by Gambit142 1
  • Testing branch

    Testing branch

    This branch uses the jest framework for testing the CRUD functions used to make the todo-list app run successfully.

    I created two mock files called localstorage.js to imitate the functions of the browser's localStorage and crud.js to mock the CRUD functions.

    I created a __tests__ folder and put a crud.test.js file in it. The test file checks if the following operations are performed successfully:

    • Mock HTML to test if add/delete functions add or remove exactly one
    • element to/from the list in the DOM.
    • create a function for editing the task description.
    • create a function for updating an item's 'completed' status.
    • create the "Clear all completed" function.

    The tests for all the operations mentioned above were grouped in a description() method.

    opened by Gambit142 0
  • To Do List

    To Do List

    Magnificent job Francis, everything is effective and functional as expected. A suggestion regarding the UI, it would be nice if the drop down list would actually expand horizontally inside the corresponding div.

    opened by Rayan84 0
Owner
Francis Ugorji
A Full-Stack Developer who enjoys playing || watching soccer as a hobby. Stack: JavaScript, Ruby, RoR, React, Redux. I am open to new opportunities. :computer:
Francis Ugorji
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
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
AweSome Book App displays the book details entered by user and saves the information in Local storage. User can add and remove a book title/author to the library and from the library.

Awesome Book App with ES6 Used npm init -y command to create package.json file. Created the entry point for the JavaScript code called index.js Create

Krishna Prasad Acharya 8 Aug 15, 2022
Microverse Module 02 Project: This is education project that allow user to add desire books to the list and also delete books. It makes use of local storage to preserve the data on the web browser.Built with HTML, CSS, JavaScript

Project Demo Live Demo AWESOME BOOK PROJECT Project allow user to add desire books to the list and also delete books. It makes use of local storage to

Ajayi Ridwan 8 Dec 3, 2022
Grayce Muthui 8 Jun 16, 2022
This an CRUD app built were users can create, update and delete specific day to day tasks as they wish. The app is built using webpack and served with webpack dev server

Todo-List This an CRUD app built were users can create, update and delete specific day to day tasks as they wish. The app is built using webpack and s

Duane David 10 Sep 28, 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
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
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
This project is a list manager that will allow a user organize a list of their tasks. They can conveniently create, update and delete tasks.

TO DO LIST APP This project is a list manager that will allow a user organize a list of their tasks. They can conveniently create, update and delete t

Kehinde Onifade 8 Oct 7, 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
The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day today activies. Check out the live demo.

Todo List App The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day toda

Atugonza ( Billions ) Joel 14 Apr 22, 2022
Awesome books is a vanilla Javascript which offers CRUD functionalities allowing you to add, remove edit boks info and store it to the local storage.

Awesome Books Awesome books is a simple project that displays new books when a user updates them. Built With HTML-5 CSS3 Javacript Linters Live Demo L

Nemwel Boniface 23 Aug 6, 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 to-do list set up using webpack. It allows the user to add, remove, edit and check items on the list. All the data is saved in local storage.

Project Name: Webpack-Project: To-Do-List Description of the project: A simple to-do-list app created using webpack. Built With Major languages: HTML

Tracey Kadenyi 7 Aug 5, 2022