A "to-do" list management project

Overview

To-do List

This project is about creating a functionable to-do list

Built With

  • HTML
  • CSS
  • Javascript
  • Linters for html&css and js
  • Webpack
  • ES6 classes

Website

Click here to access the website

Information

Work In Progress

This project is for an exercise for the microverse program. Features may be added across exercise completions

To run this repository locally, these commands should be run on the directory's terminal:

npm install

All the necessary packages will be installed with the command above

Author

👤 Author

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

  • To all the collaborators for the Readme Template and the Linters
  • The Microverse Team
  • My coding-partners and fellow cohort members

📝 License

This project is MIT licensed

Comments
  • Implemented add-remove functionality to To-do list

    Implemented add-remove functionality to To-do list

    Implemented features

    • Removed hard-coded previous list
    • Created the functionality to add lists to the HTML and the Tasks class
    • Once the list is populated, the functionality to edit and remove becomes available from the item's icon, showing 2 options:
      • Edit: edits the field both in HTML and on the Tasks class
      • Remove: removes an item from the to-do list and HTML
    • All changes are recorded, followed in the indexes values, and stored in the local storage
    opened by mullenlucas 4
  • Following JS best practices

    Following JS best practices

    Known issues

    • Add the option to add a new list with the 'enter' key
    • Remove the 'edit/remove' menu when clicking outside it
    • As shown in this: https://github.com/mullenlucas/todo-list/blob/b917cfba0713499535f46359d7e75892440e7950/src/modules/AddHtml.js#L1 Make the 'addHtml' function simpler with less confusing parameters
    • Change the way the index is being followed, since there are two variables 'currentIndex' and 'numt' and makes it confusing https://github.com/mullenlucas/todo-list/blob/b917cfba0713499535f46359d7e75892440e7950/src/index.js#L14
    opened by mullenlucas 0
  • Tests for edit, update completed and clear-all values

    Tests for edit, update completed and clear-all values

    Implemented features:

    • Created a new feature branch "clear-test"
    • Added clearedit.test.js file for more testing
    • Added to that file a test for the edit function
    • Added a test for the update completed value
    • Added a test for the clear-all values function

    These features have been implemented doing pair-programming

    opened by mullenlucas 0
  • Jest testing for add and remove functions

    Jest testing for add and remove functions

    Implemented features:

    • Set up jest configuration files and modules
    • Create a test file for the add and remove functions
    • Test these functions to check the length of the resulting list of elements

    This task was implemented doing pair-programming

    opened by mullenlucas 0
  • Completion of tasks through checkboxes and Clear completed

    Completion of tasks through checkboxes and Clear completed

    Implemented features:

    • Implemented new methods on the Tasks class to monitor checked value of the to-do list
    • Update the boolean value of the completion task to the Tasks class and to the localStorage object
    • Implemented a function to clear and remove all checked completed tasks on click
      • Update the index value and the respective ids both on the HTML and on the data structure

    Additional changes

    Some bugs were found on close inspection after a certain combination of add, remove and edit functions. All of those found have been addressed

    • Fixed bugs in remove functionality not updating the HTML id values after adding tasks
    • Fixed bugs on index value tracing on adding elements
    • Fixed bugs on event listeners collision

    Additional information:

    Some reviewers have had issues running this project. I tested it in several browsers and had it functioning, as well as cloned the branch on a clean folder and try running it from there.

    I am attaching a video of the functioning app for clarification on how it works

    https://user-images.githubusercontent.com/69157785/184515128-4eca2d01-8ee9-4732-8f5f-027b6d582bc5.mp4

    opened by mullenlucas 0
  • Todo list skeleton structure

    Todo list skeleton structure

    Developed features:

    • Added the list format to be implemented as a to-do list
    • Added header of the list, which contains a refresher icon
    • Added the "add" section below the title - To be implemented a textInput
    • Added some example to-do items
    • Added a 'clear completed' section to erase completed tasks from the list
    opened by mullenlucas 0
  • Peer-To-Peer-Code-Review

    Peer-To-Peer-Code-Review

    Your work is great. your update and delete method is good. You modulized well. But there is an optional comment

    1. Instead of adding tasks using(+), it is better to use the "enter key" to add tasks
    2. Kindly remove unnecessary comments from index.js line-6 and others
    3. Kindy fix mouse hover styling in the remove and edit
    opened by Kumilachew-g 1
  • Peer-to-Peer Code Review

    Peer-to-Peer Code Review

    Amazing job implementing the add & remove functions. Your code clean & really readable. One thing I noticed, that could make the code even better, is to use template literals to writhe a whole HTML-block inside a specific HTML-element, instead of creating & appending each element from scratch.

    opened by Peter1907 1
