An interactive list of tasks where you can add, remove, edit, mark as completed and clear all done tasks. Tested with Jest.

Alex Puente

Last update: Nov 9, 2022

Related tags

Learning resource todo_list

Overview

To do List

This project its an interactive list of task where you can add and remove tasks dinamically

Project Images

Add new Tasks

Edit Existing Tasks

Check and cross completed tasks

Delete all completed tasks with one button

Built With

HTML
JS
CSS
Webpack
Tested with Jest

Getting Started

In this project we created an interactive page to add/remove elements to a list using ES6, Webpack, and JS Modules.

Installation

1 - Clone the repository (you must have Git Installed) using the following line of code:

git clone [email protected]:alexpuente0/todo_list

2 - Enther the Repository folder you created (todo_list) using cd todo_list in the command line

3 - Type code . in the command line to open the project in Visual Studio Code

4 - Install the dependencies necesarry to run the project using npm install

5 - Finally, run the project by typing npm run start from the command line.

Live Demo

You can check the app's functionality here.

Authors

👤 Alex Puente

GitHub: @alexpuente0
Twitter: @zero_rock
LinkedIn: Alejandro Puente

🤝 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

Code Reviewers
Learning Partners
Microverse Staff and Micronauts

📝 License

MIT Licensed

Comments

To do list Testing: Edit, complete & clear
On this pull request, we:

Added a test for the task editing function.

Added a test for the complete task status function.

Added a test for the Clear Completed Tasks Button.
opened by alexpuente0 0
Test Todo List: Add and Remove
On this pull request we:

Created tests with Jest to verify the correct functionality of Add and Remove Functions on the app.

Refactor some parts of the code to make it cleaner.
opened by alexpuente0 0
ToDo List Day3: Clear Checked Button
On this pull request we:

Used a JavaScript file and imported it as a module with true/false task completion status.

Added an event listener to checkboxes to register any status change (item completion status value on user action).

Implemented a function for the "Clear all completed" button using filter() method.

Set Local Storage for the updated array of items, so correct list values are loaded upon page reloads.
opened by alexpuente0 0
ToDo List Day 2: Add and Remove
##On this pull request, we:

Made feature to add new elements to task list

Made feature to remove existing elements from task list

Implemented task editing functionality

Added function to save/load the task list to and from local storage
opened by alexpuente0 0
Morning session peer to peer review
Great Job you have done!!!

However there are few suggestion to your project;

Maybe next time you can try to mock up the html from the index file and do a little bit of manipulation.

it will be nice to use methods next time you are refactoring to test.
opened by Adanzeakonobi 0
Peer-to-peer Morning session code review
@alexpuente0

The refactoring of the code was very appropriate

@wandergithub

Please keep in mind deleting all commented code: (Code commented) --- (Code commented)

@rskinnerc

Please consider sticking to ES6 module syntax

Please consider using lowercase or camel-case naming conventions for your variable (i.e List could be list)

@Trictonicmp: Although the tests work as expected, you could try to stick to the jest version test environment like jest-environment-jsdom
opened by rskinnerc 0

An interactive list of tasks where you can add, remove, edit, mark as completed and clear all done tasks. Tested with Jest.

Related tags

Overview

To do List

Project Images

Built With

Getting Started

Installation

Live Demo

Authors

🤝 Contributing

Show your support

Acknowledgments

📝 License

Comments

To do list Testing: Edit, complete & clear

Test Todo List: Add and Remove

ToDo List Day3: Clear Checked Button

On this pull request we:

ToDo List Day 2: Add and Remove

Morning session peer to peer review

Great Job you have done!!!

Peer-to-peer Morning session code review

Owner

Alex Puente

A to do list where you can add tasks, mark completed tasks and clear all completed tasks.

This project entails a To-do-List whereby a user can input the tasks they want to do, check the tasks done and also clear all tasks when all of them are completed. It is efficient for a user who want to manage their time and keep track of their day.

Microverse Module 02 Project: This is an educational project to make a TodoList web application, where the users can add new todo, remove todo, edit todo, mark todo as completed, and remove all completed todo. Built with Webpack

This is a To-Do List. It shows a minimalist design with the next features: Add new tasks, edit tasks, markup completed tasks, and erase all completed tasks. Built with JavaScript.

A Todo list app that allows the user to add tasks, delete, edit, chage, and clear all completed tasks. Built with JavaScript, CSS and Html.

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.

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.

A todo-list app designed to help users manage their tasks. Users can create a task, read tasks, update tasks, delete task, check completed tasks and delete all checked tasks. Also contains basic tests. Built with WebPack,, Modular JavaScript, Jest Libary and LocalStorage.

A web app designed to keep track of activities that are done and those that are and not done. Users can add, delete, mark as completed and update the activities. Built with Javscript, html, css and webpack.e your activites

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 To-do app project made using JavaScript ES6 and Webpack - Microverse. You can add, remove, check tasks, and remove all the tasks that were done at the same time. Feel free to see the live version, if you like it please give it a star!

A simple to-do list application that helps to organize your daily tasks and keep track of the task you have completed and the task you are yet to have completed, and also deleting the completed task leaving those yet to be completed.

This is a Microverse (@microverseinc) project in which I created a To-do list using Webpack. User can add a task, delete it, edit its description, and clear the completed tasks.

To-Do list a web app for tracking personal progress through the day. Users can input a list of tasks and mark them as completed once they are done. Built with JavaScript and Webpack

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

A simple To-Do List app built using JavaScript, where users can add, edit and remove tasks from the list as well as marking them as completed.

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 tested by JavaScript Unit testing using Jest framework. It is build by using ES6 and Webpack!