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.

Grayce Muthui

Last update: Jun 16, 2022

Overview

Screenshot

Here is a screenshot for the project.

To-Do-List Project

This is a Microverse project that entails a to-do-list which one is able to add and remove tasks.

Built With

HTML & CSS & Javascript

Getting Started

Here is the link to the repo link
Clone this repo to get started by using git clone(insert the repo here)

Prerequisites

Git. Which is a open source distributed version control system designed for source code management
A text editor (e.g Visual Studio Code, Vim, Atom & Sublime.)
A web browser (e.g Chrome, Safari, Mozilla Firefox.)
Live Server which is a web extension that helps you to live reload feature for dynamic content (PHP, Node.js, ASPNET)

Deployment

Here is the live link to view this project link

Setup

Using git, clone the code to your machine or download a Zip File.

Authors

👤 Grace Muthui

GitHub: @Grayce Muthui
Twitter: @Grayce_Muthui
LinkedIn: @Grayce Muthui

🤝 Contributing

Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.

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.

To-Do-List This is my To-Do List project in the Microverse curriculum. Built With HTML CSS Javascript (Webpack) GitHub Live Demo Live Demo Link Gettin

May 7, 2022

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.

To-Do-List A simple HTML list of To Do built using webpack and served by a webpack dev server. Live Link See Demo Built With HTML, CSS, Javascript To

May 10, 2022

A single-page application that allows users to keep track of their books. Users can add the book details (book title and author) and also, and the books can also be removed. Built with JavaScript, HTML, and CSS

Project Name Awesome book with ES6 Description the project. This is a single page application that allows users to keep track of their books. Users ca

Oct 13, 2022

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: interactive list description: A todo list app that allow users to add new task, delete, edit, and clear all completed.Built with JavaScrip

Aug 4, 2022

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.

Microverse To-Do list This is a Microverse (@microverseinc) project in which I created a To-do list using webpack. Requirements Build a Todo list usin

Aug 3, 2022

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!

To Do List a to do list javascript app buit using webpack and es6. Built With HTML CSS JavaScript Wepack Live Demo (if available) Live Demo Link Getti

Dec 17, 2022

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.

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

Jul 28, 2022

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

To Do List App It's an app in which user will be able to add tasks into the list and when completed the user can check it as complete!. Built With HTM

Jul 8, 2022

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.

Project Name To Do List Built With HTML CSS JavaScript Live Demo To do List Live Demo Link Getting Started This is a To Do List. It shows a minimalist

Jun 9, 2022

Comments

Interactive list: Making the list interactive.
Description

In this project I achieved the following:

Added an event listener to the checkbox. :heavy_check_mark:

Updated items object's value for completed key upon user actions. :heavy_check_mark:

Implemented a function for the "Clear all completed" button. :heavy_check_mark:

Stored the updated array of items in local storage, so the user gets the correct list values after the page reloads. :heavy_check_mark:

Screenshot

Here is a screenshot for the project.

LIVE DEMO

https://graycemuthui.github.io/To-Do-List/
opened by Graycemuthui 0
Add remove items: Adding and removing items.
Description.

In this project I achieved:

Removed all hardcoded items from the tasks array. :heavy_check_mark:

Created a new JavaScript file for the new functionality. :heavy_check_mark:

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

Implemented a function for deleting a task (remove an element from the array). :heavy_check_mark:

Implemented a function for editing task descriptions. :heavy_check_mark:

By default the new tasks have the property completed set to false and the property index set to the value of the new array length. :heavy_check_mark:

Deleted a task should update all remaining items' indexes, so they represent the current list order and are unique. :heavy_check_mark:

All changes to the To Do List are saved in local storage. :heavy_check_mark:

Screenrecording

https://user-images.githubusercontent.com/95374858/171916890-8b8d6f53-c79d-410e-aff5-0981278bd50a.mov

LIVE DEMO

https://graycemuthui.github.io/To-Do-List/
opened by Graycemuthui 0
Html Structure : To-Do-List Skeleton.
Description.

In this feature I achieved the following:

Set up a new project with webpack. :heavy_check_mark:

Created an index.html file with an empty To Do List placeholder (
element). This index.html file is set as a template using the HTML Webpack Plugin. :heavy_check_mark:
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] and index: [number]. :heavy_check_mark:

Wrote a function to iterate over the tasks array and populates an HTML list item element for each task. :heavy_check_mark:

On page load rendered the dynamically created list of tasks in the dedicated placeholder and the list appears in order of the index values for each task. :heavy_check_mark:

Created a style.css and set rules for the To Do List and the CSS is loaded by Webpack Style/CSS Loader. :heavy_check_mark:

Changes made.

Rendered the dynamically created list of tasks in the dedicated placeholder and the list appears in order of the index values for each task. :heavy_check_mark:

Screenshot.

LIVE DEMO: https://graycemuthui.github.io/To-Do-List/
opened by Graycemuthui 0
Review on clean code.
Issues

On index.js : Try and use for each so as to the code more efficient.

Commendable work

Other than that your code is well written and there are no instances of DRY, KISS and YAGNI.

Also the HTML and CSS practices have been followed appropriately.
opened by Graycemuthui 1