A simple To-Do list with webpack including the functions of adding, removing, editing and selecting the completed tasks.

Overview

Project Name

To Do List

Built With

  • HTML
  • CSS
  • JS

Live Demo

To Do List

Getting Started

To get a local copy up and running:

  1. Clone this repository or download the zip folder:

git clone https://github.com/HtetNaing0814/to-do-list.git

  1. Navigate to the location of the folder in your machine:

you@your-Pc-name:~$ cd <folder>

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

Deployment

Here is the online version of To Do List

Author

👤 - Github: @HtetNaing0814

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check issue page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

Microverse

Comments
  • Testing: part 2

    Testing: part 2

    Implementation

    • Used jest framework for testing.
    • Created 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.
    • Used the mock storage object you have created in Part 1 of this project to mock the localStorage updates.
    • Mocked the HTML elements to test DOM manipulation functions.
    • Made sure tests using the describe() method.
    opened by rex-9 1
  • Testing part 1

    Testing part 1

    Implemented

    • Used jest framework for testing.
    • Created a test file ([..].test.js) for a file containing functions to test.
    • Wrote simple tests for the pure functions.
    • Used mocks for some of those functions however will update localStorage and manipulate the DOM.
    • Mocked a storage object to "imitate" localStorage operations
    • Mocked HTML to test if add/delete functions add or remove exactly one
    • element to/from the list in the DOM.
    • Made sure to group the tests using the describe() method.
    opened by rex-9 1
  • Code review 12/07

    Code review 12/07

    Hi Rex,

    Your code looks nice but still has some issues.

    • There are some console.log() in the index.js, starting at lines 34-47. Please remove these https://github.com/HtetNaing0814/to-do-list/blob/54231da0260dcf974525688156b1e59af364fc07/src/index.js#L35
    • You might want to refactor some if statements, which will make your code shorter and more readable. A guide can be found here. https://dev.to/sylwiavargas/5-ways-to-refactor-if-else-statements-in-js-functions-208e

    Happy coding!

    opened by mrEckendonk 0
  • Peer-peer code review

    Peer-peer code review

    Hello Rex, Good job on implementing all the functionality of the project :+1:

    Highlights:

    • Clean code
    • Good use of ES6 syntax
    • Awesome implementation

    Changes Required :recycle:

    Please consider using the form element to wrap your input tag in order to follow proper semantics and for accessibility purposes.

    opened by nedith 0
  • Interactive list

    Interactive list

    Implementations

    • Added a new JavaScript file and import it as a module:
    • It 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 rex-9 0
  • add and remove

    add and remove

    Implementations

    • Removed all hardcoded items from the tasks array.
    • Created a new JavaScript file for the new functionality.
    • Implemented a function for adding a new task (added a new element to the array).
    • Implemented a function for deleting a task (removed 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.
    • Deleting a task updates all remaining items' indexes, so they represent the current list order and are unique.
    • All changes to the To-Do List are saved in local storage.
    opened by rex-9 0
  • Add and remove

    Add and remove

    Implementations

    • Removed all hardcoded items from the tasks array.
    • Created a new JavaScript file for the new functionality.
    • Implemented a function for adding a new task (added a new element to the array).
    • Implemented a function for deleting a task (removed 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.
    • Deleting a task updates all remaining items' indexes, so they represent the current list order and are unique.
    • All changes to the To-Do List are saved in local storage.
    opened by rex-9 0
  • To do list: list structure

    To do list: list structure

    Things I've implemented are:

    • Set up a new project with webpack.
    • Created an index.html file and wrote the HTML markup here.
    • Created an empty To-Do List placeholder.
    • The index.html file was set as a template using the HTML Webpack Plugin.
    • Created an index.js file and set an array of some simple to-do tasks (array of objects).
    • Each task object contains three keys:
    1. description [string].
    2. completed [bool].
    3. index: [number].
    • Wrote a function to iterate over the tasks array and populated an HTML list item element for each task.
    • On the page, loaded renders the dynamically 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.
    • CSS is loaded by Webpack Style/CSS Loader.
    • The list is a clone of the part of the minimalist project captured in the video included in the instructions.
    • All the source files (index.html, index.js, and style.css) are located in the/src directory and the distribution files are generated by webpack and served by webpack dev server from the/dist folder.
    opened by rex-9 0
Owner
Rex Soul
A Friendly Spiritual Full-Stack Developer who loves meditation. ✨ Stack: JavaScript, Ruby, Rails, React, Redux, Laravel, Flutter. Looking for my next job!
Rex Soul
A simple To-Do list with webpack including the functions of adding, removing, editing and selecting the completed tasks.

To Do List To Do List provides you with functionalities such as: adding a Todo to the list removing a Todo from the list editing a Todo in the list ch

Htet Naing 14 Aug 25, 2022
An interactive app that allows adding, editing and removing tasks of a to-do list. Drag-and-drop featured added. Webpack was used to bundle all the Js modules in to one main Js file.

To-do List A to-do list app This app let you to set your own to-do list. Built With HTML CSS JavaScript WebPack Jest Live Page Page Link Getting Start

Kenny Salazar 7 May 5, 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

Michael Ugochukwu 3 May 10, 2022
zieeco 12 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

Santiago Cárdenas 6 Jun 9, 2022
A to do list where you can add tasks, mark completed tasks and clear all completed tasks.

To Do List A to do list where you can add tasks, mark completed tasks and clear all completed tasks. You can rearrange the order of the tasks by doubl

Amira 7 Mar 4, 2022
This is a simple web app that allows a user add list of tasks that needs to be completed. It is built using webpack and served by a webpack dev server.

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

Favour Ezeugwa 18 Aug 19, 2022
To-Do List project is the application for a to-do list, users can add and remove tasks from the to-do list. Mark tasks as completed.

To Do App To-Do List project is the application for a to-do list, users can add and remove tasks from the to-do list. Mark tasks as completed. Users c

Ishpaul Singh 6 Jul 21, 2022
Grayce Muthui 8 Jun 16, 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
This is a simple web application of a To-do List in which you can add, remove and edit all your tasks and also you can mark each task as completed and delete all completed ones.

To-Do List A simple web application of a to do list Built With HTML, CSS, JS, ES6 & Webpack Getting Started In this repository I created To-Do List SP

Juan Sebastian Sotomayor 12 Apr 11, 2022
A simple to-do app for managing daily tasks built with Webpack, JavaScript, HTML, and CSS with the functionality to manipulate multiple completed tasks and store them to local storage.

TODO LIST APP In this project, I have built a simple HTML list of To Do tasks. The list is styled according to the listed specifications . This simple

Selma Belhadj 8 Jun 7, 2022
In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications listed later in this lesson. This simple web page is built using webpack and served by a webpack dev server.

Awesome books:JavaScript Using Modules In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications

 Hassan Momanyi 10 Nov 25, 2022
To-Do list a web app for tracking personal progress through the day. Users can input a list of tasks and mark them as completed once they are done. Built with JavaScript and Webpack

To-do-List-Project To Do List Project Description. This project creates a simple HTML list of To Do tasks. It was built using webpack and served by a

Olawale Olapetan 7 Jul 8, 2022
this project is an online library application that enables users to keep track of books in their library by adding to and removing books from a list. Built with JavaScript ES6 syntax, HTML, and CSS

Awesome-Book1 The aim of this project is to restructure the Awesome books app code by using ES6 syntax and organising the workspace using modules. The

Afolabi Akorede 7 Jul 17, 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