To-do list" is an app that helps to organize your day. the user simply lists the things that needs to done and the app allows the to mark them as complete when they are done. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Related tags

Learning resource javascript css html webpack
Overview

Todo-list project

This is a Microverse project that entails a to-do-list.

Built With

  • HTML
  • CSS
  • Javascript
  • Webpack
  • VS code

Live Demo (if available)

Live Demo Link

Getting Started

  • Inorder to be able to set this up locally and eventually run it, follow the steps;

  • Open your Gitbash or your code editor's terminal and run the command git clone [email protected]:Christabelle143/Todo-List.git

  • Then you can pull the work from github to ur local machine using the git pull command.

  • run npm install to install all dependencies used in the project

  • run npm start to start the application on the browser.

Test unit

  • Install jest using the command $ npm install --save-dev jest
  • You can check for more information here jest version
  • Add this to package.json :
    • "scripts": {
      • "test": "jest"
    • }
  • run npm test

Author

👤 Author

🤝 Contributing

Contributions, issues, and feature requests are welcome!

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
  • Interactive Todo_list

    Interactive Todo_list

    In this project I;

    • Added a new JavaScript file and import it as a module: which contains methods related to the status updates (completed: true/false).
    • Added event listener to the checkbox (change).
    • Updated items object's value for completed key upon user actions.
    • Implemented a function for the "Clear all completed" button (use filter() method).
    • Stored the updated array of items in local storage, so the user gets the correct list values after the page reloads.
    opened by Christabelle143 1
  • Jest testing for editing, updating and the clear button function of Todo-list app

    Jest testing for editing, updating and the clear button function of Todo-list app

    In this project my partner and I;

    • Used jest framework for testing.
    • Create a test file(s) ([..].test.js) for a file(s) containing the following functions:
      • a function for editing the task description.
      • a function for updating an item's 'completed' status.
        • the "Clear all completed" function.
    opened by Christabelle143 0
  • Jest testing for add and remove function for todo-list app

    Jest testing for add and remove function for todo-list app

    In this project my partner and I;

    • Used jest framework for testing.
    • Created a test file ([..].test.js) for a file containing the add item and delete item functions that you want to test.
    • Mock HTML to test if add/delete functions add or remove exactly one
    • element to/from the list in the DOM.
    • Used describe() method for the test.
    opened by Christabelle143 0
  • Add remove todos

    Add remove todos

    In this project I;

    • Remove all hardcoded items from the tasks array.
    • Created a new JavaScript file for the new functionality called addremoveedit.js
    • Implemented a function for adding a new task (add a new element to the array).
    • Implemented a function for deleting a task (remove an element from the array).
    • 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 (i.e. if you're adding a 5th task to the list, the index of that task is equal to 5).
    • Deleting a task updates all remaining items' indexes, so they represent the current list order and are unique(i.e. if you're deleting the first task index 1 from the list, the index of the next task(2) is set to 1).
    • All changes to the To-Do List are saved in local storage.
    opened by Christabelle143 0
  • The Todo_list Structure

    The Todo_list Structure

    In this project I;

    • Set up webpack to build the todo_list project.
    • Used HTML, CSS and Javascript to create the list structure of the todo_list project.
    • Dynamically rendered the created list of tasks in the dedicated placeholder. The list appears in order of the index values for each task.
    • Created a style.css and set rules for the To Do List.
    • Add linters file to check linters errors.
    • Created a descriptive README.md file
    opened by Christabelle143 0
  • Review on javascript best practices

    Review on javascript best practices

    You did a great job 🎉 🎉. You implemented most of the best javascript practices.

    • Declaring all your variables and constants at the beginning of the file
    opened by Christabelle143 0
Owner
Youta Lactio Christabelle
Full-Stack Developer, Rails enthusiast, part-time guitarist. Stack: JavaScript, Ruby, Rails, React, Redux. Looking for my next job!
Youta Lactio Christabelle
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. 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. 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. You will build a simple website that allows for doing that, and you will do it using ES6 and Webpack!

To-do-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 t

Cindy Dorantes 12 Oct 18, 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
"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 created with HTML , CSS , JS and webpack and NPM.

My 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 com

Dyary Raoof Bayz Agha 5 Mar 29, 2022
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.

Project Demo Live Demo 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

Ajayi Ridwan 7 Oct 21, 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

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.

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.

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.

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