Use this project as a tool for remembering your daily tasks, confirming, editing, remove are actions you can do to tasks, your data is saved in the LocalStorage so every time you open or refresh the page all changes will be present.

Overview

To-do-list

The porpuse for this project is show You, the way how to implement webpack in a project creating a To-Do list in for add a template to create the project in memory before build it in /dist directory, you can go trough the project and use the same approach.

Built With

  • Webpack
  • EC6
  • HTML
  • CSS
  • FLEX BOX
  • Linters

Getting Started

** Download,test,edit, make a fork just read the instructions and enjoy the project **

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

you must have intalled git.

you must have an account on git hub.

Install a text-editor you prefer.

copy link the repository.

clone this repo

LIVE DEMO

Authors

👤 Author1

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

📝 License

This project is MIT licensed.

Comments
  • Testing code

    Testing code

    Apply testing code with jest:

    To set up the project with jest we:

    • ensure the functions are pure: pure functions
    • Add DOM manipulation actions. DOM Manipulation
    • Install [(go to your terminal and execute ) npm install --save-dev @babel/plugin-transform-modules-common ] to use import and export instead of module.export. in order to Add this file .babelrc on the root directory.
    • Add a src/modules/tests/structure.test.js an "add" method class to apply the corresponding testing with our mock file ( DOM manipulation for each Add ).
    • Add a src/modules/mocks/structure.js a "delete" method class to mock our principal structure.js file. ( DOM manipulation for each Remove and we use localStorage in this function you could appreciate local storage data at src/modules/mocks/structure.js code line #42 to add and 36-37 to see on the console

    IMPORTANT:

    • open your terminal and use "npm test" to see the jest results. It is going to execute the package.json > "scripts": { "test": "jest structure.test.js"} in order to deploy the project.
    opened by J2ZROMERO 1
  • To do list structure

    To do list structure

    opened by J2ZROMERO 1
  • Testing code functions

    Testing code functions

    Use jest framework for testing.

    a function for editing the task description. src/modules/mocks/structure.js #codeline 48, when the input is modified localStorage updates too.

    a function for updating an item's 'completed' status. src/modules/mocks/structure.js #codeline 74 when the checked is true localStorage updates too.

    the "Clear all completed" function. src/modules/mocks/structure.js #codeline 92 when elements checked are true localStorage updates too.

    Use the mock storage object created to update LocalStorage.

    Mock the HTML elements to test DOM manipulation functions.

    use of describe() jest on each new function.

    IMPORTANT: open your terminal and use "npm test" to see the jest results. It is going to execute the package.json > "scripts": { "test": "jest structure.test.js"} in order to deploy the project.

    SUGGEST: uncomment console.log on (src/modules/tests/structure.test.js // codelines | 22, 46, 66, 86, 107) to see how data is changing on local storage every time you execute a method.

    opened by J2ZROMERO 0
  • Sintax / destructuring-data / arrays.

    Sintax / destructuring-data / arrays.

    • Change tag name footer from form section https://github.com/J2ZROMERO/To-do-list/blob/160cbdfe3cd3f13cff15687eebf5fdea3eba0173/src/index.html#L22

    • For readability, add blank lines to separate large or logical code blocks.

    https://github.com/J2ZROMERO/To-do-list/blob/160cbdfe3cd3f13cff15687eebf5fdea3eba0173/src/index.html#L16

    • For readability, add two spaces of indentation https://github.com/J2ZROMERO/To-do-list/blob/160cbdfe3cd3f13cff15687eebf5fdea3eba0173/src/index.html#L15 https://github.com/J2ZROMERO/To-do-list/blob/160cbdfe3cd3f13cff15687eebf5fdea3eba0173/src/index.html#L16 https://github.com/J2ZROMERO/To-do-list/blob/160cbdfe3cd3f13cff15687eebf5fdea3eba0173/src/index.html#L21 https://github.com/J2ZROMERO/To-do-list/blob/160cbdfe3cd3f13cff15687eebf5fdea3eba0173/src/index.html#L22

    • you can implement destructuring data on this line: https://github.com/J2ZROMERO/To-do-list/blob/160cbdfe3cd3f13cff15687eebf5fdea3eba0173/src/index.js#L38

    opened by J2ZROMERO 0
  • To do list check

    To do list check

    Important! execute npm start to deploy the project

    Every time you refresh the page and have data, checked, or unchecked tasks on local storage it is added on the page Every interaction (add - remove - refresh - remove by group) keeps an index in order from 1,2,3 and so on. You can check some tasks and delete them by a group. you can edit the task by clicking on the letter and confirming in the icon check shown at the right

    Add a new JavaScript file and import it as a module:

    • Add status.js file to check tasks

    Add event listener to the checkbox

    Update items object's value for completed key upon user actions.

    • every interaction like add/remove/update keeps changes on localStorage and Objects data.

    Add a function for the "Clear all completed" button using filter() method.

    opened by J2ZROMERO 0
  • To do list functions

    To do list functions

    execute "npm start" in your console to deploy the page.

    Add functionalities:

    Create a new JavaScript file for the new functionality

    • Add structure.js file with Task class.

    Implement a function for adding a new task (add a new element to the array).

    • Add create function structure.js code line #13

    Implement a function for deleting a task (remove an element from the array).

    • Add delete function structure.js code line #41

    Implement a function for editing task descriptions.

    • Add update function structure.js code line #71

    y 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).

    • Parameters setting on index.js file code line #15 and manage on structure.js file code line #13

    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)..

    • Managed by deleting function on structure.js file code line #41

    All changes to the To Do List should be saved in local storage.

    • saving changes with localS functions in the structure.js file and refreshing every update made on an event like edit/add/remove
    opened by J2ZROMERO 0
