This is my To-do-list project for my Javascript module at Microverse.

Jonathas Tavares

Last update: Oct 8, 2021

Related tags

Miscellaneous to-do-list

Overview

To do List

This is a To do list project built for learning purposes.

Built With

HTML
Bootstrap
Javascript
CSS
HTML Webpack

How to use it

Clone the repository using Github Desktop or by command line using the following command on the folder you want the repository to be:

git clone https://github.com/jonathastavares/to-do-list.git

Now use the following commands to setup the project

npm init -y
npm install webpack webpack-cli --save-dev
npm install --save lodash
npm install --save-dev html-webpack-plugin
npm install --save-dev style-loader css-loader
npm run build

Live Version

Check out the Live Version.

Author

👤 Jonathas Tavares

🤝 Contributing

Contributions, issues and feature requests are welcome!

License

This project is MIT licensed.

Show your support

Give a ⭐️ if you like this project!

Comments

Do I follow JavaScript best practices?

HTML and CSS looks Ok in my project.

*** list.js *** static getDeleteButton(id) { const deletebtns = document.querySelectorAll('button[type=submit][id=delete-btn'); const deletebtn = deletebtns[id]; return deletebtn; } Line 80 - getDeleteButton function is not being used, I can comment/remove this part of code. YAGNI

static completeItem(event) { const listArray = List.dataArray(); if (listArray[event.target.value - 1].completed === false) { listArray[event.target.value - 1].completed = true; localStorage.setItem('listArray', JSON.stringify(listArray)); } else { listArray[event.target.value - 1].completed = false; localStorage.setItem('listArray', JSON.stringify(listArray)); } } Line 96 and Line 99 - Repeated same line inside both If's conditions, I could place this line after the IF statement and remove 1 line of the function, because this one will be executed independent of which IF condition are we in.

opened by jonathastavares 1
Milestone # 1 - List Structure
Pull request for milestone # 1

I've already finished this project last week, It's fully working with all functionalities, a pull request was created for project review.

Built with:

HTML

CSS

Bootstrap

Javascript

Webpack
opened by jonathastavares 1
Tests Milestone # 2
In this milestone, we added positive and negative tests for Editing, Completed, and Clear all Completed functions.

Built with:

HTML

CSS

JavaScript

Jest

Bootstrap

Webpack

hacktoberfest-accepted
opened by jonathastavares 0
Tests Milestone #1
This is the milestone 1 of To Do List testing, in this milestone, we added tests for add and remove functions.

Built with:

HTML

CSS

Javascript

Jest

Bootstrap

hacktoberfest-accepted
opened by jonathastavares 0
Milestone #2 - Add EventListeners to checkboxes
In this milestone, I added EventListeners to the checkboxes, and now I am able to update the completed status for true or false.

Built with:

HTML

CSS

Javascript

Webpack
opened by jonathastavares 0

Owner

Jonathas Tavares

FullStack Web Developer with knowledge in HTML, CSS, JavaScript, Ruby, Ruby on Rails, React, and Redux. Looking for new challenges, and opportunities.

GitHub

🔬 list user's npm pkgs sorted by monthly downloads

npm maintainer dash list a user's npm packages sorted by monthly downloads very experimental proof of concept, not to be relied upon even a little bit

3 Feb 15, 2022

Travel Lovers - an application that allows a travel enthusiast to create an account to log past, upcoming, and bucket-list trips

Travel Lovers Table of Contents Description Tools Used Installation Instructions Usage License Tests Questions Description Travel Lovers is an applica

5 Aug 31, 2022

A simple implementation of a task list application that can be used to add, remove, edit and check users tasks

"To-do list" is a tool that helps to organize daily activites. It simply lists the things which are needed to be done and allows user to mark them as complete. In this step of project, the CRUD (create, update, delete) methods are implemented. This simple web page is built using webpack and served by a webpack dev server.

5 Mar 28, 2022

A Project maintaining Repository ! Hosted for Hacktoberfest 2021.

HacktoberFest 2021 Hacktoberfest encourages participation in giving back to the open source community by completing pull requests, participating in ev

20 Oct 9, 2022

A prebuilt Express JS Authentication & Authorization Project based on a REST API interface.

A prebuilt Express JS Authentication & Authorization Project based on a REST API interface. It has the basic authentication and Authorization routes with the latest security measures implemented so that your application is much more secure from day 1. You are welcome to build upon and extend this project as and when required.