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

Last update: Feb 19, 2022

Overview

ToDo List

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 including but not limited to HTML, CSS, JavaScript and webpack to manipulate DOM.

Live Demo

Todo list

Built With!

HTML.
CSS.
JavaScript.
Webpack.
NPM.

Getting Started

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

Prerequisites

clone repo: https://github.com/jerryowusu/todo-list.git

A Web Browser (preferably Google Chrome)

Setup

Clone the GitHub Repository
Install npm package manager
npm install webpack-dev-server --save-dev
npm run build
npm start

Usage

Open index.html in Chrome

Authors

👤 Author

GitHub: @jerryowusu
Twitter: @jerryowusu11
LinkedIn: Jerry Owusu

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

📝 License

This project is MIT licensed

Comments

Interactive list
Todo List : Interactive list

In this milestone I:

Created a new javascript function that updates the tasks status ( completed : true / false ).

Added an eventListener to the checkbox to update status.

Implemented a function for the clear all button using the filter() method.

Stored and updated contents in user storage accordingly.
opened by jerryowusu 0
Add remove edit
Add-Remove-Edit

In this milestone I:

Created functions to add and remove task lists from a dynamic array.

Implemented a function to edit tasks descriptions.

All tasks deleted also updated the remaining item's indexes.

All changes on the To-Do lists are also updated on local storage
opened by jerryowusu 0
To Do list: list structure
To Do list: list structure

In this milestone I:

Used webpack boilertemplate to set up the project.

Created a todo list app with the help of ES6 modules

Set up the structure of the todo list app for further implementations
opened by jerryowusu 0
YAGNI, KISS, DRY
[ ] The createTodo function is a little bi long and complex. It would be more maintainable (KISS principle) and readable if you could break it down into smaller functions, and just call them inside.

Example:

You could try to declare the .onclick events in their own function, and just call it inside the createTodo.

[ ] The logic is perfect. However, I think it will be more readable to chain a .map method right after the `.filter. Suggestion: you can use the example bellow

this.allTodos = this.allTodos.filter((b) => b.completed === false) .map((b, index) => { b.index = index + 1; return b; });

[ ] I think it will be better to ignore the ./dist folder too. Since it can be generated on the fly using webpack.
opened by jerryowusu 0
HTML and CSS best practices.
Hi Jerry, congrats for a job well done. However, there are some few issues that you can still work on to improve your code.

[ ] You will need to set color variables and apply it in the various classes. eg: --color: primary-color

[ ] Display flex repeated several times. Kindly create a class and add it to the needed tags.
opened by jerryowusu 0
JavaScript Best practices
Hi Jerry, congrats for a job well done. However, there are some few issues that you can still work on to improve your code.

[ ] Use spaces and indentation to make your code more organised and beautiful.

[ ] Name variables in a way that will be clearer and understandable, such that they reveal the intention behind it. This will make your code easy to navigate and refactor.

[ ] All function names should be verbs or phrases fully exposing the intent behind them as well as the intent of the arguments. Their name should say what they do.
opened by jerryowusu 0

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

Related tags

Overview

ToDo List

Live Demo

Built With!

Getting Started

Prerequisites

Setup

Usage

Authors

🤝 Contributing

Show your support

📝 License

Comments

Interactive list

Todo List : Interactive list

Add remove edit

Add-Remove-Edit

To Do list: list structure

To Do list: list structure

YAGNI, KISS, DRY

HTML and CSS best practices.

Hi Jerry, congrats for a job well done. However, there are some few issues that you can still work on to improve your code.

JavaScript Best practices

Hi Jerry, congrats for a job well done. However, there are some few issues that you can still work on to improve your code.

Owner

Jerry Owusu

"To Do List" is a minimalist project that displays a list of task and allows you to add and remove task from that list. Built with JavaScript

A To-Do-List app that input's a task by user and saves itself in the localStorage with a unique ID and when the task it checked as complete, user can click on clear all task to remove the task form the UI and localStorage. Built using JavaScript ES6

"Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list. By building this application with JavaScript, the website is more interactive!

This is a project being built to show the usage of Webpack. It's an application were you are able to add a task to the list, and remove a task from the list

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

TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list.

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.

A to-do list Web application that lets the user add, remove and reorder to do lists and checks a task when completed with a button to delete all completed task

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

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 an educational and simple website that displays a list of books and allows you to add and remove books from that list built with HTML, CSS, JavaScript. The goal is to make it more organized by using modules and practice the ES6 syntax in the first Module

Awesome books is a simple website that displays a list of books and allows you to add and remove books from that list

"Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list.

A simple task manager that allows that allows users to add, remove and modify tasks from a list.

This is a simple yet powerful to-do list app. It allows the user to add, remove, edit and check a task as completed.

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!

Awesome books app is a basic website that allows users to add/remove books from a list. It is a single page app (SPA) which allow switching to different pages of the app without page load. Built with JavaScript.