├── .gitignore ├── src ├── assets │ ├── vinyl.jpg │ ├── DS-DIGIB.TTF │ ├── ToDoList.png │ └── light-ring.jpg ├── modules │ ├── task.js │ ├── crud.js │ └── dom.js ├── index.html ├── index.js ├── test │ └── crud.test.js └── style.css ├── dist ├── 52e5d9910d13b3a7cd09.jpg ├── 81b4bd9230069b72f5e8.TTF ├── index.html └── main.js ├── .babelrc ├── .hintrc ├── .eslintrc.json ├── webpack.config.js ├── .stylelintrc.json ├── LICENSE ├── README.md ├── package.json └── .github └── workflows └── linters.yml /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /src/assets/vinyl.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rex-9/ToDoList/HEAD/src/assets/vinyl.jpg -------------------------------------------------------------------------------- /src/assets/DS-DIGIB.TTF: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rex-9/ToDoList/HEAD/src/assets/DS-DIGIB.TTF -------------------------------------------------------------------------------- /src/assets/ToDoList.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rex-9/ToDoList/HEAD/src/assets/ToDoList.png -------------------------------------------------------------------------------- /src/assets/light-ring.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rex-9/ToDoList/HEAD/src/assets/light-ring.jpg -------------------------------------------------------------------------------- /dist/52e5d9910d13b3a7cd09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rex-9/ToDoList/HEAD/dist/52e5d9910d13b3a7cd09.jpg -------------------------------------------------------------------------------- /dist/81b4bd9230069b72f5e8.TTF: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rex-9/ToDoList/HEAD/dist/81b4bd9230069b72f5e8.TTF -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "test": { 4 | "plugins": ["@babel/plugin-transform-modules-commonjs"] 5 | } 6 | } 7 | } -------------------------------------------------------------------------------- /src/modules/task.js: -------------------------------------------------------------------------------- 1 | export default class Task { 2 | constructor(index, completed, description) { 3 | this.index = index + 1; 4 | this.completed = completed; 5 | this.description = description; 6 | } 7 | } -------------------------------------------------------------------------------- /.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 | } 26 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | 4 | module.exports = { 5 | mode: 'development', 6 | entry: './src/index.js', 7 | devServer: { 8 | static: './dist', 9 | }, 10 | plugins: [ 11 | new HtmlWebpackPlugin({ 12 | template: './src/index.html', 13 | }), 14 | ], 15 | module: { 16 | rules: [{ 17 | test: /\.css$/i, 18 | use: ['style-loader', 'css-loader'], 19 | }], 20 | }, 21 | output: { 22 | filename: 'main.js', 23 | path: path.resolve(__dirname, 'dist'), 24 | clean: true, 25 | }, 26 | }; -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": [ 6 | true, 7 | { 8 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 9 | } 10 | ], 11 | "scss/at-rule-no-unknown": [ 12 | true, 13 | { 14 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 15 | } 16 | ], 17 | "csstree/validator": true 18 | }, 19 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] 20 | } 21 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | To-Do List 9 | 10 | 11 | 12 |
13 |
14 | 18 |
19 | 20 | 21 |
22 | 25 | 26 |
27 | 28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-cycle */ 2 | /* eslint-disable import/no-mutable-exports */ 3 | 4 | import './style.css'; 5 | 6 | import { 7 | clearAllCompletedTask, 8 | } from './modules/crud.js'; 9 | 10 | import { add, build } from './modules/dom.js'; 11 | 12 | let allTasks = JSON.parse(localStorage.getItem('tasks')); 13 | let tasks = []; 14 | 15 | const paper = document.getElementById('paper'); 16 | 17 | const load = (storedTasks) => { 18 | if (storedTasks === null) { 19 | allTasks = []; 20 | tasks = []; 21 | } else { 22 | tasks = allTasks.sort((a, b) => a.index - b.index); 23 | const footer = document.createElement('footer'); 24 | footer.id = 'remove'; 25 | footer.innerHTML = 'Clear all completed'; 26 | footer.addEventListener('click', () => { 27 | clearAllCompletedTask(allTasks); 28 | }); 29 | paper.appendChild(footer); 30 | } 31 | }; 32 | 33 | load(allTasks); 34 | 35 | add(); 36 | 37 | build(tasks); 38 | 39 | export default allTasks; -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | To-Do List 9 | 10 | 11 | 12 |
13 |
14 | 18 |
19 | 20 | 21 |
22 | 25 | 26 |
27 | 28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Htet Naing 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # To Do List 2 | 3 | > To Do List provides you with functionalities such as: 4 | > - adding a Todo to the list 5 | > - removing a Todo from the list 6 | > - editing a Todo in the list 7 | > - checking whether completed or not a Todo in the list 8 | 9 | ## Built With 10 | - HTML 11 | - CSS 12 | - JS 13 | - Webpack 14 | 15 | ## Screenshot 16 | 17 | ![ToDoList](./src/assets/ToDoList.png) 18 | 19 | ## Getting Started 20 | 21 | To get a local copy up and running: 22 | 23 | 1. Clone this repository or download the zip folder: 24 | 25 | **``git clone https://github.com/rex-9/ToDoList.git``** 26 | 27 | 2. Navigate to the location of the folder in your machine: 28 | 29 | **``you@your-Pc-name:~$ cd ``** 30 | 31 | To get a local copy up and running follow these simple example steps. 32 | 33 | ### Deployment 34 | 35 | Here is the online version of [To Do List](https://rex-9.github.io/ToDoList/) 36 | 37 | ## Author 38 | 👤 - Github: [rex-9](https://github.com/rex-9/)
39 | 👤 - LinkedIn: [rex9](https://www.linkedin.com/in/rex9/)
40 | 👤 - Angelist: [rex9](https://angel.co/u/rex9)
41 | 👤 - Facebook: [Htet Naing](https://www.facebook.com/htetnaing0814) 42 | 43 | Contributions, issues, and feature requests are welcome! 44 | 45 | Feel free to check [issue page](https://github.com/rex-9/ToDoList/issues). 46 | 47 | ## Show your support 48 | Give a ⭐️ if you like this project! 49 | 50 | ## Acknowledgments 51 | [Microverse](https://bit.ly/MicroverseTN) 52 | -------------------------------------------------------------------------------- /src/modules/crud.js: -------------------------------------------------------------------------------- 1 | import Task from './task.js'; 2 | 3 | const addTask = (description, allTasks) => { 4 | const newTask = new Task(allTasks.length, false, description); 5 | allTasks.push(newTask); 6 | localStorage.setItem('tasks', JSON.stringify(allTasks)); 7 | window.location.reload(); 8 | 9 | const ul = document.getElementById('list'); 10 | const li = document.createElement('li'); 11 | ul.appendChild(li); 12 | }; 13 | 14 | const editTask = (index, description, allTasks) => { 15 | const task = allTasks.find((task) => task.index === index); 16 | task.description = description; 17 | localStorage.setItem('tasks', JSON.stringify(allTasks)); 18 | }; 19 | 20 | const toggleTask = (index, completed, allTasks) => { 21 | const task = allTasks.find((task) => task.index === index); 22 | task.completed = completed; 23 | localStorage.setItem('tasks', JSON.stringify(allTasks)); 24 | }; 25 | 26 | const clearAllCompletedTask = (allTasks) => { 27 | const completedTasks = []; 28 | for (let i = 0; i < allTasks.length; i += 1) { 29 | if (allTasks[i].completed === false) { 30 | completedTasks.push(allTasks[i]); 31 | } 32 | } 33 | for (let i = 0; i < completedTasks.length; i += 1) { 34 | completedTasks[i].index = i + 1; 35 | } 36 | allTasks = completedTasks; 37 | localStorage.setItem('tasks', JSON.stringify(allTasks)); 38 | window.location.reload(); 39 | }; 40 | 41 | export { 42 | addTask, 43 | editTask, 44 | toggleTask, 45 | clearAllCompletedTask, 46 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "@babel/plugin-transform-modules-commonjs": "^7.18.6", 4 | "babel-eslint": "^10.1.0", 5 | "css-loader": "^6.7.1", 6 | "eslint": "^7.32.0", 7 | "eslint-config-airbnb-base": "^14.2.1", 8 | "eslint-plugin-import": "^2.26.0", 9 | "hint": "^6.2.0", 10 | "html-webpack-plugin": "^5.5.0", 11 | "jest-environment-jsdom": "^28.1.2", 12 | "style-loader": "^3.3.1", 13 | "stylelint": "^13.13.1", 14 | "stylelint-config-standard": "^21.0.0", 15 | "stylelint-csstree-validator": "^1.9.0", 16 | "stylelint-scss": "^3.21.0", 17 | "webpack": "^5.73.0", 18 | "webpack-cli": "^4.10.0", 19 | "webpack-dev-server": "^4.9.3" 20 | }, 21 | "name": "todolist", 22 | "description": "To Do List", 23 | "version": "1.0.0", 24 | "private": true, 25 | "scripts": { 26 | "test": "jest", 27 | "watch": "jest --watchAll", 28 | "start": "webpack serve --open", 29 | "build": "webpack", 30 | "deploy": "gh-pages -d dist" 31 | }, 32 | "repository": { 33 | "type": "git", 34 | "url": "git+https://github.com/HtetNaing0814/todolist.git" 35 | }, 36 | "keywords": [], 37 | "author": "", 38 | "license": "ISC", 39 | "bugs": { 40 | "url": "https://github.com/HtetNaing0814/todolist/issues" 41 | }, 42 | "homepage": "https://github.com/HtetNaing0814/todolist#readme", 43 | "dependencies": { 44 | "gh-pages": "^4.0.0", 45 | "jest": "^28.1.2" 46 | }, 47 | "jest": { 48 | "testEnvironment": "jsdom" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/test/crud.test.js: -------------------------------------------------------------------------------- 1 | import { 2 | addTask, 3 | editTask, 4 | toggleTask, 5 | clearAllCompletedTask, 6 | } from '../modules/crud.js'; 7 | 8 | delete window.location; 9 | window.location = { 10 | reload: jest.fn(), 11 | }; 12 | 13 | document.body.innerHTML = '
'; 14 | 15 | describe('Local Storage functions', () => { 16 | test('Add one new item to the list', () => { 17 | addTask('First Task', []); 18 | expect(JSON.parse(localStorage.getItem('tasks')).length).toBe(1); 19 | const lists = document.querySelectorAll('#list li'); 20 | expect(lists).toHaveLength(1); 21 | }); 22 | 23 | test('Edit the existing item of the specific index', () => { 24 | editTask(1, 'Task 1', [{ 25 | index: 1, 26 | description: 'First Task', 27 | completed: false, 28 | }]); 29 | expect(JSON.parse(localStorage.getItem('tasks'))[0]).toEqual({ 30 | index: 1, 31 | description: 'Task 1', 32 | completed: false, 33 | }); 34 | }); 35 | 36 | test('Toggle the existing item of the specific index', () => { 37 | toggleTask(1, true, [{ 38 | index: 1, 39 | description: 'First Task', 40 | completed: false, 41 | }]); 42 | expect(JSON.parse(localStorage.getItem('tasks'))[0]).toEqual({ 43 | index: 1, 44 | description: 'First Task', 45 | completed: true, 46 | }); 47 | }); 48 | 49 | test('Clear all completed items from the list', () => { 50 | const allTasks = [{ 51 | index: 1, 52 | description: 'First Task', 53 | completed: false, 54 | }, { 55 | index: 2, 56 | description: 'Second Task', 57 | completed: false, 58 | }]; 59 | clearAllCompletedTask('first task', allTasks); 60 | expect(JSON.parse(localStorage.getItem('tasks')).length).toBe(localStorage.getItem('tasks').length - 2); 61 | }); 62 | }); 63 | 64 | // fkkkkkkkkkkkkkkkkkkkkkkkkk -------------------------------------------------------------------------------- /src/modules/dom.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-cycle */ 2 | 3 | import allTasks from '../index.js'; 4 | 5 | import { 6 | addTask, 7 | editTask, 8 | toggleTask, 9 | } from './crud.js'; 10 | 11 | const add = () => { 12 | const add = document.getElementById('add'); 13 | add.addEventListener('keydown', (e) => { 14 | if (e.key === 'Enter') { 15 | addTask(add.value, allTasks); 16 | add.value = ''; 17 | } 18 | }); 19 | }; 20 | 21 | const build = (tasks) => { 22 | tasks.forEach((task) => { 23 | const li = document.createElement('li'); 24 | li.style.cssText = 'padding: 0;'; 25 | const div = document.createElement('div'); 26 | div.style.cssText = 'display: flex; align-items: center; width: 100%; padding-left: 15px;'; 27 | const checkbox = document.createElement('input'); 28 | checkbox.type = 'checkbox'; 29 | checkbox.style.cssText = 'cursor: pointer;'; 30 | checkbox.checked = task.completed; 31 | checkbox.onchange = function checked() { 32 | if (checkbox.checked) { 33 | toggleTask(task.index, true, allTasks); 34 | li.style.cssText = 'text-decoration: line-through; color: gray; background-color: gainsboro; padding: 0;'; 35 | } else { 36 | toggleTask(task.index, false, allTasks); 37 | li.style.cssText = 'text-decoration: none; padding: 0;'; 38 | } 39 | }; 40 | const p = document.createElement('p'); 41 | p.innerHTML = task.description; 42 | p.style.cssText = 'width: 100%;'; 43 | const move = document.createElement('span'); 44 | move.style.cssText = 'cursor: move; width: 20px;'; 45 | move.innerHTML += ''; 46 | move.draggable = true; 47 | div.appendChild(checkbox); 48 | div.appendChild(p); 49 | li.appendChild(div); 50 | li.appendChild(move); 51 | 52 | p.addEventListener('dblclick', () => { 53 | const edit = document.createElement('input'); 54 | edit.id = 'edit'; 55 | edit.type = 'text'; 56 | edit.value = task.description; 57 | document.addEventListener('click', (e) => { 58 | if (!edit.contains(e.target)) { 59 | if (li.contains(edit)) { 60 | li.replaceChild(div, edit); 61 | } 62 | } 63 | }); 64 | edit.addEventListener('keydown', (e) => { 65 | if (e.key === 'Enter') { 66 | editTask(task.index, edit.value, allTasks); 67 | li.replaceChild(div, edit); 68 | window.location.reload(); 69 | } 70 | }); 71 | li.replaceChild(edit, div); 72 | }); 73 | document.getElementById('list').appendChild(li); 74 | }); 75 | }; 76 | 77 | export { 78 | add, 79 | build, 80 | }; -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-18.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.7.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-18.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "12.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@6.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc 33 | - name: Webhint Report 34 | run: npx hint . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-18.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "12.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | eslint: 50 | name: ESLint 51 | runs-on: ubuntu-18.04 52 | steps: 53 | - uses: actions/checkout@v2 54 | - uses: actions/setup-node@v1 55 | with: 56 | node-version: "12.x" 57 | - name: Setup ESLint 58 | run: | 59 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 60 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json 61 | - name: ESLint Report 62 | run: npx eslint . 63 | nodechecker: 64 | name: node_modules checker 65 | runs-on: ubuntu-18.04 66 | steps: 67 | - uses: actions/checkout@v2 68 | - name: Check node_modules existence 69 | run: | 70 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi 71 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Digital'; 3 | src: local('Digital'), url(./assets/DS-DIGIB.TTF) format('woff'); 4 | } 5 | 6 | body { 7 | background: url('./assets/light-ring.jpg'); 8 | background-repeat: no-repeat; 9 | background-size: cover; 10 | background-attachment: fixed; 11 | font-family: 'Quicksand', Times, serif; 12 | font-size: 18px; 13 | } 14 | 15 | #card { 16 | background: linear-gradient(to right, rgb(29, 28, 31), #000, #2c2424); 17 | display: flex; 18 | justify-content: center; 19 | margin: 5% 20% 5% 20%; 20 | font-family: 'Digital', serif; 21 | color: white; 22 | text-shadow: 23 | 0 0 8px #fff, 24 | 0 0 12px pink, 25 | 0 0 16px yellow, 26 | 0 0 20px red; 27 | box-shadow: 28 | 0 0 8px #fff, 29 | 5px 8px 12px pink, 30 | 5px 8px 16px yellow, 31 | 5px 8px 20px red; 32 | } 33 | 34 | #paper { 35 | width: 100%; 36 | } 37 | 38 | #header { 39 | display: flex; 40 | justify-content: space-between; 41 | align-items: center; 42 | padding: 10px; 43 | border-bottom: 1px solid gainsboro; 44 | } 45 | 46 | #header header { 47 | font-size: 30px; 48 | width: 100%; 49 | padding: 5px 0; 50 | font-weight: bold; 51 | text-align: center; 52 | } 53 | 54 | #input { 55 | display: flex; 56 | justify-content: space-between; 57 | align-items: center; 58 | border-bottom: 1px solid gainsboro; 59 | } 60 | 61 | #add { 62 | font-family: 'Digital', Courier, monospace; 63 | width: 100%; 64 | height: 50px; 65 | font-size: 40px; 66 | border: 0; 67 | border-radius: 8px; 68 | background-color: #0d3f35; 69 | color: white; 70 | text-shadow: 71 | 0 0 6px #fff, 72 | 0 0 8px yellow, 73 | 0 0 10px orange; 74 | padding: 7px; 75 | box-shadow: 76 | 0 0 6px #fff, 77 | 0 0 8px lightgreen, 78 | 0 0 10px #0d3f35; 79 | } 80 | 81 | #edit { 82 | width: 100%; 83 | border: 0; 84 | font-family: 'Digital', Courier, monospace; 85 | font-size: 25px; 86 | padding: 7px; 87 | background-color: black; 88 | color: gray; 89 | height: 40px; 90 | } 91 | 92 | #add, 93 | #edit:focus { 94 | outline-width: 0; 95 | } 96 | 97 | span { 98 | margin-left: 20px; 99 | } 100 | 101 | ul { 102 | margin-top: 0; 103 | margin-bottom: 0; 104 | list-style-type: none; 105 | padding: 0; 106 | } 107 | 108 | li { 109 | display: flex; 110 | justify-content: space-between; 111 | align-items: center; 112 | padding-left: 10px; 113 | border-bottom: 1px solid gainsboro; 114 | } 115 | 116 | p { 117 | margin-left: 10px; 118 | font-size: 25px; 119 | } 120 | 121 | footer { 122 | font-size: 25px; 123 | cursor: pointer; 124 | text-align: center; 125 | padding: 20px; 126 | } 127 | 128 | footer:hover { 129 | background-color: black; 130 | text-shadow: 131 | 0 0 6px black, 132 | 0 0 8px black, 133 | 0 0 10px black; 134 | } 135 | 136 | #input span { 137 | transform: rotate(90deg); 138 | margin-right: 13px; 139 | } 140 | -------------------------------------------------------------------------------- /dist/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). 3 | * This devtool is neither made for production nor for readable output files. 4 | * It uses "eval()" calls to create a separate source file in the browser devtools. 5 | * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) 6 | * or disable the default devtool with "devtool: false". 7 | * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). 8 | */ 9 | /******/ (() => { // webpackBootstrap 10 | /******/ "use strict"; 11 | /******/ var __webpack_modules__ = ({ 12 | 13 | /***/ "./node_modules/css-loader/dist/cjs.js!./src/style.css": 14 | /*!*************************************************************!*\ 15 | !*** ./node_modules/css-loader/dist/cjs.js!./src/style.css ***! 16 | \*************************************************************/ 17 | /***/ ((module, __webpack_exports__, __webpack_require__) => { 18 | 19 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/getUrl.js */ \"./node_modules/css-loader/dist/runtime/getUrl.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__);\n// Imports\n\n\n\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(/*! ./assets/DS-DIGIB.TTF */ \"./src/assets/DS-DIGIB.TTF\"), __webpack_require__.b);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(/* asset import */ __webpack_require__(/*! ./assets/light-ring.jpg */ \"./src/assets/light-ring.jpg\"), __webpack_require__.b);\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_0___);\nvar ___CSS_LOADER_URL_REPLACEMENT_1___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"@font-face {\\r\\n font-family: 'Digital';\\r\\n src: local('Digital'), url(\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \") format('woff');\\r\\n}\\r\\n\\r\\nbody {\\r\\n background: url(\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \");\\r\\n background-repeat: no-repeat;\\r\\n background-size: cover;\\r\\n background-attachment: fixed;\\r\\n font-family: 'Quicksand', Times, serif;\\r\\n font-size: 18px;\\r\\n}\\r\\n\\r\\n#card {\\r\\n background: linear-gradient(to right, rgb(29, 28, 31), #000, #2c2424);\\r\\n display: flex;\\r\\n justify-content: center;\\r\\n margin: 5% 20% 5% 20%;\\r\\n font-family: 'Digital', serif;\\r\\n color: white;\\r\\n text-shadow:\\r\\n 0 0 8px #fff,\\r\\n 0 0 12px pink,\\r\\n 0 0 16px yellow,\\r\\n 0 0 20px red;\\r\\n box-shadow:\\r\\n 0 0 8px #fff,\\r\\n 5px 8px 12px pink,\\r\\n 5px 8px 16px yellow,\\r\\n 5px 8px 20px red;\\r\\n}\\r\\n\\r\\n#paper {\\r\\n width: 100%;\\r\\n}\\r\\n\\r\\n#header {\\r\\n display: flex;\\r\\n justify-content: space-between;\\r\\n align-items: center;\\r\\n padding: 10px;\\r\\n border-bottom: 1px solid gainsboro;\\r\\n}\\r\\n\\r\\n#header header {\\r\\n font-size: 30px;\\r\\n width: 100%;\\r\\n padding: 5px 0;\\r\\n font-weight: bold;\\r\\n text-align: center;\\r\\n}\\r\\n\\r\\n#input {\\r\\n display: flex;\\r\\n justify-content: space-between;\\r\\n align-items: center;\\r\\n border-bottom: 1px solid gainsboro;\\r\\n}\\r\\n\\r\\n#add {\\r\\n font-family: 'Digital', Courier, monospace;\\r\\n width: 100%;\\r\\n height: 50px;\\r\\n font-size: 40px;\\r\\n border: 0;\\r\\n border-radius: 8px;\\r\\n background-color: #0d3f35;\\r\\n color: white;\\r\\n text-shadow:\\r\\n 0 0 6px #fff,\\r\\n 0 0 8px yellow,\\r\\n 0 0 10px orange;\\r\\n padding: 7px;\\r\\n box-shadow:\\r\\n 0 0 6px #fff,\\r\\n 0 0 8px lightgreen,\\r\\n 0 0 10px #0d3f35;\\r\\n}\\r\\n\\r\\n#edit {\\r\\n width: 100%;\\r\\n border: 0;\\r\\n font-family: 'Digital', Courier, monospace;\\r\\n font-size: 25px;\\r\\n padding: 7px;\\r\\n background-color: black;\\r\\n color: gray;\\r\\n height: 40px;\\r\\n}\\r\\n\\r\\n#add,\\r\\n#edit:focus {\\r\\n outline-width: 0;\\r\\n}\\r\\n\\r\\nspan {\\r\\n margin-left: 20px;\\r\\n}\\r\\n\\r\\nul {\\r\\n margin-top: 0;\\r\\n margin-bottom: 0;\\r\\n list-style-type: none;\\r\\n padding: 0;\\r\\n}\\r\\n\\r\\nli {\\r\\n display: flex;\\r\\n justify-content: space-between;\\r\\n align-items: center;\\r\\n padding-left: 10px;\\r\\n border-bottom: 1px solid gainsboro;\\r\\n}\\r\\n\\r\\np {\\r\\n margin-left: 10px;\\r\\n font-size: 25px;\\r\\n}\\r\\n\\r\\nfooter {\\r\\n font-size: 25px;\\r\\n cursor: pointer;\\r\\n text-align: center;\\r\\n padding: 20px;\\r\\n}\\r\\n\\r\\nfooter:hover {\\r\\n background-color: black;\\r\\n text-shadow:\\r\\n 0 0 6px black,\\r\\n 0 0 8px black,\\r\\n 0 0 10px black;\\r\\n}\\r\\n\\r\\n#input span {\\r\\n transform: rotate(90deg);\\r\\n margin-right: 13px;\\r\\n}\\r\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://todolist/./src/style.css?./node_modules/css-loader/dist/cjs.js"); 20 | 21 | /***/ }), 22 | 23 | /***/ "./node_modules/css-loader/dist/runtime/api.js": 24 | /*!*****************************************************!*\ 25 | !*** ./node_modules/css-loader/dist/runtime/api.js ***! 26 | \*****************************************************/ 27 | /***/ ((module) => { 28 | 29 | eval("\n\n/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n*/\nmodule.exports = function (cssWithMappingToString) {\n var list = []; // return the list of modules as css string\n\n list.toString = function toString() {\n return this.map(function (item) {\n var content = \"\";\n var needLayer = typeof item[5] !== \"undefined\";\n\n if (item[4]) {\n content += \"@supports (\".concat(item[4], \") {\");\n }\n\n if (item[2]) {\n content += \"@media \".concat(item[2], \" {\");\n }\n\n if (needLayer) {\n content += \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\");\n }\n\n content += cssWithMappingToString(item);\n\n if (needLayer) {\n content += \"}\";\n }\n\n if (item[2]) {\n content += \"}\";\n }\n\n if (item[4]) {\n content += \"}\";\n }\n\n return content;\n }).join(\"\");\n }; // import a list of modules into the list\n\n\n list.i = function i(modules, media, dedupe, supports, layer) {\n if (typeof modules === \"string\") {\n modules = [[null, modules, undefined]];\n }\n\n var alreadyImportedModules = {};\n\n if (dedupe) {\n for (var k = 0; k < this.length; k++) {\n var id = this[k][0];\n\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n\n for (var _k = 0; _k < modules.length; _k++) {\n var item = [].concat(modules[_k]);\n\n if (dedupe && alreadyImportedModules[item[0]]) {\n continue;\n }\n\n if (typeof layer !== \"undefined\") {\n if (typeof item[5] === \"undefined\") {\n item[5] = layer;\n } else {\n item[1] = \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\").concat(item[1], \"}\");\n item[5] = layer;\n }\n }\n\n if (media) {\n if (!item[2]) {\n item[2] = media;\n } else {\n item[1] = \"@media \".concat(item[2], \" {\").concat(item[1], \"}\");\n item[2] = media;\n }\n }\n\n if (supports) {\n if (!item[4]) {\n item[4] = \"\".concat(supports);\n } else {\n item[1] = \"@supports (\".concat(item[4], \") {\").concat(item[1], \"}\");\n item[4] = supports;\n }\n }\n\n list.push(item);\n }\n };\n\n return list;\n};\n\n//# sourceURL=webpack://todolist/./node_modules/css-loader/dist/runtime/api.js?"); 30 | 31 | /***/ }), 32 | 33 | /***/ "./node_modules/css-loader/dist/runtime/getUrl.js": 34 | /*!********************************************************!*\ 35 | !*** ./node_modules/css-loader/dist/runtime/getUrl.js ***! 36 | \********************************************************/ 37 | /***/ ((module) => { 38 | 39 | eval("\n\nmodule.exports = function (url, options) {\n if (!options) {\n options = {};\n }\n\n if (!url) {\n return url;\n }\n\n url = String(url.__esModule ? url.default : url); // If url is already wrapped in quotes, remove them\n\n if (/^['\"].*['\"]$/.test(url)) {\n url = url.slice(1, -1);\n }\n\n if (options.hash) {\n url += options.hash;\n } // Should url be wrapped?\n // See https://drafts.csswg.org/css-values-3/#urls\n\n\n if (/[\"'() \\t\\n]|(%20)/.test(url) || options.needQuotes) {\n return \"\\\"\".concat(url.replace(/\"/g, '\\\\\"').replace(/\\n/g, \"\\\\n\"), \"\\\"\");\n }\n\n return url;\n};\n\n//# sourceURL=webpack://todolist/./node_modules/css-loader/dist/runtime/getUrl.js?"); 40 | 41 | /***/ }), 42 | 43 | /***/ "./node_modules/css-loader/dist/runtime/noSourceMaps.js": 44 | /*!**************************************************************!*\ 45 | !*** ./node_modules/css-loader/dist/runtime/noSourceMaps.js ***! 46 | \**************************************************************/ 47 | /***/ ((module) => { 48 | 49 | eval("\n\nmodule.exports = function (i) {\n return i[1];\n};\n\n//# sourceURL=webpack://todolist/./node_modules/css-loader/dist/runtime/noSourceMaps.js?"); 50 | 51 | /***/ }), 52 | 53 | /***/ "./src/style.css": 54 | /*!***********************!*\ 55 | !*** ./src/style.css ***! 56 | \***********************/ 57 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 58 | 59 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!./style.css */ \"./node_modules/css-loader/dist/cjs.js!./src/style.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\n\n options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n \noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"], options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"] && _node_modules_css_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals ? _node_modules_css_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals : undefined);\n\n\n//# sourceURL=webpack://todolist/./src/style.css?"); 60 | 61 | /***/ }), 62 | 63 | /***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js": 64 | /*!****************************************************************************!*\ 65 | !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***! 66 | \****************************************************************************/ 67 | /***/ ((module) => { 68 | 69 | eval("\n\nvar stylesInDOM = [];\n\nfunction getIndexByIdentifier(identifier) {\n var result = -1;\n\n for (var i = 0; i < stylesInDOM.length; i++) {\n if (stylesInDOM[i].identifier === identifier) {\n result = i;\n break;\n }\n }\n\n return result;\n}\n\nfunction modulesToDom(list, options) {\n var idCountMap = {};\n var identifiers = [];\n\n for (var i = 0; i < list.length; i++) {\n var item = list[i];\n var id = options.base ? item[0] + options.base : item[0];\n var count = idCountMap[id] || 0;\n var identifier = \"\".concat(id, \" \").concat(count);\n idCountMap[id] = count + 1;\n var indexByIdentifier = getIndexByIdentifier(identifier);\n var obj = {\n css: item[1],\n media: item[2],\n sourceMap: item[3],\n supports: item[4],\n layer: item[5]\n };\n\n if (indexByIdentifier !== -1) {\n stylesInDOM[indexByIdentifier].references++;\n stylesInDOM[indexByIdentifier].updater(obj);\n } else {\n var updater = addElementStyle(obj, options);\n options.byIndex = i;\n stylesInDOM.splice(i, 0, {\n identifier: identifier,\n updater: updater,\n references: 1\n });\n }\n\n identifiers.push(identifier);\n }\n\n return identifiers;\n}\n\nfunction addElementStyle(obj, options) {\n var api = options.domAPI(options);\n api.update(obj);\n\n var updater = function updater(newObj) {\n if (newObj) {\n if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) {\n return;\n }\n\n api.update(obj = newObj);\n } else {\n api.remove();\n }\n };\n\n return updater;\n}\n\nmodule.exports = function (list, options) {\n options = options || {};\n list = list || [];\n var lastIdentifiers = modulesToDom(list, options);\n return function update(newList) {\n newList = newList || [];\n\n for (var i = 0; i < lastIdentifiers.length; i++) {\n var identifier = lastIdentifiers[i];\n var index = getIndexByIdentifier(identifier);\n stylesInDOM[index].references--;\n }\n\n var newLastIdentifiers = modulesToDom(newList, options);\n\n for (var _i = 0; _i < lastIdentifiers.length; _i++) {\n var _identifier = lastIdentifiers[_i];\n\n var _index = getIndexByIdentifier(_identifier);\n\n if (stylesInDOM[_index].references === 0) {\n stylesInDOM[_index].updater();\n\n stylesInDOM.splice(_index, 1);\n }\n }\n\n lastIdentifiers = newLastIdentifiers;\n };\n};\n\n//# sourceURL=webpack://todolist/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?"); 70 | 71 | /***/ }), 72 | 73 | /***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js": 74 | /*!********************************************************************!*\ 75 | !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***! 76 | \********************************************************************/ 77 | /***/ ((module) => { 78 | 79 | eval("\n\nvar memo = {};\n/* istanbul ignore next */\n\nfunction getTarget(target) {\n if (typeof memo[target] === \"undefined\") {\n var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself\n\n if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n try {\n // This will throw an exception if access to iframe is blocked\n // due to cross-origin restrictions\n styleTarget = styleTarget.contentDocument.head;\n } catch (e) {\n // istanbul ignore next\n styleTarget = null;\n }\n }\n\n memo[target] = styleTarget;\n }\n\n return memo[target];\n}\n/* istanbul ignore next */\n\n\nfunction insertBySelector(insert, style) {\n var target = getTarget(insert);\n\n if (!target) {\n throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n }\n\n target.appendChild(style);\n}\n\nmodule.exports = insertBySelector;\n\n//# sourceURL=webpack://todolist/./node_modules/style-loader/dist/runtime/insertBySelector.js?"); 80 | 81 | /***/ }), 82 | 83 | /***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js": 84 | /*!**********************************************************************!*\ 85 | !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***! 86 | \**********************************************************************/ 87 | /***/ ((module) => { 88 | 89 | eval("\n\n/* istanbul ignore next */\nfunction insertStyleElement(options) {\n var element = document.createElement(\"style\");\n options.setAttributes(element, options.attributes);\n options.insert(element, options.options);\n return element;\n}\n\nmodule.exports = insertStyleElement;\n\n//# sourceURL=webpack://todolist/./node_modules/style-loader/dist/runtime/insertStyleElement.js?"); 90 | 91 | /***/ }), 92 | 93 | /***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js": 94 | /*!**********************************************************************************!*\ 95 | !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***! 96 | \**********************************************************************************/ 97 | /***/ ((module, __unused_webpack_exports, __webpack_require__) => { 98 | 99 | eval("\n\n/* istanbul ignore next */\nfunction setAttributesWithoutAttributes(styleElement) {\n var nonce = true ? __webpack_require__.nc : 0;\n\n if (nonce) {\n styleElement.setAttribute(\"nonce\", nonce);\n }\n}\n\nmodule.exports = setAttributesWithoutAttributes;\n\n//# sourceURL=webpack://todolist/./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js?"); 100 | 101 | /***/ }), 102 | 103 | /***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js": 104 | /*!***************************************************************!*\ 105 | !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***! 106 | \***************************************************************/ 107 | /***/ ((module) => { 108 | 109 | eval("\n\n/* istanbul ignore next */\nfunction apply(styleElement, options, obj) {\n var css = \"\";\n\n if (obj.supports) {\n css += \"@supports (\".concat(obj.supports, \") {\");\n }\n\n if (obj.media) {\n css += \"@media \".concat(obj.media, \" {\");\n }\n\n var needLayer = typeof obj.layer !== \"undefined\";\n\n if (needLayer) {\n css += \"@layer\".concat(obj.layer.length > 0 ? \" \".concat(obj.layer) : \"\", \" {\");\n }\n\n css += obj.css;\n\n if (needLayer) {\n css += \"}\";\n }\n\n if (obj.media) {\n css += \"}\";\n }\n\n if (obj.supports) {\n css += \"}\";\n }\n\n var sourceMap = obj.sourceMap;\n\n if (sourceMap && typeof btoa !== \"undefined\") {\n css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n } // For old IE\n\n /* istanbul ignore if */\n\n\n options.styleTagTransform(css, styleElement, options.options);\n}\n\nfunction removeStyleElement(styleElement) {\n // istanbul ignore if\n if (styleElement.parentNode === null) {\n return false;\n }\n\n styleElement.parentNode.removeChild(styleElement);\n}\n/* istanbul ignore next */\n\n\nfunction domAPI(options) {\n var styleElement = options.insertStyleElement(options);\n return {\n update: function update(obj) {\n apply(styleElement, options, obj);\n },\n remove: function remove() {\n removeStyleElement(styleElement);\n }\n };\n}\n\nmodule.exports = domAPI;\n\n//# sourceURL=webpack://todolist/./node_modules/style-loader/dist/runtime/styleDomAPI.js?"); 110 | 111 | /***/ }), 112 | 113 | /***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js": 114 | /*!*********************************************************************!*\ 115 | !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***! 116 | \*********************************************************************/ 117 | /***/ ((module) => { 118 | 119 | eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElement) {\n if (styleElement.styleSheet) {\n styleElement.styleSheet.cssText = css;\n } else {\n while (styleElement.firstChild) {\n styleElement.removeChild(styleElement.firstChild);\n }\n\n styleElement.appendChild(document.createTextNode(css));\n }\n}\n\nmodule.exports = styleTagTransform;\n\n//# sourceURL=webpack://todolist/./node_modules/style-loader/dist/runtime/styleTagTransform.js?"); 120 | 121 | /***/ }), 122 | 123 | /***/ "./src/index.js": 124 | /*!**********************!*\ 125 | !*** ./src/index.js ***! 126 | \**********************/ 127 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 128 | 129 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n/* harmony import */ var _modules_crud_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/crud.js */ \"./src/modules/crud.js\");\n/* harmony import */ var _modules_dom_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/dom.js */ \"./src/modules/dom.js\");\n/* eslint-disable import/no-cycle */\n/* eslint-disable import/no-mutable-exports */\n\n\n\n\n\n\n\nlet allTasks = JSON.parse(localStorage.getItem('tasks'));\nlet tasks = [];\n\nconst paper = document.getElementById('paper');\n\nconst load = (storedTasks) => {\n if (storedTasks === null) {\n allTasks = [];\n tasks = [];\n } else {\n tasks = allTasks.sort((a, b) => a.index - b.index);\n const footer = document.createElement('footer');\n footer.id = 'remove';\n footer.innerHTML = 'Clear all completed';\n footer.addEventListener('click', () => {\n (0,_modules_crud_js__WEBPACK_IMPORTED_MODULE_1__.clearAllCompletedTask)(allTasks);\n });\n paper.appendChild(footer);\n }\n};\n\nload(allTasks);\n\n(0,_modules_dom_js__WEBPACK_IMPORTED_MODULE_2__.add)();\n\n(0,_modules_dom_js__WEBPACK_IMPORTED_MODULE_2__.build)(tasks);\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (allTasks);\n\n//# sourceURL=webpack://todolist/./src/index.js?"); 130 | 131 | /***/ }), 132 | 133 | /***/ "./src/modules/crud.js": 134 | /*!*****************************!*\ 135 | !*** ./src/modules/crud.js ***! 136 | \*****************************/ 137 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 138 | 139 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"addTask\": () => (/* binding */ addTask),\n/* harmony export */ \"clearAllCompletedTask\": () => (/* binding */ clearAllCompletedTask),\n/* harmony export */ \"editTask\": () => (/* binding */ editTask),\n/* harmony export */ \"toggleTask\": () => (/* binding */ toggleTask)\n/* harmony export */ });\n/* harmony import */ var _task_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./task.js */ \"./src/modules/task.js\");\n\n\nconst addTask = (description, allTasks) => {\n const newTask = new _task_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"](allTasks.length, false, description);\n allTasks.push(newTask);\n localStorage.setItem('tasks', JSON.stringify(allTasks));\n window.location.reload();\n\n const ul = document.getElementById('list');\n const li = document.createElement('li');\n ul.appendChild(li);\n};\n\nconst editTask = (index, description, allTasks) => {\n const task = allTasks.find((task) => task.index === index);\n task.description = description;\n localStorage.setItem('tasks', JSON.stringify(allTasks));\n};\n\nconst toggleTask = (index, completed, allTasks) => {\n const task = allTasks.find((task) => task.index === index);\n task.completed = completed;\n localStorage.setItem('tasks', JSON.stringify(allTasks));\n};\n\nconst clearAllCompletedTask = (allTasks) => {\n const completedTasks = [];\n for (let i = 0; i < allTasks.length; i += 1) {\n if (allTasks[i].completed === false) {\n completedTasks.push(allTasks[i]);\n }\n }\n for (let i = 0; i < completedTasks.length; i += 1) {\n completedTasks[i].index = i + 1;\n }\n allTasks = completedTasks;\n localStorage.setItem('tasks', JSON.stringify(allTasks));\n window.location.reload();\n};\n\n\n\n//# sourceURL=webpack://todolist/./src/modules/crud.js?"); 140 | 141 | /***/ }), 142 | 143 | /***/ "./src/modules/dom.js": 144 | /*!****************************!*\ 145 | !*** ./src/modules/dom.js ***! 146 | \****************************/ 147 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 148 | 149 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"add\": () => (/* binding */ add),\n/* harmony export */ \"build\": () => (/* binding */ build)\n/* harmony export */ });\n/* harmony import */ var _index_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../index.js */ \"./src/index.js\");\n/* harmony import */ var _crud_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./crud.js */ \"./src/modules/crud.js\");\n/* eslint-disable import/no-cycle */\n\n\n\n\n\nconst add = () => {\n const add = document.getElementById('add');\n add.addEventListener('keydown', (e) => {\n if (e.key === 'Enter') {\n (0,_crud_js__WEBPACK_IMPORTED_MODULE_1__.addTask)(add.value, _index_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n add.value = '';\n }\n });\n};\n\nconst build = (tasks) => {\n tasks.forEach((task) => {\n const li = document.createElement('li');\n li.style.cssText = 'padding: 0;';\n const div = document.createElement('div');\n div.style.cssText = 'display: flex; align-items: center; width: 100%; padding-left: 15px;';\n const checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.style.cssText = 'cursor: pointer;';\n checkbox.checked = task.completed;\n checkbox.onchange = function checked() {\n if (checkbox.checked) {\n (0,_crud_js__WEBPACK_IMPORTED_MODULE_1__.toggleTask)(task.index, true, _index_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n li.style.cssText = 'text-decoration: line-through; color: gray; background-color: gainsboro; padding: 0;';\n } else {\n (0,_crud_js__WEBPACK_IMPORTED_MODULE_1__.toggleTask)(task.index, false, _index_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n li.style.cssText = 'text-decoration: none; padding: 0;';\n }\n };\n const p = document.createElement('p');\n p.innerHTML = task.description;\n p.style.cssText = 'width: 100%;';\n const move = document.createElement('span');\n move.style.cssText = 'cursor: move; width: 20px;';\n move.innerHTML += '';\n move.draggable = true;\n div.appendChild(checkbox);\n div.appendChild(p);\n li.appendChild(div);\n li.appendChild(move);\n\n p.addEventListener('dblclick', () => {\n const edit = document.createElement('input');\n edit.id = 'edit';\n edit.type = 'text';\n edit.value = task.description;\n document.addEventListener('click', (e) => {\n if (!edit.contains(e.target)) {\n if (li.contains(edit)) {\n li.replaceChild(div, edit);\n }\n }\n });\n edit.addEventListener('keydown', (e) => {\n if (e.key === 'Enter') {\n (0,_crud_js__WEBPACK_IMPORTED_MODULE_1__.editTask)(task.index, edit.value, _index_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n li.replaceChild(div, edit);\n window.location.reload();\n }\n });\n li.replaceChild(edit, div);\n });\n document.getElementById('list').appendChild(li);\n });\n};\n\n\n\n//# sourceURL=webpack://todolist/./src/modules/dom.js?"); 150 | 151 | /***/ }), 152 | 153 | /***/ "./src/modules/task.js": 154 | /*!*****************************!*\ 155 | !*** ./src/modules/task.js ***! 156 | \*****************************/ 157 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 158 | 159 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Task)\n/* harmony export */ });\nclass Task {\n constructor(index, completed, description) {\n this.index = index + 1;\n this.completed = completed;\n this.description = description;\n }\n}\n\n//# sourceURL=webpack://todolist/./src/modules/task.js?"); 160 | 161 | /***/ }), 162 | 163 | /***/ "./src/assets/DS-DIGIB.TTF": 164 | /*!*********************************!*\ 165 | !*** ./src/assets/DS-DIGIB.TTF ***! 166 | \*********************************/ 167 | /***/ ((module, __unused_webpack_exports, __webpack_require__) => { 168 | 169 | eval("module.exports = __webpack_require__.p + \"81b4bd9230069b72f5e8.TTF\";\n\n//# sourceURL=webpack://todolist/./src/assets/DS-DIGIB.TTF?"); 170 | 171 | /***/ }), 172 | 173 | /***/ "./src/assets/light-ring.jpg": 174 | /*!***********************************!*\ 175 | !*** ./src/assets/light-ring.jpg ***! 176 | \***********************************/ 177 | /***/ ((module, __unused_webpack_exports, __webpack_require__) => { 178 | 179 | eval("module.exports = __webpack_require__.p + \"52e5d9910d13b3a7cd09.jpg\";\n\n//# sourceURL=webpack://todolist/./src/assets/light-ring.jpg?"); 180 | 181 | /***/ }) 182 | 183 | /******/ }); 184 | /************************************************************************/ 185 | /******/ // The module cache 186 | /******/ var __webpack_module_cache__ = {}; 187 | /******/ 188 | /******/ // The require function 189 | /******/ function __webpack_require__(moduleId) { 190 | /******/ // Check if module is in cache 191 | /******/ var cachedModule = __webpack_module_cache__[moduleId]; 192 | /******/ if (cachedModule !== undefined) { 193 | /******/ return cachedModule.exports; 194 | /******/ } 195 | /******/ // Create a new module (and put it into the cache) 196 | /******/ var module = __webpack_module_cache__[moduleId] = { 197 | /******/ id: moduleId, 198 | /******/ // no module.loaded needed 199 | /******/ exports: {} 200 | /******/ }; 201 | /******/ 202 | /******/ // Execute the module function 203 | /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); 204 | /******/ 205 | /******/ // Return the exports of the module 206 | /******/ return module.exports; 207 | /******/ } 208 | /******/ 209 | /******/ // expose the modules object (__webpack_modules__) 210 | /******/ __webpack_require__.m = __webpack_modules__; 211 | /******/ 212 | /************************************************************************/ 213 | /******/ /* webpack/runtime/compat get default export */ 214 | /******/ (() => { 215 | /******/ // getDefaultExport function for compatibility with non-harmony modules 216 | /******/ __webpack_require__.n = (module) => { 217 | /******/ var getter = module && module.__esModule ? 218 | /******/ () => (module['default']) : 219 | /******/ () => (module); 220 | /******/ __webpack_require__.d(getter, { a: getter }); 221 | /******/ return getter; 222 | /******/ }; 223 | /******/ })(); 224 | /******/ 225 | /******/ /* webpack/runtime/define property getters */ 226 | /******/ (() => { 227 | /******/ // define getter functions for harmony exports 228 | /******/ __webpack_require__.d = (exports, definition) => { 229 | /******/ for(var key in definition) { 230 | /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 231 | /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); 232 | /******/ } 233 | /******/ } 234 | /******/ }; 235 | /******/ })(); 236 | /******/ 237 | /******/ /* webpack/runtime/global */ 238 | /******/ (() => { 239 | /******/ __webpack_require__.g = (function() { 240 | /******/ if (typeof globalThis === 'object') return globalThis; 241 | /******/ try { 242 | /******/ return this || new Function('return this')(); 243 | /******/ } catch (e) { 244 | /******/ if (typeof window === 'object') return window; 245 | /******/ } 246 | /******/ })(); 247 | /******/ })(); 248 | /******/ 249 | /******/ /* webpack/runtime/hasOwnProperty shorthand */ 250 | /******/ (() => { 251 | /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) 252 | /******/ })(); 253 | /******/ 254 | /******/ /* webpack/runtime/make namespace object */ 255 | /******/ (() => { 256 | /******/ // define __esModule on exports 257 | /******/ __webpack_require__.r = (exports) => { 258 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 259 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 260 | /******/ } 261 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 262 | /******/ }; 263 | /******/ })(); 264 | /******/ 265 | /******/ /* webpack/runtime/publicPath */ 266 | /******/ (() => { 267 | /******/ var scriptUrl; 268 | /******/ if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + ""; 269 | /******/ var document = __webpack_require__.g.document; 270 | /******/ if (!scriptUrl && document) { 271 | /******/ if (document.currentScript) 272 | /******/ scriptUrl = document.currentScript.src 273 | /******/ if (!scriptUrl) { 274 | /******/ var scripts = document.getElementsByTagName("script"); 275 | /******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src 276 | /******/ } 277 | /******/ } 278 | /******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration 279 | /******/ // or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic. 280 | /******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser"); 281 | /******/ scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/"); 282 | /******/ __webpack_require__.p = scriptUrl; 283 | /******/ })(); 284 | /******/ 285 | /******/ /* webpack/runtime/jsonp chunk loading */ 286 | /******/ (() => { 287 | /******/ __webpack_require__.b = document.baseURI || self.location.href; 288 | /******/ 289 | /******/ // object to store loaded and loading chunks 290 | /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched 291 | /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded 292 | /******/ var installedChunks = { 293 | /******/ "main": 0 294 | /******/ }; 295 | /******/ 296 | /******/ // no chunk on demand loading 297 | /******/ 298 | /******/ // no prefetching 299 | /******/ 300 | /******/ // no preloaded 301 | /******/ 302 | /******/ // no HMR 303 | /******/ 304 | /******/ // no HMR manifest 305 | /******/ 306 | /******/ // no on chunks loaded 307 | /******/ 308 | /******/ // no jsonp function 309 | /******/ })(); 310 | /******/ 311 | /******/ /* webpack/runtime/nonce */ 312 | /******/ (() => { 313 | /******/ __webpack_require__.nc = undefined; 314 | /******/ })(); 315 | /******/ 316 | /************************************************************************/ 317 | /******/ 318 | /******/ // startup 319 | /******/ // Load entry module and return exports 320 | /******/ // This entry module is referenced by other modules so it can't be inlined 321 | /******/ var __webpack_exports__ = __webpack_require__("./src/index.js"); 322 | /******/ 323 | /******/ })() 324 | ; --------------------------------------------------------------------------------