Owner
JOSE ZEPEDA
Computer systems engineer, Stack: Java - JS - SQL, passionate about technology and sports, open to work.
JOSE ZEPEDA
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.

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 a

Krishna Prasad Acharya 8 Aug 15, 2022
Satyam Sharma 3 Jul 8, 2022
Aron 8 Dec 17, 2022
A To-DO-List app that allows user to create, update, and remove their daily tasks in and from the browser localstorage. Built with HTLM5, CSS, JavaScript, and Webpack.

To-Do-List A To-DO-List app that allows user to create, update, and remove their daily tasks in and from the browser localstorage. Built with HTLM, CS

Steven Ntakirutimana 5 Jul 7, 2022
Grayce Muthui 8 Jun 16, 2022
The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome Books This is the restructured version of the famous awesome-books project! Here you can find JavaScript broken into modules, using import-exp

Matt Gombos 12 Nov 15, 2022
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 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
Angular JWT refresh token with Interceptor, handle token expiration in Angular 14 - Refresh token before expiration example

Angular 14 JWT Refresh Token example with Http Interceptor Implementing Angular 14 Refresh Token before Expiration with Http Interceptor and JWT. You

null 8 Nov 30, 2022
Tumaini Maganiko 7 May 9, 2023
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
Automatically reload the frontend when content changes are saved in the panel.

Kirby Reload On Save This plugin for Kirby 3 automatically reloads the frontend when content changes are saved in the panel. It uses the Broadcast Cha

JUNO 21 Jun 7, 2023
This project is built with JavaScript, Webpack, HTML & CSS, Leaderboard api. When user clicks on Refresh button it hits the api and responds with the data, The user can also post data to the api

leaderboad Description the project. this project is about the leaderboad i did during Microverse to build a website for adding Data to the API and fet

Emmanuel Moombe 4 May 30, 2022
kimchi is a staple Korean side dish that's present at almost every meal.

(✿◠‿◠)*:・゚✧ (c) 02/2021 Dear reader, Essentially, kimchi is a staple Korean side dish that's present at almost every meal. It's fermented napa cabbage

null 0 Sep 20, 2022
👌A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.

Throw out pop-ups confirming the submission of form! A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for dro

Vic Shóstak 35 Aug 24, 2022
Microverse Module 02 Project: This is an educational project to make a TodoList web application, where the users can add new todo, remove todo, edit todo, mark todo as completed, and remove all completed todo. Built with Webpack

todo-list This project is about building a list of To Do tasks. Where you can save your daily activities and help in daily evaluation. Live demo you v

divine charlotte 25 Jan 3, 2023