Keep a track of all the tasks you need to do and Check off ones you have completed - Created using HTML, SCSS, JavaScript and Webpack.

Last update: Jul 28, 2022

Overview

To Do List

Keep a track of tasks you need to do.

An Application where you can keep a track of the tasks you need to do and checkout the ones that have already been completed.

Built With

HTML
CSS
JavaScript
Webpack

Live Demo

Live Demo Link

Getting Started

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

Prerequisites

A Web Browser (preferably Google Chrome)

Setup

Clone the GitHub Repository
Go to the Project Directory
Run npm install

Usage

Run npm build to build the project
Run npm start to start the live server

Authors

👤 Author1

GitHub: Awais Amjed
Website: Coding Fries
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

Microverse

Comments

JavaScript best practices Check ✅
Keep all the JavaScript code in JS files, not in the script tag. ✅

Keep your Code Clean following this advice:

type checks. ✅

naming. ✅

simplicity. ✅

DRY. ✅

If you use node modules, .lock files should be in the repository to avoid problems with future versions of the dependencies. ✅

If you use ES6, use object destructuring to get the values from an object. This way you can avoid repeating a lot of code. ⛔

Do not commit console.log to your repo. It’s ugly, it kills performance and it can make confidential data be visible to anyone using the browser tools to look at your website. ✅

Do not use window.alert() or window.confirm(). It’s ugly, impossible to style, stops code execution, and displays differently on different browsers. Use custom modal instead. ✅

Keep the number of changes/updates to the DOM as low as possible, they are very expensive for the browser. ✅

Keep the application logic separated from DOM manipulation tasks. ✅

Do not use document.write or eval ✅

Add node_modules dir to your .gitignore file as all those files are not needed in your repo (each team member will install all packages thanks to your package.json file). ✅

Do not commit old pieces of code as inline comments. They will make your project look messy. If you need to review a previous version of your code, you can always use git history. ✅
opened by awais-amjed 1
Peer-to-peer code review - M2W2

Great implementation. Regarding the specifications there is nothing to comment on.

Animations are nice, colors are pleasing and using Scss also was a good learning practice.

Great job.

opened by ahangarha 1
Unit tests
In this Pull Request, We added the following unit tests:

To add a new task. ✅

To remove an existing task. ✅

To check if a Task already exists. ✅

In the second part of this Pull Request, We implemented the following unit tests:

To check if a task has been added correctly. ✅

To check if a task status updates correctly. ✅

To check if the clear all completed function works correctly. ✅
opened by awais-amjed 0
Interactions
In this Pull Request, the following changes were implemented:

Added methods related to the status updates. ✅

Add event listener to the checkbox. ✅

Update items object's value for completed key upon user actions. ✅

Implement a function for the "Clear all completed" button. ✅

Store the updated array of items in local storage, so the user gets the correct list values after the page reloads. ✅

Live Demo Link
opened by awais-amjed 0
Crud functionality
In this Pull Request, the following changes were implemented:

Removed all hardcoded items from the tasks array. ✅

Created new JavaScript files for the new functionality. ✅

Implemented a function for adding a new task. ✅

Implemented a function for deleting a task. ✅

Implemented a function for editing task descriptions. ✅

By default new tasks have the property completed set to false and the property index set to the new array length. ✅

Deleting a task updates all remaining items' indexes, so they represent the current list order and are unique. ✅

All changes to the To-Do List are saved in local storage. ✅

Live Demo Link
opened by awais-amjed 0
List structure
In this Pull Request:

Added HTML & CSS to style the basic To-Do List Structure ✅

Added Tasks dynamically using JavaScript. ✅

Used Webpack to Create bundle everything. ✅

A deployed project to Github pages. ✅
opened by awais-amjed 0

Keep a track of all the tasks you need to do and Check off ones you have completed - Created using HTML, SCSS, JavaScript and Webpack.

Related tags

Overview

To Do List

Built With

Live Demo

Getting Started

Prerequisites

Setup

Usage

Authors

🤝 Contributing

Show your support

Acknowledgments

Comments

JavaScript best practices Check ✅

Peer-to-peer code review - M2W2

Unit tests

Interactions

Crud functionality

List structure

Owner

Awais Amjed

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.

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.

A daily activity tracking application that helps to organize your daily tasks and keep track of tasks that have been completed, or yet to be 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.

This is a simple web application of a To-do List in which you can add, remove and edit all your tasks and also you can mark each task as completed and delete all completed ones.

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 to do list where you can add tasks, mark completed tasks and clear all completed tasks.

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 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

The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day today activies. Check out the live demo.

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

A simple to-do app for managing daily tasks built with Webpack, JavaScript, HTML, and CSS with the functionality to manipulate multiple completed tasks and store them to local storage.

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 Todo list app that allows the user to add tasks, delete, edit, chage, and clear all completed tasks. Built with JavaScript, CSS and Html.

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

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.

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.