Owner
Lucas Mullen
I'm a Full-stack developer with React specialization. I'm also a bioinformatic passionate about building biology-related projects and constantly learning!
Lucas Mullen
The Frontend of Escobar's Inventory Management System, Employee Management System, Ordering System, and Income & Expense System

Usage Create an App # with npx $ npx create-nextron-app my-app --example with-javascript # with yarn $ yarn create nextron-app my-app --example with-

Viver Bungag 4 Jan 2, 2023
A "to-do" list management project

To-do List This project is about creating a functionable to-do list Built With HTML CSS Javascript Linters for html&css and js Webpack ES6 classes Web

Lucas Mullen 5 Sep 1, 2022
This project is about Leaderboard list app, that allows users to add score to the list and refresh the list.

Leaderboard This project is about Leaderboard list app, that allows users to add score to the list and refresh the list. Built With JavaScript HTML CS

Mihreteab Misganaw 3 Dec 19, 2021
"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
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
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
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
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

Ishmael Kargbo 3 May 12, 2022
The project is a To-Do list project to help plan daily, weekly or monthly activity. I used Html, CSS and JavaScript Technology to execute the project.

<<<<<<< HEAD To Do List This project is geared towards applying acguired skills for development of my porfolio through the following practices: Create

Victor Efosa Osagie 6 Dec 19, 2022
A great result management solution for schools, hospital, academy and other. If you are a php developer, contribute to this respository for more advancement of the project.

result-management-pro A great result management system for schools, hospital, academy and more. Contributions Willing to add more features to this gre

Adeleye Ayodeji 8 Jun 17, 2022
The project integrates workflow engine, report engine and organization authority management background, which can be applied to the development of OA, HR, CRM, PM and other systems. With tlv8 IDE, business system development, testing and deployment can be realized quickly.

介绍 项目集成了工作流引擎、报表引擎和组织机构权限管理后台,可以应用于OA、HR、CRM、PM等系统开发。配合使用tlv8 ide可以快速实现业务系统开发、测试、部署。 后台采用Spring MVC架构简单方便,前端使用流行的layui界面美观大方。 采用组件开发技术,提高系统的灵活性和可扩展性;采

Qian Chen 38 Dec 27, 2022
🏆Open source, free project management/issue tracking software to manage your work and projects

WorkClever ?? Open source, free project management/issue tracking software to manage your work and projects Features General Free to use, open source

WorkClever 11 Dec 27, 2022
Gthub action for Project (beta) management. Allows to update fields

titoportas/update-project-fields Use this action to automatically update GitHub project (beta) item fields. Note that this action does not support Git

null 3 Nov 3, 2022
Northeastern Electric Racing Project Management Dashboard - version 3

FinishLine by NER Also known as PM Dashboard v3. A project management web application built in Typescript, React, and Express. Almost all of our docum

Northeastern Electric Racing 14 Dec 23, 2022
This is a simple To-do list built with JavaScript, HTML and CSS. The project uses webpack to bundle JS-modules. Users can add and remove task from the list

This is a simple To-do list built with JavaScript, HTML and CSS. The project uses webpack to bundle JS-modules. Users can add and remove task from the list

Daniel Yerimah 6 Jun 7, 2022
A project that let's you see a list of scores using an API, you can add ypur own and it will be saved on the list forever

Leaderboard This is a project that let's you see a list of scores using an API, you can add ypur own and it will be saved on the list forever! Built W

Joaquín G. L. Z. 4 Mar 4, 2022
Book-list project, the user can add/remove books from the list.

Awesome Books - Solo Project A book-list project from Microverse. The user can add a book to the list by providing a title and an author. The user can

Virag Kormoczy 10 Sep 13, 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