Todo List is a simple web-based application that gives users the ability to organize their work and life daily tasks. Built with JavaScript, HTML/CSS.

Overview

Javascript Project Todo List

Using Javascript to create a simple Todo List project. Populating the todo list and then removing from the list.

Built With

  • HTML/CSS
  • Javascript
  • Linters
  • Visual Studio
  • Git/GitHub
  • Webpack

Live Demo

Live Demo Link

Getting Started

Create a repo then clone it on to Visual Studio Code

Setup

Create index.html, style.css, and script.js file for the project. Add linters.yml to run the scripts Create a good Read Me File.

Install

Visual Studio Code

Usage

Develop Javascript Project using Visual Studio Code

Run tests

Apply linters to run the tests of the project

Deployment

Deploy onto the web using GitHub Pages

Authors

👤 Ghazanfar Ali

🤝 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

  • Hat tip to anyone whose code was used
  • Inspiration
  • etc

📝 License

This project is MIT licensed.

Comments
  •  Update Local storage

    Update Local storage

    Well done @gak92 , you have an excellent job 👍 , but I will like to call your attention to the following...

    • The deleted items are not updating in the local storage, kindly correct it
    • Work on the validation of the button so as not to accept empty input
    opened by Lizdev-05 2
  • 03 interactive list

    03 interactive list

    In this pull request:

    • Add a new file for checking the status of task completion
    • Add event Listener to the check box
    • update the value of task completion if the checkbox is checked
    • Remove all completed tasks from the UI and LocalStorage when clicking on the "clear all completed task" button
    • Update the functionality for page reload or refresh button
    opened by gak92 0
  • 02 add remove tasks

    02 add remove tasks

    In this pull request:

    • Add functionality to add a task to the list on press enter
    • Remove the task from the list when clicking on the delete icon
    • Update the task when you click on task from the list to update it. Press enter after an edit to update it.
    • Click on the top right refresh icon to refresh the list
    • When deleted the task the index value will be updated
    • All changes will be saved in the local storage
    opened by gak92 0
  • Peer to Peer Code Review

    Peer to Peer Code Review

    Highlights

    • No linters errors.
    • Highly functional project: the todo list can add, remove, and complete tasks flawlessly among other functions.
    • I especially appreciate how you included the reload functionality to set the state back to default despite it not being in the project requirements.
    • The data is saved to local storage as required.
    • In general, the project is simple, and well-designed.
    • Best JavaScript, HTML and CSS practices are followed.

    Areas of Improvement

    • Kindly capitalize the first letter of your commits as this constitutes a best practice.
    • Please include a functionality that retains the checked status of your tasks on refresh. This will improve the quality of your project and enhance the UX.
    • Some of your functions do not meet ES6 standards. Kindly use arrow functions instead as this enhances the quality of your code.
     static reloadPage() {
        const tasksList = LocalStorage.getData();
        tasksList.forEach((task) => {
          task.completed = false;
        });
        LocalStorage.saveData(tasksList);
      }
    
    opened by TracK92 0
  • Exercise - Best Practice Rules

    Exercise - Best Practice Rules

    1. JavaScript Best Practices:
    • No general issue was found
    • use of const and let for variable declaration
    • use of arrow functions
    1. DRY, KISS, and YAGNI Rules:
    • There is some code repetition, which can be improved by using function or ternary operator:

      if (LocalStorage.getData() === null) {
        tasksList = [];
      } else {
        tasksList = LocalStorage.getData();
      }
      
    • It would be better to keep the code organized by keeping addTask in the UI.js as other functions: const addTask = (newTask) => {

    • It would be better to use forEach instead of simple for loop:

      for (let i = 0; i < tasksList.length; i += 1) {
        tasksList[i].index = i + 1;
        }
        return tasksList;
      
    1. HTML and CSS best practices:
    • No issue found in HTML and CSS code for best practices
    opened by gak92 0
Owner
Ghazanfar Ali
Learning Full-Stack Development @microverseinc. JavaScript | Ruby | Ruby on Rails | React. Looking for new opportunities.
Ghazanfar Ali
To-Do List is a simple web based application that gives users an opportunity to note and organize their daily tasks. This app is built with JavaScript, HTML/CSS.

Project Name To-Do App Live Demo About Project In this feature, I built a to do list app which helps to list the tasks to be done at a particular time

Hatim Eddinani 8 Aug 18, 2022
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

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 v

divine charlotte 25 Jan 3, 2023
This project is a To-do list app which users can store and edit their Todo Tasks. Users can also change the order of their todo

Project This project is about a todo app bundling using webpack Additional description about the project and its features. Built With HTML CSS Javascr

Richmond Adu-Kyere 2 Jun 17, 2022
A simple HTML list of To Do tasks built using webpack, JS ES6 and CSS. This app allows users to add and delete tasks to organize their days.

To-Do List "To-do list" is an app that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as compl

Karla Delgado 15 Sep 26, 2022
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

To Do List This is a website that allows users to manage the tasks. users can add every task to do and when the task is done users can delete the task

Mustafa Fahimy 8 Jul 21, 2022
Todo-List is an online website where users can add a todo tasks. tasks can be removed , added, and edited. Built with Webpack and JavaScript.

To-do List Description To-do-list is an online website where users can add a todo tasks. tasks can be removed , added, and edited.Built with Webpack a

tarike bouari 9 Sep 9, 2022
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

Hammed Adisa 8 May 7, 2022
TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list.

Todo TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list. App Screenshot Live Demo Todo Ap

Ishmael Kargbo 3 May 12, 2022
ToDo list app is a simple web app that helps you organize your day, by adding, checking and deleting daily tasks

TODO List App "To-do list" is a WebApp tool that helps to organize your day. It simply lists the tasks that you need to do and allows you to mark them

Adel Guitoun 8 Oct 18, 2022
Tumaini Maganiko 7 May 9, 2023
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

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

todo list In this website you will add books and also watch the lists of books. Built With HTML CSS JavaScript See Live click here Authors ?? HaaDiiii

Hamid Ali 10 Oct 7, 2022
To Do list is a small but useful project to make list app , you can add tasks delete tasks and modify tasks, the project built using HTML, CSS, JavaScript

Project Name The To-Do-List app description this is a project in the second week of the second module in microverse. its a useful to do list that save

Alzubair Alqaraghuli 5 Jul 25, 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

IBRAHIM AHMAT 7 Aug 4, 2022
Grayce Muthui 8 Jun 16, 2022
This project is a list manager that will allow a user organize a list of their tasks. They can conveniently create, update and delete tasks.

TO DO LIST APP This project is a list manager that will allow a user organize a list of their tasks. They can conveniently create, update and delete t

Kehinde Onifade 8 Oct 7, 2022