├── .eslintrc.json ├── .github └── workflows │ └── linters.yml ├── .gitignore ├── .hintrc ├── .stylelintrc.json ├── README.md ├── dist ├── index.html └── main.js ├── murple_logo.png ├── package-lock.json ├── package.json ├── src ├── css │ └── style.css ├── index.html ├── index.js └── modules │ ├── checkCompleted.js │ ├── showTask.js │ └── variableList.js └── webpack.config.js /.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 | -------------------------------------------------------------------------------- /.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-22.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-22.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@7.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-22.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-22.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-22.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 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | logo 6 |
7 | 8 |
9 | 10 | 11 | 12 | # 📗 Table of Contents 13 | 14 | - [📖 About the Project](#about-project) 15 | - [🛠 Built With](#built-with) 16 | - [Tech Stack](#tech-stack) 17 | - [Key Features](#key-features) 18 | - [🚀 Live Demo](#live-demo) 19 | - [💻 Getting Started](#getting-started) 20 | - [Setup](#setup) 21 | - [Prerequisites](#prerequisites) 22 | - [👥 Authors](#authors) 23 | - [🔭 Future Features](#future-features) 24 | - [🤝 Contributing](#contributing) 25 | - [⭐️ Show your support](#support) 26 | - [🙏 Acknowledgements](#acknowledgements) 27 | - [📝 License](#license) 28 | 29 | 30 | 31 | # 📖 [To Do List] 32 | 33 | > **[To Do List]** is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. You will build a simple website that allows for doing that, and you will do it using ES6 and Webpack!. 34 | 35 | ## 🛠 Built With 36 | 37 | > HTML, 38 | > CSS, 39 | > JavaScripts and 40 | > Webpacks 41 | 42 | ### Tech Stack 43 | 44 |
45 | Client 46 | 52 |
53 | 54 | 55 | 56 | ### Key Features 57 | 58 | - **[Make use of Arrays and Objects]** 59 | - **[Add and Remove to do list]** 60 | 61 |

(back to top)

62 | 63 | 64 | 65 | ## 🚀 Live Demo 66 | 67 | - [Live Demo Link](https://iamchristianani.github.io/to-do-list/dist/) 68 | 69 |

(back to top)

70 | 71 | 72 | 73 | ## 💻 Getting Started 74 | 75 | > To get a local copy up and running, follow these steps. 76 | 77 | ## Prerequisites 78 | 79 | In order to run this project you need: 80 | 81 | > Computer with internet and 82 | > Visual Studio Code 83 | 84 | ### Setup 85 | 86 | Clone this repository to your desired folder: 87 | 88 | 1. Clone this repository or download the Zip folder: 89 | 90 | **`git clone https://github.com/iamchristianani/to-do-list.git`** 91 | 92 | 2. Navigate to the location of the folder in your machine: 93 | 94 | **`you@your-Pc-name:~$ cd `** 95 | 96 |

(back to top)

97 | 98 | 99 | 100 | ## 👥 Author 101 | 102 | 👤 **Christian Ani** 103 | 104 | - GitHub: [@iamchristianani](https://github.com/iamchristianani) 105 | - Twitter: [@kriznode](https://twitter.com/kriznode) 106 | - LinkedIn: [Christian Ani](https://www.linkedin.com/in/anikriz/) 107 | 108 |

(back to top)

109 | 110 | 111 | 112 | ## 🔭 Future Features 113 | 114 | - [ ] **[Create a complete website with navigation.]** 115 | 116 |

(back to top)

117 | 118 | 119 | 120 | ## 🤝 Contributing 121 | 122 | Contributions, issues, and feature requests are welcome! 123 | 124 | Feel free to check the [issues page](https://github.com/iamchristianani/to-do-list/issues). 125 | 126 |

(back to top)

127 | 128 | 129 | 130 | ## ⭐️ Show your support 131 | 132 | > If you like this project please give a star. 133 | 134 |

(back to top)

135 | 136 | 137 | 138 | ## 🙏 Acknowledgments 139 | 140 | > I would like to thank my coding partner 141 | 142 |

(back to top)

143 | 144 | 145 | 146 | ## 📝 License 147 | 148 | This project is [MIT](MIT.md) licensed. 149 | 150 |

(back to top)

