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

Overview

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 them as complete. You will build a simple website that allows for doing that, and you will do it using ES6 and Webpack!

Live Demo

You can check a live working version of this project here: live-demo

GETTING STARTED

Clone this repo : https://github.com/CindyDorantes/To-do-list.git

After cloning this project, run the following commands:

npm install
npm start

The npm install command installs all dependencies used in the project while npm start is used to start the development server and view the application on the browser.

Built With

  • HTML, CSS, JavaScript
  • Used Webpack as bundler
  • Icons from FontAwesome
  • (Used Lighthouse, Webhint, Stylelint, and ESLint as linters)

Authors

👤 Cindy Dorantes

🤝 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

  • Thanks to Microverse and my learning partners for their help and support.

📝 License

This project is MIT licensed.

Comments
  • Implement a function for clear all completed

    Implement a function for clear all completed

    Project requirements

    • Add a new JavaScript file and import it as a module:
      • it will contain methods related to the status updates (completed: true / false).
    • 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 (use filter() method).
    • Store the updated array of items in local storage, so the user gets the correct list values after the page reloads.

    Second review request

    Changes included:

    • toggle 'complete' property in the local storage from false to true.
    • display task in localstorage after refreshing.
    opened by CindyDorantes 0
  • Add and remove tasks

    Add and remove tasks

    Project requirements

    • Remove all hardcoded items from the tasks array.
    • Create a new JavaScript file for the new functionality.
    • Implement a function for adding a new task (add a new element to the array).
    • Implement a function for deleting a task (remove an element from the array).
    • Implement a function for editing task descriptions.
    • By default new tasks should 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 should equal to 5).
    • Deleting a task should update 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) should set to 1)..
    • All changes to the To Do List should be saved in local storage.
    opened by CindyDorantes 0
  • List structure

    List structure

    Project requirements

    • Set up a new project with webpack that is based on the webpack exercise you have already completed.
    • Create an index.html file and write your HTML markup here. Create an empty To Do List placeholder (<div> or <ul> element). The index.html file must be set as a template using the HTML Webpack Plugin.
    • Create an index.js file and set an array of some simple to do tasks (array of objects). Each task object should contain three keys:
      1. description [string].
      2. completed [bool].
      3. index: [number].
    • Write a function to iterate over the tasks array and populate an HTML list item element for each task.
    • On page load render the dynamically created list of tasks in the dedicated placeholder. The list should appear in order of the index values for each task.
    • Create a style.css and set rules for the To Do List. CSS must be loaded by Webpack Style/CSS Loader. Your list should be a clone of the part of the minimalist project captured in this video.
    • All your source files (index.html, index.js and style.css) must be located in /src directory and your distribution files will be generated by webpack and served by webpack dev server from /dist folder.
    opened by CindyDorantes 0
  • Peer To Peer Code Review Morning Session

    Peer To Peer Code Review Morning Session

    Great Project and great effort 🟢 🟢 🟢

    • We would suggest using imperative tense to write js comments. it is the standard practice.
    • instead of repeating the same work ( getting and setting Local storage) over and over again, you can set up a method to get and set local storage once and whenever needed call those methods.
    • Implementing adding tasks with entering the keyboard would increase the functionality of your app, please consider.
    • using the focus property to delete icon to appear might confuse the user since you need to click on the element to delete an icon from appearing.
    opened by Krishnabot 0
  • JavaScript best practices.

    JavaScript best practices.

    • There are several functions in the class-task.js file, You could improve the readability moving code to new modules.
    • You could use conditional shorthands for the folloing lines of code inside class-task.js; https://github.com/CindyDorantes/To-do-list/blob/9e4af805a5423417b6b1a64682c77cdb2f5bf038/src/modules/class-task.js#L23-L25 https://github.com/CindyDorantes/To-do-list/blob/9e4af805a5423417b6b1a64682c77cdb2f5bf038/src/modules/class-task.js#L47-L54
    opened by CindyDorantes 0
Owner
Cindy Dorantes
Full-stack developer. Enthusiastic and competitive. People-focused. Currently looking for new and exciting opportunities. | HTML | CSS | JavaScript |
Cindy Dorantes
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. 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. 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
Ajayi Ridwan 7 Oct 21, 2022
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.

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

Youta Lactio Christabelle 10 Aug 3, 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. 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.

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