A Minimalist to do list website where user can add, remove and edit multiple tasks and All the changes user makes in his to do list is saved in browser local storage so that it can be accessed later.

Overview

Testing for Add Remove function in To Do List App

  • Jest framework is used for testing.
  • Created (addremove.test.js) for a file containing the add item and delete item functions that you want to test.
  • Tests are written for pure functions. Some of those functions however will update localStorage and manipulate the DOM. For those, mocks are used.
  • A storage object is mocked to "imitate" localStorage operations.
  • HTML is mocked to test if add/delete functions add or remove exactly one element to/from the list in the DOM.
  • describe() method is used.
  • function for editing the task description.
  • function for updating an item's 'completed' status.
  • the "Clear all completed" function.
  • group tests using the describe() method.

Built With

  • Html
  • Css
  • Java script

Frameworks

  • webpack
  • jest

Live Demo

Live Demo Link

Getting Started

  • Use git clone https://github.com/Krishnabot/To-Do-List.git.git to clone this repo in your Local machine.
  • In terminal run npm run build and then npm start to run application.
  • Manually can be accessed in http://localhost:8081/.
  • In terminal run npm test to run test.

Author

👤 Krishna

Collaboration Partner

🤝 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

📝 License

This project is MIT licensed.

Comments
  • Interactive list testing part2

    Interactive list testing part2

    In this PR, we (Krishna and Jean) implemented the following elements :

    • function for editing the task description.
    • function for updating an item's 'completed' status.
    • the "Clear all completed" function.
    • Mock the HTML elements to test DOM manipulation functions.
    • group the tests using the describe() method.
    opened by Jeanbulambo 0
  • Testing to do list part1

    Testing to do list part1

    In this pull request -

    • The jest framework is used for testing.
    • Created (addremove.test.js) for a file containing the add item and delete item functions that you want to test.
    • Tests are written for pure functions. Some of those functions however will update localStorage and manipulate the DOM. For those, mocks are used.
    • A storage object is mocked to "imitate" localStorage operations.
    • HTML is mocked to test if add/delete functions add or remove exactly one element to/from the list in the DOM.
    • describe() method is used.
    opened by Krishnabot 0
  • To Do list: interactive list

    To Do list: interactive list

    In this pull request :-

    • All changes to the To-Do List should be saved in local storage.
    • it contains methods related to the status updates (completed: true / false).
    • An event listener is added to the checkbox.
    • Items object's value for completed key is updated upon user actions.
    • Function for the "Clear all completed" button is implemented using filter() method.
    • The he updated array of items is stored in local storage, so the user gets the correct list values after the page reloads.
    opened by Krishnabot 0
  • To Do list: add & remove

    To Do list: add & remove

    • 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.
    • Implement a function for deleting a task.
    • Implement a function for editing task descriptions.
    • 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 should be saved in local storage.
    opened by Krishnabot 0
  • List structure

    List structure

    In this Pull request:-

    • New project is set up with webpack.
    • index.html is created and all HTML markup was written there.
    • An empty To-Do List placeholder was created.
    • The index.html file is set as a template using the HTML Webpack Plugin.
    • Index.js is created and set an array of some simple to-do tasks. Each task object contains three keys: description [string]. completed [bool]. index: [number].
    • On page load, the dynamically created list of tasks is rendered in the dedicated placeholder.
    opened by Krishnabot 0
  • JavaScript best practices

    JavaScript best practices

    In this Issue, I did a self inspect of the following aspects of the repo

    • JavaScript best practices
    • DRY, KISS, and YAGNI rules.
    • HTML and CSS best practices
    opened by Krishnabot 1
Owner
Krishna Prasad Acharya
Aspiring Full-Stack Web Developer with a love for Web. Love reading fiction and writing blogs about sci-fi in my spare time. Open to New Opportunity
Krishna Prasad Acharya
A to-do list set up using webpack. It allows the user to add, remove, edit and check items on the list. All the data is saved in local storage.

Project Name: Webpack-Project: To-Do-List Description of the project: A simple to-do-list app created using webpack. Built With Major languages: HTML

Tracey Kadenyi 7 Aug 5, 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
JOSE ZEPEDA 10 Nov 18, 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
Tumaini Maganiko 7 May 9, 2023
An interactive list of tasks where you can add, remove, edit, mark as completed and clear all done tasks. Tested with Jest.

To do List This project its an interactive list of task where you can add and remove tasks dinamically Project Images Add new Tasks Edit Existing Task

Alex Puente 7 Nov 9, 2022
Leaderboard is a simple app that allow the user to record his name and his score, store to an api

Leaderboard Leader board is a simple app that allows the user to record his name and his score Build With Major languages used : HTML, CSS, JAVASCRIT;

Yannick 3 May 16, 2022
An app to manage tasks. A user can add, delete and edit a task and mark it as completed, It uses simple GUI and relies on DOM manipulation in pure JS and using local storage.

An app to manage tasks. A user can add, delete and edit a task and mark it as completed, It uses simple GUI and relies on DOM manipulation in pure JS and using local storage.

KHITER Mohamed Achraf 6 Aug 20, 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
Grayce Muthui 8 Jun 16, 2022
Microverse Module 02 Project: This is education project that allow user to add desire books to the list and also delete books. It makes use of local storage to preserve the data on the web browser.Built with HTML, CSS, JavaScript

Project Demo Live Demo AWESOME BOOK PROJECT Project allow user to add desire books to the list and also delete books. It makes use of local storage to

Ajayi Ridwan 8 Dec 3, 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
Aron 8 Dec 17, 2022
"Awesome books" is a simple website that displays a list of books and allows you to add ang remove books from that list. Also you can store your data in your local storage. Build with JavaScript, HTML and CSS.

Awesome Books Creating an app that adds and delete books from a list. Built With HTML CSS JavaScript Application Page url https://TimmyChan99.github.i

Fatima Ezzahra elmenoun 5 Jan 28, 2022
Awesome books is a vanilla Javascript which offers CRUD functionalities allowing you to add, remove edit boks info and store it to the local storage.

Awesome Books Awesome books is a simple project that displays new books when a user updates them. Built With HTML-5 CSS3 Javacript Linters Live Demo L

Nemwel Boniface 23 Aug 6, 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
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