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

Last update: Jan 3, 2023

Overview

todo-list

This project is about building a list of To Do tasks. Where you can save your daily activities and help in daily evaluation.

Live demo

you van see the poject live

Built With

-Lighthouse (An open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO and more). -Webhint (A customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors). -Stylelint (A mighty, modern linter that helps you avoid errors and enforce conventions in your styles).

Prerequisites

VScode or other editor

Install

Cloning the project

git clone this repo

Getting packages and debuging with Stylelint

npm install --save-dev [email protected] [email protected] [email protected] [email protected]

For validation detection using Stylelint Run

npx stylelint "*/.{css,scss}"

from parent source directory

Getting packages and debuging with Webhint

npm init -y npm install --save-dev [email protected]

For validation detection using Webhint Run

npx hint .

Author

👤 Divine Charlotte

GitHub: @Divine
LinkedIn: Divine Charlotte

🤝 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

-This project was inspired by Microverse](https://www.microverse.org)

Comments

make the list interactive
I added a new JavaScript file that will contain :

methods related to the status updates.

I added an event listener to the checkbox (change).

I updated the item's object's value for completed key upon user actions.

I implemented a function for the "Clear all completed" button (use filter() method).

finally Stored the updated array of items in local storage, so the user gets the correct list values after the page reloads.
opened by divinecharlotte 0
Add and remove
functionalities added

I created a new JavaScript file for the new functionality.

I Implemented a function for adding a new task (add a new element to the array).

I implemented a function for deleting a task (remove an element from the array).

I 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 value of the new array length .

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

All changes to the To-Do List are saved in local storage.
opened by divinecharlotte 0
add todo-list structure
I created an index.html file and write my HTML markup.

I created an index.js file and set an array of some simple to-do tasks (array of objects). Each task object contains three keys:

description [string].

completed [bool].

index: [number].

I wrote a function to iterate over the tasks array and populate an HTML list item element for each task and on-page, load renders the dynamically created list of tasks in the dedicated placeholder.
opened by divinecharlotte 0
peer to peer: code review
comments

a good job so far

professional readme

changes required

kindly fix some of the linters errors you have

hint you can do that by using Prefer default export
opened by HanningtoneM 0
Testing To Do list: part 1
Test add and delete item functionality

It's a pair programming task.

Set up the project with jest

Set up babel package and configuration to use ES6 as CommonJS by the jest

Followed AAA pattern.
opened by divinecharlotte 0
HTML and CSS best practices.

Hi @divinecharlotte,

Good job so far! There are some issues that you still need to work on to go to the next project but you are almost there! please it will be better if you follow the HTML and CSS best practices like in your src/index.html please remove 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 divinecharlotte 0
Peer to peer code review!

Good job so far your project is working smoothly as it tends to be. You got all the new ES6 features in your project also.

Things by which you can make your project in accordance with industrial standards:

I suggest you add an updated README file with a Live version link to your project.

opened by ABDULALI3468 0

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

Related tags

Overview

todo-list

Live demo

Built With

Prerequisites

VScode or other editor

Install

Cloning the project

Getting packages and debuging with Stylelint

For validation detection using Stylelint Run

from parent source directory

Getting packages and debuging with Webhint

For validation detection using Webhint Run

Author

🤝 Contributing

Show your support

Acknowledgments

Comments

make the list interactive

Add and remove

functionalities added

add todo-list structure

peer to peer: code review

comments

changes required

Testing To Do list: part 1

Test add and delete item functionality

HTML and CSS best practices.

Peer to peer code review!

Things by which you can make your project in accordance with industrial standards:

Owner

divine charlotte

Microverse Module 02 Project: This is educational project 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. Built with HTML, Sass, JavaScript and Webpack.

ToDoList app helps users make their day organized and user can add tasks, delete completed tasks.Build with Javascript, HTML, CSS

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.

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

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

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.

I Built This project in microverse's second module, in this single web application the user Can add, remove and display the list of books.

This is a Webpack based to-do-list project. With this app, users can add thier daily routine tasks to the list, mark them as complet, edit them or delete them.

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.

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

A simple To Do List application that allows users to save, edit, mark completed, and delete their to-dos, and save their list when application is closed. Build with JavaScript.

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 using JavaScript, where users can add, edit and remove tasks from the list as well as marking them as completed.