To-Do-List is a tool that helps you organize your day

Related tags

Learning resource To-Do-List
Overview

To-Do-List

To-Do-List is a tool that helps you organize your day. It allows you to add a list of things you want to do, marking them as complete as well as removing them from the list. It is built using Webpack and ES6 syntax.

todo-list-pic

Built With

  • HTML
  • CSS
  • Javascript ES6
  • Webpack
  • Material UI icons

Live Demo

If available can be seen here: https://stalwart-fairy-18e659.netlify.app/

Getting Started

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

Setup

Run tests

  • Run [npx hint .] to test the markup or HTML
  • Run [npx stylelint "/.{css,scss}] to test the stylesheet
  • Run [npx eslint .] to test and check Javascript files.

Prerequisites

  • Have some knowledge about HTML, CSS.
  • Javascript Dom Manipulation.
  • ES6 Modules
  • ES6 Syntax
  • Webpack
  • Understanding of github and github workflow.
  • Be familiar with version control system like git.
  • Understanding of Linters basics.
  • Familiarity with flexbox.

👤 Author: Anthony Mwenyo

🤝 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

The design of the project was inspired by:

Minimalist website

📝 License

This project is MIT licensed.

Comments
  • Todo list Add and remove items

    Todo list Add and remove items

    The following features were implemented:

    • Remove all hardcoded items from the tasks array.
    • Create a new JavaScript file called tasks.js for the new functionality.
    • Implement a function for adding a new task.
    • Implement a function for deleting a task.
    • Implement a function for editing task descriptions.
    • By default new tasks property "completed" set to false.
    • Property index set to the value of the new array length.
    • Update all remaining items' indexes when one item is deleted,
    • Save all changes to the To Do List in local storage.
    • Add checked item functionality and save changes to local storage. as shown.

    Screenshot 2022-04-30

    opened by mwenyoa 4
  • Test edit, update, and clearComplted functions

    Test edit, update, and clearComplted functions

    The following features were implemented:

    • Use jest framework for testing.
    • Update tasks.test.js for a file:
    • Add a test for editing the task description function.
    • Add a test for updating an item's 'completed' status function
    • Add test for the "Clear all completed" function.
    • Used describe method to group tests.
    opened by mwenyoa 1
  • Test Todo List Add and Delete feature

    Test Todo List Add and Delete feature

    The following features were implemented:

    • Create a tasks.test.js file to test the add item and delete item functions.
    • Mock HTML to test add/delete functions from the list in the DOM.
    • Group tests using the describe() method.
    opened by mwenyoa 1
  • Todo list interactivity

    Todo list interactivity

    The following features were implemented:

    • Add event listener to the checkbox (change).
    • Update items object's value for completed key upon user actions.
    • Implement a function for the "Clear all completed" button using filter array helper method.
    • Store the updated array of items in local storage.
    • Add refresh page behavior when the element with "autorenew" material icons class is clicked.
    opened by mwenyoa 0
  • Todo list Strucure

    Todo list Strucure

    The following features were implemented:

    • Add todo list structure
    • Add web pack to the todo list structure
    • Add on page load dynamic content rendering functionality
    opened by mwenyoa 0
Owner
Anthony Mwenyo
Full-Stack Software Developer | Stack: JavaScript, PHP, SQL, C++, Java | Open to new opportunities.
Anthony Mwenyo
GitHub
"To-do list" 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

To Do List "To-do list" 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 compl

Sahar Abdel Samad 16 Aug 9, 2022
"To-do list" 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.

Todo_List Description "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark th

Cynthia Inga 4 Apr 19, 2022
"To-do list" 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.

todo-list "To-do list" 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 comple

Okoroji Victor Ebube 13 Jul 4, 2022
"To-do list" 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.

To-Do List "To-do list" 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 compl

Juan Palacios 10 May 24, 2022
To-do list 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 JavaScript.

To Do List Application that record the tasks to remind you and got many features that you might need. This is an image for it Live Demo Live Demo Here

Omar Ragheb 14 Jul 13, 2022
To-do list 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 JavaScript.

To-do List To-do list 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 complet

Leonardo Goss 9 Mar 4, 2022
"To-do list" 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.

Hello! I am a software developer! I can help you build a product, feature or website. Tak a look of my works. If you like what you see and have a proj

Roberto A. Baños Alvarez 5 Apr 29, 2022
To-do list" 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. I build a simple website that allows for doing that, and I do it using ES6 and Webpack!

Project Name : TO-Do list "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mar

Chris Siku 13 Aug 22, 2022
"To-do list" 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.

To do list "To-do list" 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 compl

Ndikumana Isaie 4 Jun 10, 2022
"To-do list" 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. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Hello! I am a software developer! I can help you build a product, feature or website. Take a look of my works. If you like what you see and have a pro

ABDUL ALI 7 Jul 17, 2022
To-do list" 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. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Microverse Webpack Javascript For the second Javascript milestone in building a todo website, set up a new repository and prepare it for development u

TOFANA SILVIA 16 Jun 13, 2022
"To-do list" 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.

To-Do-list "To-do list" 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 compl

Tushar Singh 4 Jul 19, 2022
"To-do list" 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.

To-do List build with Webpack "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to

PRATAP PANABAKA 5 Aug 19, 2022
A to-do list is a tool that helps organize your day. It simply lists the things that you need to do and allows you to mark them as complete.

ToDo-list "To-do list" 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 comple

Mohammed Hussen 6 Aug 20, 2022
To-do list 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.

To Do List This Projects involves building a clone of minimalist ToDo List. Built With HTML, CSS & JS Live demo Getting Started To get a local copy up

Samuel Munyi 6 Oct 7, 2022
This is the version to be reviewed - "To-do list" 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. A simple website that allows for doing that, and built using ES6 and Webpack!

Todo-list "To-do list" 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 comple

Didier Peran Ganthier 4 Dec 20, 2022
To-do list 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. It is tested by JavaScript Unit testing using Jest framework. It is build by using ES6 and Webpack!

Project Name To Do list: interactive list Description the project. In this project, I added some functionality to my application to make it interactiv

Harrison Njuguna 5 Nov 11, 2022
Developed using (HTML, CSS, Webpack, Vanilla.js)To-do list is a tool that helps you to organize your day

Developed using (HTML, CSS, Webpack, Vanilla.js)To-do list is a tool that helps you to organize your day. It lists the tasks that you need to do and allows you to mark them as complete. It was built as an introduction to web dev using ES6 and We…

Dagmawi zewdu 6 Mar 4, 2022
To-Do-List is a tool that helps you organize your day

To-Do-List is a tool that helps you organize your day. It allows you to add a list of things you want to do, marking them as complete as well as removing them from the list. It is built using Webpack and ES6 syntax.

Anthony Mwenyo 5 May 17, 2022