This To-Do list was made using Webpack, JS, HTML and CSS.

Augusto Galindo Ali

Last update: Jun 21, 2022

Overview

To Do list

In this project I build a mobile and desktop version of a website, using what I learned in HTML and CSS.

Built With

HTML
CSS
JavaScript

Live Demo

For a live demo of the Portfolio click here.

Getting Started

To get a local copy of the project, follow these steps:

Open the terminal and navigate to the folder where you would like to put these files.
Type the following commands into the terminal:

git clone https://github.com/jsug9/To-Do-list
cd To-Do-list
open index.html

Run Tests

To run tests follow the following steps:

Open your terminal and navigate to the todo directory.
Install jest typing into your terminal: npm install --save-dev jest
Run the test typing into your terminal: npm run test
If you want to check the coverage type into your terminal: npm run coverage

Author

👤 Augusto Galindo

GitHub: @jsug9
LinkedIn: Augusto Galindo

🤝 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

👤 Dangelo Arrivillaga

GitHub: @Dangelo-JAN

📝 License

This project is MIT licensed.

Comments

Testing 2
Add test to check if an item is edited in local storage.

Add test to check if an item is edited visually.

Add test to check if an item is marked completed in local storage.

Add test to check if an item is marked completed visually.

Add test to check if completed items are removed from local storage.

Add test to check if completed items are removed visually.
opened by jsug9 0
Testing
Add test to check storage when an element is added.

Add test to check if the element is displayed when added.

Add test to check storage when an element is removed.

Add test to check if the element is removed "visually".
opened by jsug9 0
Interactive
To-dos can be marked or unmarked as completed.

To-dos' isComplete status is saved on localStorage.

Clear All Button removes all completed to-dos.

Clear All Button updates the indices of to-dos.

Clear All Button saves changes to localStorage.
opened by jsug9 0
Add remove
When the enter key is pressed on the placeholder, a new to-do is added with the length of the array as the index.

To-dos can be deleted.

To-dos can be edited.

To-dos can be marked or unmarked as completed.

All changes are saved to localStorage

When a to-do is deleted, its index is updated (It appears that linters are not working on pull requests, kindly run them locally)
opened by jsug9 0
M2 W3 Day5 Js Unit Testing
Good Points 🙌

The codebase is very organized and separated. Good job

Everything looks nice

Using coverage. Good job with implementing optional requirement 👍
opened by fed1k 0
Do I follow JavaScript best practices?

https://github.com/jsug9/To-Do-list/blob/bbd103c40f3d5292f84e82a50dc82e1a1b4d5fb3/src/index.js#L46 https://github.com/jsug9/To-Do-list/blob/bbd103c40f3d5292f84e82a50dc82e1a1b4d5fb3/src/index.js#L54 This functions should be executed through the class methods

https://github.com/jsug9/To-Do-list/blob/bbd103c40f3d5292f84e82a50dc82e1a1b4d5fb3/src/modules/completedCheck.js#L7 https://github.com/jsug9/To-Do-list/blob/bbd103c40f3d5292f84e82a50dc82e1a1b4d5fb3/src/modules/completedCheck.js#L10 This is not "very" DRY, the code is repeated when only e.target.checked is a bool.

opened by jsug9 0

This To-Do list was made using Webpack, JS, HTML and CSS.

Related tags

Overview

To Do list

Built With

Live Demo

Getting Started

Run Tests

Author

🤝 Contributing

Show your support

Acknowledgments

📝 License

Comments

Testing 2

Testing

Interactive

Add remove

M2 W3 Day5 Js Unit Testing

Good Points 🙌

Do I follow JavaScript best practices?

Owner

Augusto Galindo Ali

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

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 built a simple HTML list of To Do tasks. This simple web page was created using webpack and served by a webpack dev server.

In this project, I build a simple HTML list of To Do tasks. This simple web page will be built using webpack and served by a webpack dev server.

"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

To-do list" is an app that helps to organize your day. the user simply lists the things that needs to done and the app allows the to mark them as complete when they are done. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Keep track of your tasks with this minimalist to do list made with Javascript CSS HTML and Webpack.

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

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.

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

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

This is a to do list app using HTML, CSS, JavaScript and webpack

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

Developed using (HTML, CSS, Webpack, Vanilla.js)To-do list is a tool that helps you to organize your day

This is a simple web app that allows a user add list of tasks that needs to be completed. It is built using webpack and served by a webpack dev server.

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.

Website to present projects made by me and that are part of my personal portfolio. It was made using React, HTML y Scss (CSS).

"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. It is created with HTML , CSS , JS and webpack and NPM.