├── src
├── modules
│ ├── dragDrop.js
│ ├── todo.js
│ ├── localStorage.js
│ ├── todoStatus.js
│ ├── todoCRUD.test.js
│ └── todoCRUD.js
├── index.js
├── index.html
└── style.css
├── .gitattributes
├── Screenshot.png
├── babel.config.json
├── .babelrc
├── .hintrc
├── .eslintrc.json
├── .stylelintrc.json
├── webpack.config.js
├── dist
├── index.html
└── main.js
├── LICENSE
├── package.json
├── .gitignore
├── .github
└── workflows
│ └── linters.yml
└── README.md
/src/modules/dragDrop.js:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.html linguist-language=JavaScript
2 |
--------------------------------------------------------------------------------
/Screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZewdieMc/To-Do-List/HEAD/Screenshot.png
--------------------------------------------------------------------------------
/babel.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/preset-env"
4 | ]
5 | }
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "test": {
4 | "plugins": ["@babel/plugin-transform-modules-commonjs"]
5 | }
6 | }
7 | }
--------------------------------------------------------------------------------
/src/modules/todo.js:
--------------------------------------------------------------------------------
1 | export default class Todo {
2 | constructor(index, completed = false, description) {
3 | this.completed = completed;
4 | this.index = index;
5 | this.description = description;
6 | }
7 | }
--------------------------------------------------------------------------------
/src/modules/localStorage.js:
--------------------------------------------------------------------------------
1 | const storeData = (todoList) => {
2 | localStorage.setItem('todoObjects', JSON.stringify(todoList));
3 | };
4 |
5 | const readData = () => JSON.parse(localStorage.getItem('todoObjects')) || [];
6 |
7 | export { storeData, readData };
--------------------------------------------------------------------------------
/src/modules/todoStatus.js:
--------------------------------------------------------------------------------
1 | import { storeData } from './localStorage.js';
2 |
3 | const clearCompleted = (todoList) => {
4 | if (Array.isArray(todoList.list) && todoList.list.length) {
5 | const incomplete = todoList.list.filter((todo) => !todo.completed);
6 | incomplete.forEach((todo, index) => {
7 | todo.index = index;
8 | });
9 | storeData(incomplete);
10 | }
11 | };
12 |
13 | export default clearCompleted;
14 |
--------------------------------------------------------------------------------
/.hintrc:
--------------------------------------------------------------------------------
1 | {
2 | "connector": {
3 | "name": "local",
4 | "options": {
5 | "pattern": ["**", "!.git/**", "!node_modules/**"]
6 | }
7 | },
8 | "extends": ["development"],
9 | "formatters": ["stylish"],
10 | "hints": [
11 | "button-type",
12 | "disown-opener",
13 | "html-checker",
14 | "meta-charset-utf-8",
15 | "meta-viewport",
16 | "no-inline-styles:error"
17 | ]
18 | }
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es6": true,
5 | "jest": true
6 | },
7 | "parser": "babel-eslint",
8 | "parserOptions": {
9 | "ecmaVersion": 2018,
10 | "sourceType": "module"
11 | },
12 | "extends": ["airbnb-base"],
13 | "rules": {
14 | "no-shadow": "off",
15 | "no-param-reassign": "off",
16 | "eol-last": "off",
17 | "import/extensions": [ 1, {
18 | "js": "always", "json": "always"
19 | }]
20 | },
21 | "ignorePatterns": [
22 | "dist/",
23 | "build/"
24 | ]
25 | }
--------------------------------------------------------------------------------
/.stylelintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["stylelint-config-standard"],
3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
4 | "rules": {
5 | "at-rule-no-unknown": null,
6 | "scss/at-rule-no-unknown": [
7 | true,
8 | {
9 | "ignoreAtRules": [
10 | "tailwind",
11 | "apply",
12 | "variants",
13 | "responsive",
14 | "screen"
15 | ]
16 | }
17 | ]
18 | },
19 | "csstree/validator": true,
20 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"]
21 | }
22 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebpackPlugin = require('html-webpack-plugin');
2 | const path = require('path');
3 |
4 | module.exports = {
5 | entry: './src/index.js',
6 | output: {
7 | filename: 'main.js',
8 | path: path.resolve(__dirname, 'dist'),
9 | },
10 | devServer: {
11 | static: './dist',
12 | },
13 | plugins: [
14 | new HtmlWebpackPlugin({
15 | template: path.resolve(__dirname, 'src', 'index.html'),
16 | }),
17 | ],
18 | devtool: false,
19 | module: {
20 | rules: [
21 | {
22 | test: /\.(sass|scss|css)$/i,
23 | use: ['style-loader', 'css-loader', 'sass-loader'],
24 | },
25 | ],
26 | },
27 | };
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 | To DO List
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import './style.css';
2 | import clearCompleted from './modules/todoStatus.js';
3 | import todoList from './modules/todoCRUD.js';
4 | import { readData } from './modules/localStorage.js';
5 |
6 | window.onload = () => {
7 | const form = document.querySelector('form');
8 | const inputTodo = document.querySelector('form .input-todo');
9 | todoList.list = readData();
10 |
11 | document.querySelector('.clear-todo').addEventListener('click',
12 | () => {
13 | clearCompleted(todoList);
14 | todoList.list = readData();
15 | todoList.populateList();
16 | });
17 |
18 | if (todoList.list.length) {
19 | todoList.populateList();
20 | }
21 |
22 | form.addEventListener('submit', (e) => {
23 | e.preventDefault();
24 | });
25 |
26 | inputTodo.addEventListener('keyup', (e) => {
27 | if (e.keyCode === 13) {
28 | e.preventDefault();
29 | if (inputTodo.value) todoList.addTodo(inputTodo.value);
30 | inputTodo.value = '';
31 | }
32 | });
33 | };
34 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | To DO List
11 |
12 |
13 |
14 |
18 |
22 |
23 |
Clear All Completed
24 |
Clear All Completed
10 | `;
11 | describe('Test Add function', () => {
12 | test('Add first Item', () => {
13 | todoList.addTodo('test 1');
14 | const list = document.querySelectorAll('.todo-list li');
15 | expect(list).toHaveLength(1);
16 | });
17 | test('Add second Item', () => {
18 | todoList.addTodo('test 2');
19 | const list = document.querySelectorAll('.todo-list li');
20 | expect(list).toHaveLength(2);
21 | });
22 | });
23 |
24 | describe('Test Remove function', () => {
25 | test('Remove first Item', () => {
26 | todoList.deleteTodo(0);
27 | const list = document.querySelectorAll('.todo-list li');
28 | expect(list).toHaveLength(1);
29 | });
30 | test('Remove second Item', () => {
31 | todoList.deleteTodo(0);
32 | const list = document.querySelectorAll('.todo-list li');
33 | expect(list).toHaveLength(0);
34 | });
35 | });
36 |
37 | describe('Test Edit function', () => {
38 | test('Edit first item', () => {
39 | todoList.addTodo('first todo item');
40 | todoList.updateTodo(0, 'First todo item');
41 | const firstTodoItem = document.querySelector('.todo-list li:first-child > input');
42 | expect(firstTodoItem.value).toEqual('First todo item');
43 | });
44 | test('Edit last item function', () => {
45 | todoList.addTodo('second todo item');
46 | todoList.updateTodo(todoList.list.length - 1, 'Second todo item');
47 | const lastTodoItem = document.querySelector('.todo-list li:last-child > input');
48 | expect(lastTodoItem.value).toEqual('Second todo item');
49 | });
50 | });
51 |
52 | describe('Test updateTodoStatus function', () => {
53 | test('Check if todo status changes on completion', () => {
54 | todoList.completeTodo(0);
55 | let firstTodoItem = document.querySelector('.todo-list li:first-child');
56 | expect(firstTodoItem.dataset.completed).toBe('true');
57 | todoList.completeTodo(0);
58 | firstTodoItem = document.querySelector('.todo-list li:first-child');
59 | expect(firstTodoItem.dataset.completed).toBe('false');
60 | });
61 | });
62 |
63 | describe('Test clearAllCmpleted function', () => {
64 | test('Clear completed', () => {
65 | todoList.completeTodo(1);
66 | clearCompleted(todoList.list);
67 | todoList.populateList();
68 | let listItems = document.querySelectorAll('.todo-list li');
69 | expect(listItems.length).toBe(1);
70 | todoList.completeTodo(0);
71 | clearCompleted(todoList.list);
72 | todoList.populateList();
73 | listItems = document.querySelectorAll('.todo-list li');
74 | expect(listItems.length).toBe(0);
75 | });
76 | });
--------------------------------------------------------------------------------
/src/modules/todoCRUD.js:
--------------------------------------------------------------------------------
1 | import Todo from './todo.js';
2 | import { storeData, readData } from './localStorage.js';
3 |
4 | class TodoList {
5 | constructor() {
6 | this.list = [];
7 | }
8 |
9 | addTodo = (data) => {
10 | this.list.push(
11 | new Todo(
12 | this.list.length,
13 | false,
14 | data,
15 | ),
16 | );
17 | storeData(this.list);
18 | this.populateList();
19 | };
20 |
21 | deleteTodo = (index) => {
22 | this.list.splice(index, 1);
23 | this.list.forEach((todo, i) => {
24 | todo.index = i;
25 | });
26 | storeData(this.list);
27 | this.populateList();
28 | };
29 |
30 | updateTodo = (index, value) => {
31 | if (this.list[index]) this.list[index].description = value;
32 | storeData(this.list);
33 | };
34 |
35 | completeTodo = (index) => {
36 | if (this.list[index]) { this.list[index].completed = !this.list[index].completed; }
37 | storeData(this.list);
38 | this.populateList();
39 | };
40 |
41 | getListsHTML = (lists) => lists.map((todo) => {
42 | const li = document.createElement('li');
43 | li.classList.add('todo-item');
44 | li.setAttribute('data-index', todo.index);
45 | li.setAttribute('data-completed', todo.completed);
46 | li.setAttribute('draggable', true);
47 |
48 | const completedIconContainer = document.createElement('div');
49 | completedIconContainer.className = 'todo-completed';
50 | const incompleteIconContainer = document.createElement('div');
51 | incompleteIconContainer.className = 'todo-check';
52 |
53 | const completedIcon = document.createElement('i');
54 | completedIcon.className = 'fa-regular fa-circle-check fa-2x';
55 | const incompleteIcon = document.createElement('i');
56 | incompleteIcon.className = 'fa-regular fa-square fa-2x';
57 |
58 | completedIconContainer.appendChild(completedIcon);
59 | incompleteIconContainer.appendChild(incompleteIcon);
60 |
61 | const todoDescription = document.createElement('input');
62 | todoDescription.type = 'text';
63 | todoDescription.className = 'todo-edit';
64 | todoDescription.value = todo.description;
65 | if (todo.completed) todoDescription.classList.add('completed');
66 |
67 | const ellipsisIcon = document.createElement('i');
68 | ellipsisIcon.className = 'fas fa-ellipsis-v todo-ellipsis fa-2x';
69 |
70 | const trashIconContainer = document.createElement('div');
71 | trashIconContainer.className = 'todo-delete hide';
72 |
73 | todoDescription.addEventListener('input', () => {
74 | this.updateTodo(li.dataset.index, todoDescription.value);
75 | });
76 |
77 | todoDescription.addEventListener('mousedown', () => {
78 | li.style.backgroundColor = '#f1f8b5';
79 | trashIconContainer.classList.remove('hide');
80 | ellipsisIcon.classList.add('hide');
81 | });
82 |
83 | li.addEventListener('mouseout', () => {
84 | li.style.backgroundColor = '#fff';
85 | });
86 |
87 | trashIconContainer.addEventListener('click', () => {
88 | this.deleteTodo(li.dataset.index);
89 | });
90 |
91 | completedIconContainer.addEventListener('click', () => {
92 | this.completeTodo(li.dataset.index);
93 | });
94 |
95 | incompleteIconContainer.addEventListener('click', () => {
96 | this.completeTodo(li.dataset.index);
97 | });
98 |
99 | const trashIcon = document.createElement('i');
100 | trashIcon.className = 'fa-regular fa-trash-can fa-2x';
101 | trashIconContainer.appendChild(trashIcon);
102 |
103 | li.append(todo.completed ? completedIconContainer : incompleteIconContainer);
104 | li.append(todoDescription);
105 | li.append(ellipsisIcon);
106 | li.append(trashIconContainer);
107 |
108 | li.addEventListener('dragstart', (event) => {
109 | event.dataTransfer.dropEffect = 'move';
110 | event.dataTransfer.setData('text/html', li.innerHTML);
111 | });
112 | li.addEventListener('dragover', (event) => {
113 | event.dataTransfer.dropEffect = 'move';
114 | event.preventDefault();
115 | });
116 | li.addEventListener('drop', (event) => {
117 | event.preventDefault();
118 | const data = event.dataTransfer.getData('text/html');
119 | li.innerHTML = data;
120 | });
121 |
122 | return li;
123 | });
124 |
125 | populateList = () => {
126 | const listContainer = document.querySelector('.todo-list');
127 | listContainer.innerHTML = '';
128 | listContainer.append(...this.getListsHTML(readData()));
129 | }
130 | }
131 |
132 | const todoList = new TodoList();
133 | export default todoList;
134 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
TO DO List
6 |
7 |
8 |
9 |
10 |
11 | # 📗 Table of Contents
12 |
13 | - [📖 About the Project](#about-project)
14 | - [🛠 Built With](#built-with)
15 | - [Tech Stack](#tech-stack)
16 | - [Key Features](#key-features)
17 | - [🚀 Live Demo](#live-demo)
18 | - [💻 Getting Started](#getting-started)
19 | - [Setup](#setup)
20 | - [Prerequisites](#prerequisites)
21 | - [Install](#install)
22 | - [Usage](#usage)
23 | - [Run tests](#run-tests)
24 | - [Deployment](#triangular_flag_on_post-deployment)
25 | - [👥 Authors](#authors)
26 | - [🔭 Future Features](#future-features)
27 | - [🤝 Contributing](#contributing)
28 | - [⭐️ Show your support](#support)
29 | - [🙏 Acknowledgements](#acknowledgements)
30 | - [❓ FAQ](#faq)
31 | - [📝 License](#license)
32 |
33 |
34 |
35 | # 📖 To Do List
36 |
37 | To Do List is a simple and powerful application built with webpack.
38 |
39 | ## 🛠 Built With
40 | webpack
41 | ## Screenshoot
42 | 
43 | ### Tech Stack
44 |
45 |
46 | Structure
47 |
50 |
51 |
52 |
53 | Style
54 |
57 |
58 |
59 |
60 | Linters
61 |
66 |
67 |
68 |
69 |
70 | ### Key Features
71 |
72 | - Set up a simple wabpack boiletplate for other projects.
73 | - HtmlWebpackPlugin
74 | - Webpack server
75 | - Loaders
76 |
77 | (back to top)
78 |
79 |
80 |
81 | ## 🚀 Live Demo
82 | See the [Live Demo](https://react-todo-zed.netlify.app/) of the project.
83 |
84 | (back to top)
85 |
86 |
87 |
88 |
89 | ## 💻 Getting Started
90 |
91 | To get a local copy up and running, follow these steps.
92 |
93 |
94 | ### Prerequisites
95 |
96 | In order to run this project you need:
97 | Open terminal on the same folder of the project and run:
98 | ```sh
99 | npm install
100 | ```
101 |
102 | ### Setup
103 |
104 | Clone this repository to your desired folder:
105 | ```sh
106 | cd my-folder
107 | git clone git@github.com/ZewdieMc/To-Do-List.git
108 | ```
109 | ### Install
110 |
111 | Install this project with:
112 | ```sh
113 | cd To-Do-List
114 | npm install
115 | ```
116 |
117 | ### Usage
118 |
119 | To run the project:
120 | - `npm start`
121 |
122 | ### Run tests
123 |
124 | To run tests, run the following command:
125 |
126 | To check for html errors run:
127 | ```sh
128 | npx hint .
129 | ```
130 | To check for css errors run:
131 | ```sh
132 | npx stylelint "**/*.{css,scss}"
133 | ```
134 | To check for js errors run:
135 | ```sh
136 | npx eslint .
137 | ```
138 |
139 | ### Deployment
140 |
141 | Deployed using Github Pages.
142 |
143 | (back to top)
144 |
145 |
146 |
147 | ## 👥 Authors
148 |
149 | 👤 Zewdie Habtie
150 |
151 | - GitHub: [@ZewdieMc](https://github.com/ZewdieMc)
152 | - Twitter: [@HabtieZewdie](https://twitter.com/HabtieZewdie)
153 | - LinkedIn: [Zewdie Habtie](https://linkedin.com/in/zewdie-habtie-sisay-947153172)
154 | (back to top)
155 |
156 |
157 |
158 | ## 🔭 Future Features
159 |
160 | - Implement `Drag` and `Drop` events to the todo items.
161 |
162 |
163 | (back to top)
164 |
165 |
166 |
167 | ## 🤝 Contributing
168 |
169 | Contributions, issues, and feature requests are welcome!
170 |
171 | Feel free to check the [issues page](https://github.com/ZewdieMc/To-Do-List/issues).
172 |
173 | (back to top)
174 |
175 |
176 |
177 | ## ⭐️ Show your support
178 |
179 | If you like this project send your feedback to encourage me to do more.
180 |
181 | (back to top)
182 |
183 |
184 |
185 | ## 🙏 Acknowledgments
186 |
187 | I would like to thank Microverse for offering me this opportunity to learn, and practice my skills.
188 |
189 | (back to top)
190 |
191 |
192 |
193 | ## ❓ FAQ
194 |
195 | -Why use linters?
196 |
197 | - The use of linters helps to diagnose and fix technical issues, also linters can help teams achieve a more readable and consistent style, through the enforcement of its rules.
198 |
199 | (back to top)
200 |
201 |
202 |
203 | ## 📝 License
204 |
205 | This project is [MIT](./LICENSE) licensed.
206 | (Check the LICENSE file)
207 |
208 | (back to top)
209 |
--------------------------------------------------------------------------------
/dist/main.js:
--------------------------------------------------------------------------------
1 | (()=>{"use strict";var e={913:(e,t,o)=>{o.d(t,{Z:()=>s});var n=o(81),r=o.n(n),a=o(645),i=o.n(a)()(r());i.push([e.id,'*{padding:0;margin:0;box-sizing:border-box}body{font-family:"Poppins",sans-serif;background-color:#eee;display:flex;align-items:center;justify-content:center;min-height:100vh}.todo-container{position:relative;display:flex;flex-direction:column;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.2);background-color:#fff}form>.press-enter,.todo-header .refresh{color:#b9abab}.todo-header,form{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #eee}.todo-header{padding:1.5rem 1rem}.todo-list{width:100%;list-style:none;padding:0}.todo-list .todo-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #eee;gap:1.5rem}.todo-item .hide{display:none}.todo-item .todo-completed,.todo-item .todo-check,.todo-item .todo-delete{cursor:pointer;color:#ccc}.todo-item .todo-check:hover,.todo-item .todo-completed:hover{color:green}.todo-item .line-through{text-decoration:line-through}.todo-item .todo-delete:hover{color:red}.todo-list li .todo-ellipsis{cursor:move;color:#ccc}.todo-list li .todo-ellipsis:hover{color:#000}input{border:none;padding:10px;outline:none;flex-grow:4;font-size:16px;background-color:rgba(0,0,0,0)}.todo-edit.completed{font-weight:bolder;color:#a9a9a9;text-decoration:line-through}.clear-todo{background-color:#eee;border:none;display:flex;align-items:center;justify-content:center;padding:2rem;outline:none;cursor:pointer;font-size:16px}.clear-todo:hover{text-decoration:underline}form>input{font-style:italic}form .press-enter{transform:rotate(90deg)}',""]);const s=i},645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var o="",n=void 0!==t[5];return t[4]&&(o+="@supports (".concat(t[4],") {")),t[2]&&(o+="@media ".concat(t[2]," {")),n&&(o+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),o+=e(t),n&&(o+="}"),t[2]&&(o+="}"),t[4]&&(o+="}"),o})).join("")},t.i=function(e,o,n,r,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(n)for(var s=0;s0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=a),o&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=o):l[2]=o),r&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=r):l[4]="".concat(r)),t.push(l))}},t}},81:e=>{e.exports=function(e){return e[1]}},379:e=>{var t=[];function o(e){for(var o=-1,n=0;n{var t={};e.exports=function(e,o){var n=function(e){if(void 0===t[e]){var o=document.querySelector(e);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(e){o=null}t[e]=o}return t[e]}(e);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(o)}},216:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},565:(e,t,o)=>{e.exports=function(e){var t=o.nc;t&&e.setAttribute("nonce",t)}},795:e=>{e.exports=function(e){var t=e.insertStyleElement(e);return{update:function(o){!function(e,t,o){var n="";o.supports&&(n+="@supports (".concat(o.supports,") {")),o.media&&(n+="@media ".concat(o.media," {"));var r=void 0!==o.layer;r&&(n+="@layer".concat(o.layer.length>0?" ".concat(o.layer):""," {")),n+=o.css,r&&(n+="}"),o.media&&(n+="}"),o.supports&&(n+="}");var a=o.sourceMap;a&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),t.styleTagTransform(n,e,t.options)}(t,e,o)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},589:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}}},t={};function o(n){var r=t[n];if(void 0!==r)return r.exports;var a=t[n]={id:n,exports:{}};return e[n](a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.nc=void 0,(()=>{var e=o(379),t=o.n(e),n=o(795),r=o.n(n),a=o(569),i=o.n(a),s=o(565),d=o.n(s),c=o(216),l=o.n(c),p=o(589),u=o.n(p),m=o(913),f={};f.styleTagTransform=u(),f.setAttributes=d(),f.insert=i().bind(null,"head"),f.domAPI=r(),f.insertStyleElement=l(),t()(m.Z,f),m.Z&&m.Z.locals&&m.Z.locals;const h=e=>{localStorage.setItem("todoObjects",JSON.stringify(e))},v=()=>JSON.parse(localStorage.getItem("todoObjects"))||[];class g{constructor(e,t=!1,o){this.completed=t,this.index=e,this.description=o}}const y=new class{constructor(){this.list=[]}addTodo=e=>{this.list.push(new g(this.list.length,!1,e)),h(this.list),this.populateList()};deleteTodo=e=>{this.list.splice(e,1),this.list.forEach(((e,t)=>{e.index=t})),h(this.list),this.populateList()};updateTodo=(e,t)=>{this.list[e]&&(this.list[e].description=t),h(this.list)};completeTodo=e=>{this.list[e]&&(this.list[e].completed=!this.list[e].completed),h(this.list),this.populateList()};getListsHTML=e=>e.map((e=>{const t=document.createElement("li");t.classList.add("todo-item"),t.setAttribute("data-index",e.index),t.setAttribute("data-completed",e.completed),t.setAttribute("draggable",!0);const o=document.createElement("div");o.className="todo-completed";const n=document.createElement("div");n.className="todo-check";const r=document.createElement("i");r.className="fa-regular fa-circle-check fa-2x";const a=document.createElement("i");a.className="fa-regular fa-square fa-2x",o.appendChild(r),n.appendChild(a);const i=document.createElement("input");i.type="text",i.className="todo-edit",i.value=e.description,i.classList.add(e.completed?"completed":"incomplete");const s=document.createElement("i");s.className="fas fa-ellipsis-v todo-ellipsis fa-2x";const d=document.createElement("div");d.className="todo-delete hide",i.addEventListener("input",(()=>{this.updateTodo(t.dataset.index,i.value)})),i.addEventListener("mousedown",(()=>{t.style.backgroundColor="#f1f8b5",d.classList.remove("hide"),s.classList.add("hide")})),t.addEventListener("mouseout",(()=>{t.style.backgroundColor="#fff"})),d.addEventListener("click",(()=>{this.deleteTodo(t.dataset.index)})),o.addEventListener("click",(()=>{this.completeTodo(t.dataset.index)})),n.addEventListener("click",(()=>{this.completeTodo(t.dataset.index)}));const c=document.createElement("i");return c.className="fa-regular fa-trash-can fa-2x",d.appendChild(c),t.append(e.completed?o:n),t.append(i),t.append(s),t.append(d),t.addEventListener("dragstart",(e=>{e.dataTransfer.dropEffect="move",e.dataTransfer.setData("text/html",t.innerHTML)})),t.addEventListener("dragover",(e=>{e.dataTransfer.dropEffect="move",e.preventDefault()})),t.addEventListener("drop",(e=>{e.preventDefault();const o=e.dataTransfer.getData("text/html");t.innerHTML=o})),t}));populateList=()=>{const e=document.querySelector(".todo-list");e.innerHTML="",e.append(...this.getListsHTML(v()))}};window.onload=()=>{const e=document.querySelector("form"),t=document.querySelector("form .input-todo");y.list=v(),document.querySelector(".clear-todo").addEventListener("click",(()=>{(e=>{if(Array.isArray(e.list)&&e.list.length){const t=e.list.filter((e=>!e.completed));t.forEach(((e,t)=>{e.index=t})),h(t)}})(y),y.list=v(),y.populateList()})),y.list.length&&y.populateList(),e.addEventListener("submit",(e=>{e.preventDefault()})),t.addEventListener("keyup",(e=>{13===e.keyCode&&(e.preventDefault(),t.value&&y.addTodo(t.value),t.value="")}))}})()})();
--------------------------------------------------------------------------------