A simple To-do list page, build with Webpack, HTML, CSS, and mostly JavaScript

Last update: Mar 4, 2022

Overview

To Do List

This is a To-do list that you can use to organize your activities of the day, it has the option to add new tasks, clear the ones completed, editing and deleting the tasks.

Built With

HTML
CSS
JavaScript
Webpack

Live Page

Page Link

Getting Started

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

Prerequisites

npm (node package manager)
Have git correctly installed.

Setup

Open a terminal window where you want to have installed a copy of the repository.

Install

Use this command to get a copy:

git clone https://github.com/Kakalanp/TO-DO-list.git

then, run npm install followed by the dependencies listed on the package.json file

Usage

Edit the content as you like.

Test

To test the functions used in this code, run : npm test.

Authors

👤 Joaquin Garrido

GitHub: @Kakalanp
Twitter: @LeccaJoaquin
LinkedIn: LinkedIn

🤝 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

Thanks to Microverse for the guidelines.

📝 License

This project is MIT licensed.

Comments

Added clear button
Clear button is finally here!

Now you can finally clear all the task you completed by the click of one button!

Added a button in HTML.

Styling clear button on CSS.

Added event listener in JS to clear button.

Modified deleteTask in JS to adapt to new functionality.
opened by Kakalanp 2
Interactive list
Dynamic page is here!

A lot has been improved and added for this to be possible:

Added deleteTask.

Added styling.

Added addTasks.

Added printTasks.

Added setGet.
opened by Kakalanp 1
Testing2
Testing the project functions

complete value refractor:

Test-case 1: Testing if a task is updated with a complete status.

editTask refractor:

Test-case 1: Testing if an item's description can be updated.

clearTask refractor:

- This refractor also mocks deleteTask

Test-case 1: Testing if one completed element is deleted from the array.

Test-case 2: Testing if none completed elements are deleted from the array.

Test-case 3: Testing if multiple completed elements are deleted from the array.
opened by Kakalanp 0
Testing1
Testing the project functions

addTask refractor:

Test-case 1: Testing if a task is added to an empty list

Test-case 2: Testing if a task is added to an existing list

deleteTask refractor:

Test-case 1: Testing if a single item is removed from a list.

Test-case 2: Testing if an array of items is removed from a list.
opened by Kakalanp 0
Do I follow JavaScript best practices? -- Self code review.
DRY rule:

In these parts, I declared the dynamic event listeners separately each time createList is executed: https://github.com/Kakalanp/TO-DO-list/blob/e84dbd510a31c23970c73cf163b6afcc53dd5d14/src/index.js#L46-L48 https://github.com/Kakalanp/TO-DO-list/blob/e84dbd510a31c23970c73cf163b6afcc53dd5d14/src/index.js#L60-L63 https://github.com/Kakalanp/TO-DO-list/blob/e84dbd510a31c23970c73cf163b6afcc53dd5d14/src/index.js#L34-L38 Although this is not very notorious, it may lead to some loops and exponentially growing code whenever the first function is called, a great solution to the problem would be fixing the next method: https://github.com/Kakalanp/TO-DO-list/blob/e84dbd510a31c23970c73cf163b6afcc53dd5d14/src/index.js#L9-L21 A great solution to the issue would be to, first, move the event listeners to the end of the createList declaration https://github.com/Kakalanp/TO-DO-list/blob/e84dbd510a31c23970c73cf163b6afcc53dd5d14/src/index.js#L10-L14 followed by the second step, importing the algorithms from another file, and calling them as a function inside the event listeners moved beforehand https://github.com/Kakalanp/TO-DO-list/blob/e84dbd510a31c23970c73cf163b6afcc53dd5d14/src/index.js#L15-L18 This way, everything is more organized and functional, preventing bugs and reducing the propensity to elongate the code meaninglessly.

HTML best practices:

You can always add your h1 tag inside a header tag whenever you don't have a navbar: https://github.com/Kakalanp/TO-DO-list/blob/e84dbd510a31c23970c73cf163b6afcc53dd5d14/src/index.html#L11-L12
opened by Kakalanp 0

A simple To-do list page, build with Webpack, HTML, CSS, and mostly JavaScript

Related tags

Overview

To Do List

Built With

Live Page

Getting Started

Prerequisites

Setup

Install

Usage

Test

Authors

🤝 Contributing

Show your support

Acknowledgments

📝 License

Comments

Added clear button

Clear button is finally here!

Interactive list

Dynamic page is here!

Testing2

Testing the project functions

complete value refractor:

editTask refractor:

clearTask refractor:

Testing1

Testing the project functions

addTask refractor:

deleteTask refractor:

Do I follow JavaScript best practices? -- Self code review.

DRY rule:

HTML best practices:

Owner

Joaquín G. L. Z.

In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications listed later in this lesson. This simple web page is built using webpack and served by a webpack dev server.

In this project, we built a simple HTML list of To Do tasks. This simple web page was created using webpack and served by a webpack dev server.

A simple HTML page maintaining list of To Do tasks using webpack and served by a webpack dev server.

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

The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

In this project, I built a simple HTML list of To-Do tasks. This simple web page was built using Webpack, creating everything from a JavaScript index file that imported all the modules and assets

In this project I have build a To Do List app that you can list, add, delete and manage your daily tasks better. Build with HTML, CSS, JS, ES6, JSON

This repo contains a To-Do List App developed as a Single Page Application using Webpack, Javascript, HTML and CSS.

"Awesome books" is a simple website that displays a list of books and allows you to add ang remove books from that list. Also you can store your data in your local storage. Build with JavaScript, HTML and CSS.

This project is about building a simple HTML list of To Do tasks. Built using webpack and served by a webpack dev server.

In this project we build a TVSeries website using Javascript, HTML, CSS and the TVMAze API. Each movie list on the page has a like and comments feature

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.

List of awesome people offering their time for free to have a "coffee chat" with others about different topics, mostly in a mentorship kind of way.

This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules to write modular JavaScript.

A simple todo list app that allows users to add, delete, edit, and clear all completed tasks, built with HTML, CSS, Javascript and webpack.

A simple Todo app to add list of books a user has read using HTML, CSS, Webpack, JavaScript and modular architecture

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

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.