151 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | To Do List 8 | 9 | 10 | 11 |
12 |
13 |
Today's To Do
14 |
15 | 16 |
17 |
    18 | 21 |
    22 |
    23 | 24 | -------------------------------------------------------------------------------- /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/css/style.css": 14 | /*!*****************************************************************!*\ 15 | !*** ./node_modules/css-loader/dist/cjs.js!./src/css/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// Imports\n\n\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()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"html {\\r\\n box-sizing: border-box;\\r\\n}\\r\\n\\r\\n*,\\r\\n*::before,\\r\\n*::after {\\r\\n box-sizing: inherit;\\r\\n}\\r\\n\\r\\ninput {\\r\\n color: gray;\\r\\n}\\r\\n\\r\\ninput:focus {\\r\\n outline: none;\\r\\n}\\r\\n\\r\\nbody {\\r\\n padding: 0;\\r\\n margin: 0;\\r\\n font-family: Arial, Helvetica, sans-serif;\\r\\n color: gray;\\r\\n}\\r\\n\\r\\nsection {\\r\\n width: 100%;\\r\\n display: flex;\\r\\n justify-content: center;\\r\\n align-items: center;\\r\\n margin-top: 10%;\\r\\n padding-bottom: 100px;\\r\\n}\\r\\n\\r\\n.list-box {\\r\\n width: 40vw;\\r\\n min-width: 400px;\\r\\n background-color: white;\\r\\n border-radius: 2px;\\r\\n border: 1px solid #d0d9d4;\\r\\n box-shadow: 1px 2px 10px rgb(212, 211, 211);\\r\\n}\\r\\n\\r\\n.all-box {\\r\\n border-bottom: 1px solid gray;\\r\\n padding: 15px 10px;\\r\\n}\\r\\n\\r\\n.input-box {\\r\\n border-bottom: 1px solid gray;\\r\\n}\\r\\n\\r\\n.the-input {\\r\\n height: 50px;\\r\\n width: 100%;\\r\\n border: none;\\r\\n padding-left: 15px;\\r\\n}\\r\\n\\r\\n.input-text {\\r\\n padding-left: 10px;\\r\\n border: none;\\r\\n color: #000;\\r\\n width: 80%;\\r\\n}\\r\\n\\r\\n.input-strike {\\r\\n text-decoration: line-through;\\r\\n color: gray;\\r\\n}\\r\\n\\r\\n.all-list {\\r\\n list-style: none;\\r\\n margin: 0;\\r\\n padding-left: 0;\\r\\n}\\r\\n\\r\\n.list-icon {\\r\\n float: right;\\r\\n padding-right: 10px;\\r\\n}\\r\\n\\r\\n.clear-button {\\r\\n text-align: center;\\r\\n padding: 20px 10px;\\r\\n width: 100%;\\r\\n border: none;\\r\\n font-size: 17px;\\r\\n color: gray;\\r\\n display: flex;\\r\\n justify-content: center;\\r\\n}\\r\\n\\r\\n.clear-btn-text {\\r\\n padding: 0;\\r\\n margin: 0;\\r\\n font-weight: 100;\\r\\n color: gray;\\r\\n}\\r\\n\\r\\n.clear-btn-text:hover {\\r\\n text-decoration: underline;\\r\\n color: black;\\r\\n}\\r\\n\\r\\n.clear-text {\\r\\n color: gray;\\r\\n}\\r\\n\\r\\n::-webkit-input-placeholder {\\r\\n font-style: italic;\\r\\n}\\r\\n\\r\\n::-moz-placeholder {\\r\\n font-style: italic;\\r\\n}\\r\\n\\r\\n:-moz-placeholder {\\r\\n font-style: italic;\\r\\n}\\r\\n\\r\\n:-ms-input-placeholder {\\r\\n font-style: italic;\\r\\n}\\r\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://to-do-list/./src/css/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 = [];\n\n // return the list of modules as css string\n list.toString = function toString() {\n return this.map(function (item) {\n var content = \"\";\n var needLayer = typeof item[5] !== \"undefined\";\n if (item[4]) {\n content += \"@supports (\".concat(item[4], \") {\");\n }\n if (item[2]) {\n content += \"@media \".concat(item[2], \" {\");\n }\n if (needLayer) {\n content += \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\");\n }\n content += cssWithMappingToString(item);\n if (needLayer) {\n content += \"}\";\n }\n if (item[2]) {\n content += \"}\";\n }\n if (item[4]) {\n content += \"}\";\n }\n return content;\n }).join(\"\");\n };\n\n // import a list of modules into the list\n list.i = function i(modules, media, dedupe, supports, layer) {\n if (typeof modules === \"string\") {\n modules = [[null, modules, undefined]];\n }\n var alreadyImportedModules = {};\n if (dedupe) {\n for (var k = 0; k < this.length; k++) {\n var id = this[k][0];\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n for (var _k = 0; _k < modules.length; _k++) {\n var item = [].concat(modules[_k]);\n if (dedupe && alreadyImportedModules[item[0]]) {\n continue;\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 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 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 list.push(item);\n }\n };\n return list;\n};\n\n//# sourceURL=webpack://to-do-list/./node_modules/css-loader/dist/runtime/api.js?"); 30 | 31 | /***/ }), 32 | 33 | /***/ "./node_modules/css-loader/dist/runtime/noSourceMaps.js": 34 | /*!**************************************************************!*\ 35 | !*** ./node_modules/css-loader/dist/runtime/noSourceMaps.js ***! 36 | \**************************************************************/ 37 | /***/ ((module) => { 38 | 39 | eval("\n\nmodule.exports = function (i) {\n return i[1];\n};\n\n//# sourceURL=webpack://to-do-list/./node_modules/css-loader/dist/runtime/noSourceMaps.js?"); 40 | 41 | /***/ }), 42 | 43 | /***/ "./src/css/style.css": 44 | /*!***************************!*\ 45 | !*** ./src/css/style.css ***! 46 | \***************************/ 47 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 48 | 49 | 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/css/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://to-do-list/./src/css/style.css?"); 50 | 51 | /***/ }), 52 | 53 | /***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js": 54 | /*!****************************************************************************!*\ 55 | !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***! 56 | \****************************************************************************/ 57 | /***/ ((module) => { 58 | 59 | 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://to-do-list/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?"); 60 | 61 | /***/ }), 62 | 63 | /***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js": 64 | /*!********************************************************************!*\ 65 | !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***! 66 | \********************************************************************/ 67 | /***/ ((module) => { 68 | 69 | 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://to-do-list/./node_modules/style-loader/dist/runtime/insertBySelector.js?"); 70 | 71 | /***/ }), 72 | 73 | /***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js": 74 | /*!**********************************************************************!*\ 75 | !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***! 76 | \**********************************************************************/ 77 | /***/ ((module) => { 78 | 79 | 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://to-do-list/./node_modules/style-loader/dist/runtime/insertStyleElement.js?"); 80 | 81 | /***/ }), 82 | 83 | /***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js": 84 | /*!**********************************************************************************!*\ 85 | !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***! 86 | \**********************************************************************************/ 87 | /***/ ((module, __unused_webpack_exports, __webpack_require__) => { 88 | 89 | 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://to-do-list/./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js?"); 90 | 91 | /***/ }), 92 | 93 | /***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js": 94 | /*!***************************************************************!*\ 95 | !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***! 96 | \***************************************************************/ 97 | /***/ ((module) => { 98 | 99 | 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://to-do-list/./node_modules/style-loader/dist/runtime/styleDomAPI.js?"); 100 | 101 | /***/ }), 102 | 103 | /***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js": 104 | /*!*********************************************************************!*\ 105 | !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***! 106 | \*********************************************************************/ 107 | /***/ ((module) => { 108 | 109 | 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://to-do-list/./node_modules/style-loader/dist/runtime/styleTagTransform.js?"); 110 | 111 | /***/ }), 112 | 113 | /***/ "./src/index.js": 114 | /*!**********************!*\ 115 | !*** ./src/index.js ***! 116 | \**********************/ 117 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 118 | 119 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _css_style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./css/style.css */ \"./src/css/style.css\");\n/* harmony import */ var _modules_variableList_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/variableList.js */ \"./src/modules/variableList.js\");\n/* harmony import */ var _modules_showTask_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/showTask.js */ \"./src/modules/showTask.js\");\n/* harmony import */ var _modules_checkCompleted_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/checkCompleted.js */ \"./src/modules/checkCompleted.js\");\n\n\n\n\n\n\nwindow.addEventListener('load', () => {\n (0,_modules_showTask_js__WEBPACK_IMPORTED_MODULE_2__.displayList)();\n});\n\n_modules_variableList_js__WEBPACK_IMPORTED_MODULE_1__.inputList.addEventListener('keypress', (e) => {\n const { target } = e;\n if (target.value === '') return;\n if (e.key === 'Enter') {\n (0,_modules_showTask_js__WEBPACK_IMPORTED_MODULE_2__.addList)();\n }\n});\n\n_modules_variableList_js__WEBPACK_IMPORTED_MODULE_1__.allList.addEventListener('click', (e) => {\n const { target } = e;\n const parentElement = target.parentNode;\n if (!parentElement.classList.contains('each-list')) return;\n const eachListId = Number(parentElement.id);\n // target the data action\n const { action } = target.dataset;\n\n if (action === 'delete') {\n (0,_modules_showTask_js__WEBPACK_IMPORTED_MODULE_2__.removeList)(eachListId);\n }\n});\n\n_modules_variableList_js__WEBPACK_IMPORTED_MODULE_1__.allList.addEventListener('change', (e) => {\n const { target } = e;\n const parentElement = target.parentNode;\n if (!parentElement.classList.contains('each-list')) return;\n const eachListId = Number(parentElement.id);\n // target the data action\n const { action } = target.dataset;\n\n if (action === 'checkbox') {\n (0,_modules_showTask_js__WEBPACK_IMPORTED_MODULE_2__.checkCompleted)(eachListId, target);\n (0,_modules_checkCompleted_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(target);\n }\n});\n\n_modules_variableList_js__WEBPACK_IMPORTED_MODULE_1__.clearButton.addEventListener('click', () => {\n (0,_modules_showTask_js__WEBPACK_IMPORTED_MODULE_2__.clearCompleted)();\n});\n\n_modules_variableList_js__WEBPACK_IMPORTED_MODULE_1__.allList.addEventListener('focusout', (e) => {\n const { target } = e;\n const parentElement = target.parentNode;\n if (!parentElement.classList.contains('each-list')) return;\n const eachListId = Number(parentElement.id);\n\n // target the data action\n const { action } = target.dataset;\n if (action === 'edit') {\n (0,_modules_showTask_js__WEBPACK_IMPORTED_MODULE_2__.editTask)(eachListId, target);\n }\n});\n\n_modules_variableList_js__WEBPACK_IMPORTED_MODULE_1__.allList.addEventListener('focusin', (e) => {\n const { target } = e;\n const parentElement = target.parentNode;\n if (!parentElement.classList.contains('each-list')) return;\n\n // target the data action\n const { action } = target.dataset;\n if (action === 'edit') {\n (0,_modules_showTask_js__WEBPACK_IMPORTED_MODULE_2__.changeTaskBg)(target);\n }\n});\n\n//# sourceURL=webpack://to-do-list/./src/index.js?"); 120 | 121 | /***/ }), 122 | 123 | /***/ "./src/modules/checkCompleted.js": 124 | /*!***************************************!*\ 125 | !*** ./src/modules/checkCompleted.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 */ });\nconst knowCheckValue = (box) => {\n if (box.checked) {\n return true;\n }\n return false;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (knowCheckValue);\n\n//# sourceURL=webpack://to-do-list/./src/modules/checkCompleted.js?"); 130 | 131 | /***/ }), 132 | 133 | /***/ "./src/modules/showTask.js": 134 | /*!*********************************!*\ 135 | !*** ./src/modules/showTask.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 */ \"addList\": () => (/* binding */ addList),\n/* harmony export */ \"changeTaskBg\": () => (/* binding */ changeTaskBg),\n/* harmony export */ \"checkCompleted\": () => (/* binding */ checkCompleted),\n/* harmony export */ \"clearCompleted\": () => (/* binding */ clearCompleted),\n/* harmony export */ \"displayList\": () => (/* binding */ displayList),\n/* harmony export */ \"editTask\": () => (/* binding */ editTask),\n/* harmony export */ \"removeList\": () => (/* binding */ removeList)\n/* harmony export */ });\n/* harmony import */ var _variableList_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./variableList.js */ \"./src/modules/variableList.js\");\n/* harmony import */ var _checkCompleted_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./checkCompleted.js */ \"./src/modules/checkCompleted.js\");\n\n\n\nlet tasksArr = [];\n\n// Reset The Indexes\nconst resetIndex = (arr) => {\n for (let i = 0; i < arr.length; i += 1) {\n arr[i].index = i + 1;\n }\n};\n\n// Save To Local Directory\nconst saveToDir = (arr) => {\n const jsonData = JSON.stringify(arr);\n localStorage.setItem('lists', jsonData);\n};\n\n/** RENDER FUNCTION */\nconst renderDisplay = () => {\n _variableList_js__WEBPACK_IMPORTED_MODULE_0__.allList.innerHTML = '';\n tasksArr.forEach((task, index) => {\n const oneTask = document.createElement('li');\n oneTask.classList = 'each-list all-box';\n oneTask.id = index;\n oneTask.innerHTML = `\n \n \n \n `;\n _variableList_js__WEBPACK_IMPORTED_MODULE_0__.allList.appendChild(oneTask);\n _variableList_js__WEBPACK_IMPORTED_MODULE_0__.inputList.value = '';\n });\n};\n\n/** ADD NEW TO-DO TASK FUNCTION */\nconst addList = () => {\n const eachList = {};\n eachList.description = _variableList_js__WEBPACK_IMPORTED_MODULE_0__.inputList.value;\n eachList.completed = false;\n eachList.index = tasksArr.length + 1;\n tasksArr.push(eachList);\n renderDisplay();\n saveToDir(tasksArr);\n};\n\n/** REMOVE TO-DO TASK FUNCTION */\nconst removeList = (index) => {\n tasksArr.splice(index, 1);\n resetIndex(tasksArr);\n renderDisplay();\n saveToDir(tasksArr);\n};\n\n/** EDIT TO-DO TASK FUNCTION */\nconst editTask = (inputId, input) => {\n tasksArr[inputId].description = input.value;\n renderDisplay();\n saveToDir(tasksArr);\n};\n\n/** CHECKBOX FUNCTION */\nconst checkCompleted = (buttonId, box) => {\n box.nextElementSibling.classList.toggle('input-strike');\n tasksArr[buttonId].completed = (0,_checkCompleted_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(box);\n saveToDir(tasksArr);\n if (tasksArr[buttonId].completed === true) {\n box.checked = true;\n box.nextElementSibling.classList.add('input-strike');\n }\n};\n\n/** CLEAR COMPLETED TASK FUNCTION */\nconst clearCompleted = () => {\n tasksArr = tasksArr.filter((obj) => obj.completed !== true);\n renderDisplay();\n resetIndex(tasksArr);\n saveToDir(tasksArr);\n};\n\n// Change Background When Editing\nconst changeTaskBg = (input) => {\n input.parentElement.style.backgroundColor = '#fffed7';\n input.style.backgroundColor = '#fffed7';\n};\n\n// Extract From Local Directory and Display\nconst displayList = () => {\n const getJsonData = localStorage.getItem('lists');\n if (getJsonData) {\n tasksArr = JSON.parse(getJsonData);\n }\n renderDisplay();\n};\n\n\n\n\n//# sourceURL=webpack://to-do-list/./src/modules/showTask.js?"); 140 | 141 | /***/ }), 142 | 143 | /***/ "./src/modules/variableList.js": 144 | /*!*************************************!*\ 145 | !*** ./src/modules/variableList.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 */ \"allList\": () => (/* binding */ allList),\n/* harmony export */ \"clearButton\": () => (/* binding */ clearButton),\n/* harmony export */ \"inputList\": () => (/* binding */ inputList)\n/* harmony export */ });\nconst allList = document.querySelector('.all-list');\nconst inputList = document.querySelector('#the-input');\nconst clearButton = document.querySelector('.clear-btn-text');\n\n//# sourceURL=webpack://to-do-list/./src/modules/variableList.js?"); 150 | 151 | /***/ }) 152 | 153 | /******/ }); 154 | /************************************************************************/ 155 | /******/ // The module cache 156 | /******/ var __webpack_module_cache__ = {}; 157 | /******/ 158 | /******/ // The require function 159 | /******/ function __webpack_require__(moduleId) { 160 | /******/ // Check if module is in cache 161 | /******/ var cachedModule = __webpack_module_cache__[moduleId]; 162 | /******/ if (cachedModule !== undefined) { 163 | /******/ return cachedModule.exports; 164 | /******/ } 165 | /******/ // Create a new module (and put it into the cache) 166 | /******/ var module = __webpack_module_cache__[moduleId] = { 167 | /******/ id: moduleId, 168 | /******/ // no module.loaded needed 169 | /******/ exports: {} 170 | /******/ }; 171 | /******/ 172 | /******/ // Execute the module function 173 | /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); 174 | /******/ 175 | /******/ // Return the exports of the module 176 | /******/ return module.exports; 177 | /******/ } 178 | /******/ 179 | /************************************************************************/ 180 | /******/ /* webpack/runtime/compat get default export */ 181 | /******/ (() => { 182 | /******/ // getDefaultExport function for compatibility with non-harmony modules 183 | /******/ __webpack_require__.n = (module) => { 184 | /******/ var getter = module && module.__esModule ? 185 | /******/ () => (module['default']) : 186 | /******/ () => (module); 187 | /******/ __webpack_require__.d(getter, { a: getter }); 188 | /******/ return getter; 189 | /******/ }; 190 | /******/ })(); 191 | /******/ 192 | /******/ /* webpack/runtime/define property getters */ 193 | /******/ (() => { 194 | /******/ // define getter functions for harmony exports 195 | /******/ __webpack_require__.d = (exports, definition) => { 196 | /******/ for(var key in definition) { 197 | /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 198 | /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); 199 | /******/ } 200 | /******/ } 201 | /******/ }; 202 | /******/ })(); 203 | /******/ 204 | /******/ /* webpack/runtime/hasOwnProperty shorthand */ 205 | /******/ (() => { 206 | /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) 207 | /******/ })(); 208 | /******/ 209 | /******/ /* webpack/runtime/make namespace object */ 210 | /******/ (() => { 211 | /******/ // define __esModule on exports 212 | /******/ __webpack_require__.r = (exports) => { 213 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 214 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 215 | /******/ } 216 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 217 | /******/ }; 218 | /******/ })(); 219 | /******/ 220 | /******/ /* webpack/runtime/nonce */ 221 | /******/ (() => { 222 | /******/ __webpack_require__.nc = undefined; 223 | /******/ })(); 224 | /******/ 225 | /************************************************************************/ 226 | /******/ 227 | /******/ // startup 228 | /******/ // Load entry module and return exports 229 | /******/ // This entry module can't be inlined because the eval devtool is used. 230 | /******/ var __webpack_exports__ = __webpack_require__("./src/index.js"); 231 | /******/ 232 | /******/ })() 233 | ; -------------------------------------------------------------------------------- /murple_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamchristianani/to-do-list/3a8e4dae11036349fd0eba96c004c61d7a1315e6/murple_logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "to-do-list", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack --mode development", 8 | "build": "webpack", 9 | "start": "webpack serve --open" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/iamchristianani/to-do-list.git" 14 | }, 15 | "keywords": [], 16 | "author": "", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/iamchristianani/to-do-list/issues" 20 | }, 21 | "homepage": "https://github.com/iamchristianani/to-do-list#readme", 22 | "devDependencies": { 23 | "babel-eslint": "^10.1.0", 24 | "css-loader": "^6.7.2", 25 | "eslint": "^7.32.0", 26 | "eslint-config-airbnb-base": "^14.2.1", 27 | "eslint-plugin-import": "^2.26.0", 28 | "hint": "^7.1.3", 29 | "html-webpack-plugin": "^5.5.0", 30 | "style-loader": "^3.3.1", 31 | "stylelint": "^13.13.1", 32 | "stylelint-config-standard": "^21.0.0", 33 | "stylelint-csstree-validator": "^1.9.0", 34 | "stylelint-scss": "^3.21.0", 35 | "webpack": "^5.75.0", 36 | "webpack-cli": "^5.0.1", 37 | "webpack-dev-server": "^4.11.1" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, 6 | *::before, 7 | *::after { 8 | box-sizing: inherit; 9 | } 10 | 11 | input { 12 | color: gray; 13 | } 14 | 15 | input:focus { 16 | outline: none; 17 | } 18 | 19 | body { 20 | padding: 0; 21 | margin: 0; 22 | font-family: Arial, Helvetica, sans-serif; 23 | color: gray; 24 | } 25 | 26 | section { 27 | width: 100%; 28 | display: flex; 29 | justify-content: center; 30 | align-items: center; 31 | margin-top: 10%; 32 | padding-bottom: 100px; 33 | } 34 | 35 | .list-box { 36 | width: 40vw; 37 | min-width: 400px; 38 | background-color: white; 39 | border-radius: 2px; 40 | border: 1px solid #d0d9d4; 41 | box-shadow: 1px 2px 10px rgb(212, 211, 211); 42 | } 43 | 44 | .all-box { 45 | border-bottom: 1px solid gray; 46 | padding: 15px 10px; 47 | } 48 | 49 | .input-box { 50 | border-bottom: 1px solid gray; 51 | } 52 | 53 | .the-input { 54 | height: 50px; 55 | width: 100%; 56 | border: none; 57 | padding-left: 15px; 58 | } 59 | 60 | .input-text { 61 | padding-left: 10px; 62 | border: none; 63 | color: #000; 64 | width: 80%; 65 | } 66 | 67 | .input-strike { 68 | text-decoration: line-through; 69 | color: gray; 70 | } 71 | 72 | .all-list { 73 | list-style: none; 74 | margin: 0; 75 | padding-left: 0; 76 | } 77 | 78 | .list-icon { 79 | float: right; 80 | padding-right: 10px; 81 | } 82 | 83 | .clear-button { 84 | text-align: center; 85 | padding: 20px 10px; 86 | width: 100%; 87 | border: none; 88 | font-size: 17px; 89 | color: gray; 90 | display: flex; 91 | justify-content: center; 92 | } 93 | 94 | .clear-btn-text { 95 | padding: 0; 96 | margin: 0; 97 | font-weight: 100; 98 | color: gray; 99 | } 100 | 101 | .clear-btn-text:hover { 102 | text-decoration: underline; 103 | color: black; 104 | } 105 | 106 | .clear-text { 107 | color: gray; 108 | } 109 | 110 | ::-webkit-input-placeholder { 111 | font-style: italic; 112 | } 113 | 114 | ::-moz-placeholder { 115 | font-style: italic; 116 | } 117 | 118 | :-moz-placeholder { 119 | font-style: italic; 120 | } 121 | 122 | :-ms-input-placeholder { 123 | font-style: italic; 124 | } 125 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | To Do List 8 | 9 | 10 | 11 |
    12 |
    13 |
    Today's To Do
    14 |
    15 | 16 |
    17 |
      18 | 21 |
      22 |
      23 | 24 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './css/style.css'; 2 | import { inputList, clearButton, allList } from './modules/variableList.js'; 3 | import { 4 | displayList, 5 | addList, 6 | removeList, 7 | editTask, 8 | checkCompleted, 9 | changeTaskBg, 10 | clearCompleted, 11 | } from './modules/showTask.js'; 12 | 13 | import knowCheckValue from './modules/checkCompleted.js'; 14 | 15 | window.addEventListener('load', () => { 16 | displayList(); 17 | }); 18 | 19 | inputList.addEventListener('keypress', (e) => { 20 | const { target } = e; 21 | if (target.value === '') return; 22 | if (e.key === 'Enter') { 23 | addList(); 24 | } 25 | }); 26 | 27 | allList.addEventListener('click', (e) => { 28 | const { target } = e; 29 | const parentElement = target.parentNode; 30 | if (!parentElement.classList.contains('each-list')) return; 31 | const eachListId = Number(parentElement.id); 32 | // target the data action 33 | const { action } = target.dataset; 34 | 35 | if (action === 'delete') { 36 | removeList(eachListId); 37 | } 38 | }); 39 | 40 | allList.addEventListener('change', (e) => { 41 | const { target } = e; 42 | const parentElement = target.parentNode; 43 | if (!parentElement.classList.contains('each-list')) return; 44 | const eachListId = Number(parentElement.id); 45 | // target the data action 46 | const { action } = target.dataset; 47 | 48 | if (action === 'checkbox') { 49 | checkCompleted(eachListId, target); 50 | knowCheckValue(target); 51 | } 52 | }); 53 | 54 | clearButton.addEventListener('click', () => { 55 | clearCompleted(); 56 | }); 57 | 58 | allList.addEventListener('focusout', (e) => { 59 | const { target } = e; 60 | const parentElement = target.parentNode; 61 | if (!parentElement.classList.contains('each-list')) return; 62 | const eachListId = Number(parentElement.id); 63 | 64 | // target the data action 65 | const { action } = target.dataset; 66 | if (action === 'edit') { 67 | editTask(eachListId, target); 68 | } 69 | }); 70 | 71 | allList.addEventListener('focusin', (e) => { 72 | const { target } = e; 73 | const parentElement = target.parentNode; 74 | if (!parentElement.classList.contains('each-list')) return; 75 | 76 | // target the data action 77 | const { action } = target.dataset; 78 | if (action === 'edit') { 79 | changeTaskBg(target); 80 | } 81 | }); -------------------------------------------------------------------------------- /src/modules/checkCompleted.js: -------------------------------------------------------------------------------- 1 | const knowCheckValue = (box) => { 2 | if (box.checked) { 3 | return true; 4 | } 5 | return false; 6 | }; 7 | 8 | export default knowCheckValue; -------------------------------------------------------------------------------- /src/modules/showTask.js: -------------------------------------------------------------------------------- 1 | import { allList, inputList } from './variableList.js'; 2 | import knowCheckValue from './checkCompleted.js'; 3 | 4 | let tasksArr = []; 5 | 6 | // Reset The Indexes 7 | const resetIndex = (arr) => { 8 | for (let i = 0; i < arr.length; i += 1) { 9 | arr[i].index = i + 1; 10 | } 11 | }; 12 | 13 | // Save To Local Directory 14 | const saveToDir = (arr) => { 15 | const jsonData = JSON.stringify(arr); 16 | localStorage.setItem('lists', jsonData); 17 | }; 18 | 19 | /** RENDER FUNCTION */ 20 | const renderDisplay = () => { 21 | allList.innerHTML = ''; 22 | tasksArr.forEach((task, index) => { 23 | const oneTask = document.createElement('li'); 24 | oneTask.classList = 'each-list all-box'; 25 | oneTask.id = index; 26 | oneTask.innerHTML = ` 27 | 28 | 29 | 30 | `; 31 | allList.appendChild(oneTask); 32 | inputList.value = ''; 33 | }); 34 | }; 35 | 36 | /** ADD NEW TO-DO TASK FUNCTION */ 37 | const addList = () => { 38 | const eachList = {}; 39 | eachList.description = inputList.value; 40 | eachList.completed = false; 41 | eachList.index = tasksArr.length + 1; 42 | tasksArr.push(eachList); 43 | renderDisplay(); 44 | saveToDir(tasksArr); 45 | }; 46 | 47 | /** REMOVE TO-DO TASK FUNCTION */ 48 | const removeList = (index) => { 49 | tasksArr.splice(index, 1); 50 | resetIndex(tasksArr); 51 | renderDisplay(); 52 | saveToDir(tasksArr); 53 | }; 54 | 55 | /** EDIT TO-DO TASK FUNCTION */ 56 | const editTask = (inputId, input) => { 57 | tasksArr[inputId].description = input.value; 58 | renderDisplay(); 59 | saveToDir(tasksArr); 60 | }; 61 | 62 | /** CHECKBOX FUNCTION */ 63 | const checkCompleted = (buttonId, box) => { 64 | box.nextElementSibling.classList.toggle('input-strike'); 65 | tasksArr[buttonId].completed = knowCheckValue(box); 66 | saveToDir(tasksArr); 67 | if (tasksArr[buttonId].completed === true) { 68 | box.checked = true; 69 | box.nextElementSibling.classList.add('input-strike'); 70 | } 71 | }; 72 | 73 | /** CLEAR COMPLETED TASK FUNCTION */ 74 | const clearCompleted = () => { 75 | tasksArr = tasksArr.filter((obj) => obj.completed !== true); 76 | renderDisplay(); 77 | resetIndex(tasksArr); 78 | saveToDir(tasksArr); 79 | }; 80 | 81 | // Change Background When Editing 82 | const changeTaskBg = (input) => { 83 | input.parentElement.style.backgroundColor = '#fffed7'; 84 | input.style.backgroundColor = '#fffed7'; 85 | }; 86 | 87 | // Extract From Local Directory and Display 88 | const displayList = () => { 89 | const getJsonData = localStorage.getItem('lists'); 90 | if (getJsonData) { 91 | tasksArr = JSON.parse(getJsonData); 92 | } 93 | renderDisplay(); 94 | }; 95 | 96 | export { 97 | displayList, 98 | addList, 99 | removeList, 100 | editTask, 101 | checkCompleted, 102 | changeTaskBg, 103 | clearCompleted, 104 | }; 105 | -------------------------------------------------------------------------------- /src/modules/variableList.js: -------------------------------------------------------------------------------- 1 | export const allList = document.querySelector('.all-list'); 2 | export const inputList = document.querySelector('#the-input'); 3 | export const clearButton = document.querySelector('.clear-btn-text'); -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 2 | const path = require('path'); 3 | 4 | module.exports = { 5 | mode: 'development', 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.css$/, 10 | use: ['style-loader', 'css-loader'], 11 | }, 12 | ], 13 | }, 14 | plugins: [ 15 | new HtmlWebpackPlugin({ 16 | template: path.resolve(__dirname, 'src', 'index.html'), 17 | }), 18 | ], 19 | }; --------------------------------------------------------------------------------