├── .github
└── workflows
│ └── linters.yml
├── .gitignore
├── README.md
├── dist
├── index.html
└── main.js
├── package-lock.json
├── package.json
├── src
├── images
│ └── Screenshot1.png
├── index.html
├── index.js
├── style.css
└── utils
│ └── structure.js
└── webpack.config.js
/.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 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # .gitignore
2 | node_modules/
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # To Do List
4 |
5 | > To Do List project is list of todo items, users can add and remove item from todo list.
6 |
7 | ## Screenshots:
8 |
9 | 
10 |
11 | Porject's features are added into seperate branch to keep main branch safe.
12 |
13 | ## Built With
14 |
15 | - HTML
16 | - CSS
17 | - JavaScript
18 | - Webpack
19 |
20 | ## Online live link
21 |
22 | [Visit project online](https://thecodechaser.github.io/todo-list/dist/)
23 |
24 | ## Getting Started
25 |
26 | To get a local copy up and running follow these simple example steps.
27 |
28 | ### Using it Locally
29 | - Clone the project from GitHub [here](git@github.com:thecodechaser/todo-list.git)
30 | - Run the following commands as listed in your terminal:
31 | - `npm install`
32 | - `npm run build`
33 | - `npm start`
34 |
35 | ## Visit And Open Files
36 |
37 | [Visit Repo](https://github.com/thecodechaser/todo-list)
38 |
39 | ## Download Repo
40 |
41 | [Download Repo](https://github.com/thecodechaser/todo-list/archive/refs/heads/main.zip)
42 |
43 | ## Authors
44 |
45 | 👤 **Ranjeet Singh**
46 |
47 | - GitHub: [@githubhandle](https://github.com/thecodechaser)
48 | - Twitter: [@twitterhandle](https://twitter.com/thecodechaser)
49 | - LinkedIn: [LinkedIn](https://linkedin.com/in/thecodechaser)
50 |
51 | ## 🤝 Contributing
52 |
53 | Contributions, issues, and feature requests are welcome!
54 |
55 | Feel free to check the [issues page](https://github.com/thecodechaser/todo-list/issues).
56 |
57 | ## Show your support
58 |
59 | Give a ⭐️ if you like this project!
60 |
61 | ## Acknowledgments
62 |
63 | - Inspiration: Microverse
64 |
65 | ## 📝 License
66 |
67 | This project is [MIT](./MIT.md) licensed.
68 |
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
17 |
18 |
Today's To Do
19 |
20 |
21 |
22 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/dist/main.js:
--------------------------------------------------------------------------------
1 | /******/ (() => { // webpackBootstrap
2 | /******/ "use strict";
3 | /******/ var __webpack_modules__ = ({
4 |
5 | /***/ "./node_modules/css-loader/dist/cjs.js!./src/style.css":
6 | /*!*************************************************************!*\
7 | !*** ./node_modules/css-loader/dist/cjs.js!./src/style.css ***!
8 | \*************************************************************/
9 | /***/ ((module, __webpack_exports__, __webpack_require__) => {
10 |
11 | __webpack_require__.r(__webpack_exports__);
12 | /* harmony export */ __webpack_require__.d(__webpack_exports__, {
13 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
14 | /* harmony export */ });
15 | /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/sourceMaps.js */ "./node_modules/css-loader/dist/runtime/sourceMaps.js");
16 | /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
17 | /* 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");
18 | /* 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__);
19 | // Imports
20 |
21 |
22 | var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
23 | ___CSS_LOADER_EXPORT___.push([module.id, "@import url(https://fonts.googleapis.com/css2?family=Poppins&display=swap);"]);
24 | // Module
25 | ___CSS_LOADER_EXPORT___.push([module.id, "/* stylesheet */\r\n\r\nbody {\r\n font-family: \"Poppins\", sans-serif;\r\n}\r\n\r\n.main-container {\r\n border: 3px solid #dfe1e6;\r\n margin: 30px 20px 0 20px;\r\n box-shadow: 5px 5px #dfe1e6;\r\n}\r\n\r\n.list-head {\r\n display: flex;\r\n justify-content: space-between;\r\n margin: 0 10px;\r\n}\r\n\r\nhr {\r\n height: 1px;\r\n background-color: #dfe1e6;\r\n border: none;\r\n margin: 0;\r\n}\r\n\r\nform {\r\n display: flex;\r\n}\r\n\r\n.fa-level-down-alt {\r\n font-size: 20px;\r\n color: rgba(5, 5, 5, 0.507);\r\n}\r\n\r\n.form-input {\r\n font-style: italic;\r\n padding: 10px;\r\n border: none;\r\n width: 90%;\r\n outline: none;\r\n}\r\n\r\n.main-heading {\r\n font-weight: 100;\r\n font-size: 18px;\r\n color: rgba(0, 0, 0, 0.877);\r\n}\r\n\r\n.fa-sync-alt {\r\n margin-top: 17px;\r\n margin-right: 10px;\r\n color: rgba(5, 5, 5, 0.507);\r\n}\r\n\r\nul {\r\n padding: 0;\r\n gap: 10px;\r\n display: flex;\r\n flex-direction: column;\r\n list-style-type: none;\r\n}\r\n\r\n.list-item {\r\n display: flex;\r\n gap: 10px;\r\n padding-left: 0;\r\n}\r\n\r\n.list-input {\r\n margin-top: 5px;\r\n transform: scale(1.3);\r\n}\r\n\r\n.item-details {\r\n margin-top: 0;\r\n width: 300px;\r\n border: none;\r\n resize: none;\r\n outline: none;\r\n}\r\n\r\n.fa-trash-alt {\r\n display: none;\r\n margin-left: 150px;\r\n color: rgba(73, 73, 73, 0.726);\r\n}\r\n\r\n.fa-square {\r\n font-size: 18px;\r\n margin-top: 18px;\r\n color: rgb(73, 73, 73);\r\n}\r\n\r\n.clear {\r\n text-align: center;\r\n font-size: 18px;\r\n color: rgb(87, 80, 80);\r\n background-color: #80808048;\r\n margin-bottom: 0;\r\n padding: 20px 0;\r\n}\r\n\r\n@media screen and (min-width: 772px) {\r\n .main-container {\r\n margin: 30px 30vw 0 30vw;\r\n }\r\n}\r\n", "",{"version":3,"sources":["webpack://./src/style.css"],"names":[],"mappings":"AAAA,eAAe;;AAGf;EACE,kCAAkC;AACpC;;AAEA;EACE,yBAAyB;EACzB,wBAAwB;EACxB,2BAA2B;AAC7B;;AAEA;EACE,aAAa;EACb,8BAA8B;EAC9B,cAAc;AAChB;;AAEA;EACE,WAAW;EACX,yBAAyB;EACzB,YAAY;EACZ,SAAS;AACX;;AAEA;EACE,aAAa;AACf;;AAEA;EACE,eAAe;EACf,2BAA2B;AAC7B;;AAEA;EACE,kBAAkB;EAClB,aAAa;EACb,YAAY;EACZ,UAAU;EACV,aAAa;AACf;;AAEA;EACE,gBAAgB;EAChB,eAAe;EACf,2BAA2B;AAC7B;;AAEA;EACE,gBAAgB;EAChB,kBAAkB;EAClB,2BAA2B;AAC7B;;AAEA;EACE,UAAU;EACV,SAAS;EACT,aAAa;EACb,sBAAsB;EACtB,qBAAqB;AACvB;;AAEA;EACE,aAAa;EACb,SAAS;EACT,eAAe;AACjB;;AAEA;EACE,eAAe;EACf,qBAAqB;AACvB;;AAEA;EACE,aAAa;EACb,YAAY;EACZ,YAAY;EACZ,YAAY;EACZ,aAAa;AACf;;AAEA;EACE,aAAa;EACb,kBAAkB;EAClB,8BAA8B;AAChC;;AAEA;EACE,eAAe;EACf,gBAAgB;EAChB,sBAAsB;AACxB;;AAEA;EACE,kBAAkB;EAClB,eAAe;EACf,sBAAsB;EACtB,2BAA2B;EAC3B,gBAAgB;EAChB,eAAe;AACjB;;AAEA;EACE;IACE,wBAAwB;EAC1B;AACF","sourcesContent":["/* stylesheet */\r\n@import url(\"https://fonts.googleapis.com/css2?family=Poppins&display=swap\");\r\n\r\nbody {\r\n font-family: \"Poppins\", sans-serif;\r\n}\r\n\r\n.main-container {\r\n border: 3px solid #dfe1e6;\r\n margin: 30px 20px 0 20px;\r\n box-shadow: 5px 5px #dfe1e6;\r\n}\r\n\r\n.list-head {\r\n display: flex;\r\n justify-content: space-between;\r\n margin: 0 10px;\r\n}\r\n\r\nhr {\r\n height: 1px;\r\n background-color: #dfe1e6;\r\n border: none;\r\n margin: 0;\r\n}\r\n\r\nform {\r\n display: flex;\r\n}\r\n\r\n.fa-level-down-alt {\r\n font-size: 20px;\r\n color: rgba(5, 5, 5, 0.507);\r\n}\r\n\r\n.form-input {\r\n font-style: italic;\r\n padding: 10px;\r\n border: none;\r\n width: 90%;\r\n outline: none;\r\n}\r\n\r\n.main-heading {\r\n font-weight: 100;\r\n font-size: 18px;\r\n color: rgba(0, 0, 0, 0.877);\r\n}\r\n\r\n.fa-sync-alt {\r\n margin-top: 17px;\r\n margin-right: 10px;\r\n color: rgba(5, 5, 5, 0.507);\r\n}\r\n\r\nul {\r\n padding: 0;\r\n gap: 10px;\r\n display: flex;\r\n flex-direction: column;\r\n list-style-type: none;\r\n}\r\n\r\n.list-item {\r\n display: flex;\r\n gap: 10px;\r\n padding-left: 0;\r\n}\r\n\r\n.list-input {\r\n margin-top: 5px;\r\n transform: scale(1.3);\r\n}\r\n\r\n.item-details {\r\n margin-top: 0;\r\n width: 300px;\r\n border: none;\r\n resize: none;\r\n outline: none;\r\n}\r\n\r\n.fa-trash-alt {\r\n display: none;\r\n margin-left: 150px;\r\n color: rgba(73, 73, 73, 0.726);\r\n}\r\n\r\n.fa-square {\r\n font-size: 18px;\r\n margin-top: 18px;\r\n color: rgb(73, 73, 73);\r\n}\r\n\r\n.clear {\r\n text-align: center;\r\n font-size: 18px;\r\n color: rgb(87, 80, 80);\r\n background-color: #80808048;\r\n margin-bottom: 0;\r\n padding: 20px 0;\r\n}\r\n\r\n@media screen and (min-width: 772px) {\r\n .main-container {\r\n margin: 30px 30vw 0 30vw;\r\n }\r\n}\r\n"],"sourceRoot":""}]);
26 | // Exports
27 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
28 |
29 |
30 | /***/ }),
31 |
32 | /***/ "./node_modules/css-loader/dist/runtime/api.js":
33 | /*!*****************************************************!*\
34 | !*** ./node_modules/css-loader/dist/runtime/api.js ***!
35 | \*****************************************************/
36 | /***/ ((module) => {
37 |
38 |
39 |
40 | /*
41 | MIT License http://www.opensource.org/licenses/mit-license.php
42 | Author Tobias Koppers @sokra
43 | */
44 | module.exports = function (cssWithMappingToString) {
45 | var list = []; // return the list of modules as css string
46 |
47 | list.toString = function toString() {
48 | return this.map(function (item) {
49 | var content = "";
50 | var needLayer = typeof item[5] !== "undefined";
51 |
52 | if (item[4]) {
53 | content += "@supports (".concat(item[4], ") {");
54 | }
55 |
56 | if (item[2]) {
57 | content += "@media ".concat(item[2], " {");
58 | }
59 |
60 | if (needLayer) {
61 | content += "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {");
62 | }
63 |
64 | content += cssWithMappingToString(item);
65 |
66 | if (needLayer) {
67 | content += "}";
68 | }
69 |
70 | if (item[2]) {
71 | content += "}";
72 | }
73 |
74 | if (item[4]) {
75 | content += "}";
76 | }
77 |
78 | return content;
79 | }).join("");
80 | }; // import a list of modules into the list
81 |
82 |
83 | list.i = function i(modules, media, dedupe, supports, layer) {
84 | if (typeof modules === "string") {
85 | modules = [[null, modules, undefined]];
86 | }
87 |
88 | var alreadyImportedModules = {};
89 |
90 | if (dedupe) {
91 | for (var k = 0; k < this.length; k++) {
92 | var id = this[k][0];
93 |
94 | if (id != null) {
95 | alreadyImportedModules[id] = true;
96 | }
97 | }
98 | }
99 |
100 | for (var _k = 0; _k < modules.length; _k++) {
101 | var item = [].concat(modules[_k]);
102 |
103 | if (dedupe && alreadyImportedModules[item[0]]) {
104 | continue;
105 | }
106 |
107 | if (typeof layer !== "undefined") {
108 | if (typeof item[5] === "undefined") {
109 | item[5] = layer;
110 | } else {
111 | item[1] = "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {").concat(item[1], "}");
112 | item[5] = layer;
113 | }
114 | }
115 |
116 | if (media) {
117 | if (!item[2]) {
118 | item[2] = media;
119 | } else {
120 | item[1] = "@media ".concat(item[2], " {").concat(item[1], "}");
121 | item[2] = media;
122 | }
123 | }
124 |
125 | if (supports) {
126 | if (!item[4]) {
127 | item[4] = "".concat(supports);
128 | } else {
129 | item[1] = "@supports (".concat(item[4], ") {").concat(item[1], "}");
130 | item[4] = supports;
131 | }
132 | }
133 |
134 | list.push(item);
135 | }
136 | };
137 |
138 | return list;
139 | };
140 |
141 | /***/ }),
142 |
143 | /***/ "./node_modules/css-loader/dist/runtime/sourceMaps.js":
144 | /*!************************************************************!*\
145 | !*** ./node_modules/css-loader/dist/runtime/sourceMaps.js ***!
146 | \************************************************************/
147 | /***/ ((module) => {
148 |
149 |
150 |
151 | module.exports = function (item) {
152 | var content = item[1];
153 | var cssMapping = item[3];
154 |
155 | if (!cssMapping) {
156 | return content;
157 | }
158 |
159 | if (typeof btoa === "function") {
160 | var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(cssMapping))));
161 | var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64);
162 | var sourceMapping = "/*# ".concat(data, " */");
163 | var sourceURLs = cssMapping.sources.map(function (source) {
164 | return "/*# sourceURL=".concat(cssMapping.sourceRoot || "").concat(source, " */");
165 | });
166 | return [content].concat(sourceURLs).concat([sourceMapping]).join("\n");
167 | }
168 |
169 | return [content].join("\n");
170 | };
171 |
172 | /***/ }),
173 |
174 | /***/ "./src/style.css":
175 | /*!***********************!*\
176 | !*** ./src/style.css ***!
177 | \***********************/
178 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
179 |
180 | __webpack_require__.r(__webpack_exports__);
181 | /* harmony export */ __webpack_require__.d(__webpack_exports__, {
182 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
183 | /* harmony export */ });
184 | /* 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");
185 | /* 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__);
186 | /* 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");
187 | /* 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__);
188 | /* 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");
189 | /* 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__);
190 | /* 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");
191 | /* 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__);
192 | /* 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");
193 | /* 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__);
194 | /* 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");
195 | /* 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__);
196 | /* 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");
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 | var options = {};
209 |
210 | options.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());
211 | options.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());
212 |
213 | options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, "head");
214 |
215 | options.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());
216 | options.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());
217 |
218 | var 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);
219 |
220 |
221 |
222 |
223 | /* 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);
224 |
225 |
226 | /***/ }),
227 |
228 | /***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":
229 | /*!****************************************************************************!*\
230 | !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
231 | \****************************************************************************/
232 | /***/ ((module) => {
233 |
234 |
235 |
236 | var stylesInDOM = [];
237 |
238 | function getIndexByIdentifier(identifier) {
239 | var result = -1;
240 |
241 | for (var i = 0; i < stylesInDOM.length; i++) {
242 | if (stylesInDOM[i].identifier === identifier) {
243 | result = i;
244 | break;
245 | }
246 | }
247 |
248 | return result;
249 | }
250 |
251 | function modulesToDom(list, options) {
252 | var idCountMap = {};
253 | var identifiers = [];
254 |
255 | for (var i = 0; i < list.length; i++) {
256 | var item = list[i];
257 | var id = options.base ? item[0] + options.base : item[0];
258 | var count = idCountMap[id] || 0;
259 | var identifier = "".concat(id, " ").concat(count);
260 | idCountMap[id] = count + 1;
261 | var indexByIdentifier = getIndexByIdentifier(identifier);
262 | var obj = {
263 | css: item[1],
264 | media: item[2],
265 | sourceMap: item[3],
266 | supports: item[4],
267 | layer: item[5]
268 | };
269 |
270 | if (indexByIdentifier !== -1) {
271 | stylesInDOM[indexByIdentifier].references++;
272 | stylesInDOM[indexByIdentifier].updater(obj);
273 | } else {
274 | var updater = addElementStyle(obj, options);
275 | options.byIndex = i;
276 | stylesInDOM.splice(i, 0, {
277 | identifier: identifier,
278 | updater: updater,
279 | references: 1
280 | });
281 | }
282 |
283 | identifiers.push(identifier);
284 | }
285 |
286 | return identifiers;
287 | }
288 |
289 | function addElementStyle(obj, options) {
290 | var api = options.domAPI(options);
291 | api.update(obj);
292 |
293 | var updater = function updater(newObj) {
294 | if (newObj) {
295 | if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) {
296 | return;
297 | }
298 |
299 | api.update(obj = newObj);
300 | } else {
301 | api.remove();
302 | }
303 | };
304 |
305 | return updater;
306 | }
307 |
308 | module.exports = function (list, options) {
309 | options = options || {};
310 | list = list || [];
311 | var lastIdentifiers = modulesToDom(list, options);
312 | return function update(newList) {
313 | newList = newList || [];
314 |
315 | for (var i = 0; i < lastIdentifiers.length; i++) {
316 | var identifier = lastIdentifiers[i];
317 | var index = getIndexByIdentifier(identifier);
318 | stylesInDOM[index].references--;
319 | }
320 |
321 | var newLastIdentifiers = modulesToDom(newList, options);
322 |
323 | for (var _i = 0; _i < lastIdentifiers.length; _i++) {
324 | var _identifier = lastIdentifiers[_i];
325 |
326 | var _index = getIndexByIdentifier(_identifier);
327 |
328 | if (stylesInDOM[_index].references === 0) {
329 | stylesInDOM[_index].updater();
330 |
331 | stylesInDOM.splice(_index, 1);
332 | }
333 | }
334 |
335 | lastIdentifiers = newLastIdentifiers;
336 | };
337 | };
338 |
339 | /***/ }),
340 |
341 | /***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js":
342 | /*!********************************************************************!*\
343 | !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***!
344 | \********************************************************************/
345 | /***/ ((module) => {
346 |
347 |
348 |
349 | var memo = {};
350 | /* istanbul ignore next */
351 |
352 | function getTarget(target) {
353 | if (typeof memo[target] === "undefined") {
354 | var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself
355 |
356 | if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
357 | try {
358 | // This will throw an exception if access to iframe is blocked
359 | // due to cross-origin restrictions
360 | styleTarget = styleTarget.contentDocument.head;
361 | } catch (e) {
362 | // istanbul ignore next
363 | styleTarget = null;
364 | }
365 | }
366 |
367 | memo[target] = styleTarget;
368 | }
369 |
370 | return memo[target];
371 | }
372 | /* istanbul ignore next */
373 |
374 |
375 | function insertBySelector(insert, style) {
376 | var target = getTarget(insert);
377 |
378 | if (!target) {
379 | throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
380 | }
381 |
382 | target.appendChild(style);
383 | }
384 |
385 | module.exports = insertBySelector;
386 |
387 | /***/ }),
388 |
389 | /***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js":
390 | /*!**********************************************************************!*\
391 | !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***!
392 | \**********************************************************************/
393 | /***/ ((module) => {
394 |
395 |
396 |
397 | /* istanbul ignore next */
398 | function insertStyleElement(options) {
399 | var element = document.createElement("style");
400 | options.setAttributes(element, options.attributes);
401 | options.insert(element, options.options);
402 | return element;
403 | }
404 |
405 | module.exports = insertStyleElement;
406 |
407 | /***/ }),
408 |
409 | /***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":
410 | /*!**********************************************************************************!*\
411 | !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***!
412 | \**********************************************************************************/
413 | /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
414 |
415 |
416 |
417 | /* istanbul ignore next */
418 | function setAttributesWithoutAttributes(styleElement) {
419 | var nonce = true ? __webpack_require__.nc : 0;
420 |
421 | if (nonce) {
422 | styleElement.setAttribute("nonce", nonce);
423 | }
424 | }
425 |
426 | module.exports = setAttributesWithoutAttributes;
427 |
428 | /***/ }),
429 |
430 | /***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js":
431 | /*!***************************************************************!*\
432 | !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***!
433 | \***************************************************************/
434 | /***/ ((module) => {
435 |
436 |
437 |
438 | /* istanbul ignore next */
439 | function apply(styleElement, options, obj) {
440 | var css = "";
441 |
442 | if (obj.supports) {
443 | css += "@supports (".concat(obj.supports, ") {");
444 | }
445 |
446 | if (obj.media) {
447 | css += "@media ".concat(obj.media, " {");
448 | }
449 |
450 | var needLayer = typeof obj.layer !== "undefined";
451 |
452 | if (needLayer) {
453 | css += "@layer".concat(obj.layer.length > 0 ? " ".concat(obj.layer) : "", " {");
454 | }
455 |
456 | css += obj.css;
457 |
458 | if (needLayer) {
459 | css += "}";
460 | }
461 |
462 | if (obj.media) {
463 | css += "}";
464 | }
465 |
466 | if (obj.supports) {
467 | css += "}";
468 | }
469 |
470 | var sourceMap = obj.sourceMap;
471 |
472 | if (sourceMap && typeof btoa !== "undefined") {
473 | css += "\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), " */");
474 | } // For old IE
475 |
476 | /* istanbul ignore if */
477 |
478 |
479 | options.styleTagTransform(css, styleElement, options.options);
480 | }
481 |
482 | function removeStyleElement(styleElement) {
483 | // istanbul ignore if
484 | if (styleElement.parentNode === null) {
485 | return false;
486 | }
487 |
488 | styleElement.parentNode.removeChild(styleElement);
489 | }
490 | /* istanbul ignore next */
491 |
492 |
493 | function domAPI(options) {
494 | var styleElement = options.insertStyleElement(options);
495 | return {
496 | update: function update(obj) {
497 | apply(styleElement, options, obj);
498 | },
499 | remove: function remove() {
500 | removeStyleElement(styleElement);
501 | }
502 | };
503 | }
504 |
505 | module.exports = domAPI;
506 |
507 | /***/ }),
508 |
509 | /***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js":
510 | /*!*********************************************************************!*\
511 | !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***!
512 | \*********************************************************************/
513 | /***/ ((module) => {
514 |
515 |
516 |
517 | /* istanbul ignore next */
518 | function styleTagTransform(css, styleElement) {
519 | if (styleElement.styleSheet) {
520 | styleElement.styleSheet.cssText = css;
521 | } else {
522 | while (styleElement.firstChild) {
523 | styleElement.removeChild(styleElement.firstChild);
524 | }
525 |
526 | styleElement.appendChild(document.createTextNode(css));
527 | }
528 | }
529 |
530 | module.exports = styleTagTransform;
531 |
532 | /***/ }),
533 |
534 | /***/ "./src/utils/structure.js":
535 | /*!********************************!*\
536 | !*** ./src/utils/structure.js ***!
537 | \********************************/
538 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
539 |
540 | __webpack_require__.r(__webpack_exports__);
541 | /* harmony export */ __webpack_require__.d(__webpack_exports__, {
542 | /* harmony export */ "default": () => (/* binding */ populateStorage)
543 | /* harmony export */ });
544 | /* eslint-disable no-use-before-define */
545 | const items = [];
546 | const form = document.querySelector('.form-element');
547 | const displayTask = () => {
548 | const container = document.querySelector('.list-container');
549 | form.addEventListener('submit', (event) => {
550 | event.preventDefault();
551 | const data = form.elements[0].value;
552 | const object = {
553 | description: data,
554 | completed: false,
555 | index: items.length + 1,
556 | };
557 | form.reset();
558 | items.push(object);
559 | localStorage.setItem('itemsLocal', JSON.stringify(items));
560 | render();
561 | });
562 | const clearElement = document.createElement('p');
563 | clearElement.className = 'clear';
564 | clearElement.innerText = 'Clear all completed';
565 | container.appendChild(clearElement);
566 | const clear = document.querySelector('.clear');
567 | const list = document.createElement('ul');
568 | list.className = 'ul-list';
569 | container.insertBefore(list, clear);
570 | };
571 |
572 | const removeItem = () => {
573 | const button = document.querySelectorAll('.fa-trash-alt');
574 | button.forEach((item) => {
575 | const parent = item.parentNode;
576 | const superParent = parent.parentNode;
577 | const index = Array.prototype.indexOf.call(superParent.children, parent);
578 | const listInput = parent.firstChild;
579 | item.addEventListener('click', () => {
580 | const itemsLocal = JSON.parse(localStorage.getItem('itemsLocal'));
581 | items.splice(0, items.length, ...itemsLocal);
582 | if (listInput.hasAttribute('checked')) {
583 | parent.remove();
584 | items.splice(index, 1);
585 | }
586 | for (let i = 0; i < items.length; i += 1) {
587 | items[i].index = i + 1;
588 | }
589 | localStorage.setItem('itemsLocal', JSON.stringify(items));
590 | render();
591 | });
592 | });
593 | };
594 |
595 | const clearList = () => {
596 | const getClearElement = document.querySelector('.clear');
597 | getClearElement.addEventListener('click', () => {
598 | for (let i = 0; i < items.length; i += 1) {
599 | if (items[i].completed) {
600 | items.splice(i, 1);
601 | }
602 | }
603 |
604 | for (let i = 0; i < items.length; i += 1) {
605 | items[i].index = i + 1;
606 | }
607 | localStorage.setItem('itemsLocal', JSON.stringify(items));
608 | render();
609 | });
610 | };
611 |
612 | const updateValues = () => {
613 | const itemDetails = document.querySelectorAll('.item-details');
614 | itemDetails.forEach((item) => {
615 | const parent = item.parentNode;
616 | const superParent = parent.parentNode;
617 | const index = Array.prototype.indexOf.call(superParent.children, parent);
618 | item.addEventListener('change', () => {
619 | items[index].description = item.value;
620 | localStorage.setItem('itemsLocal', JSON.stringify(items));
621 | });
622 | });
623 | };
624 |
625 | const textDecoration = (listInput) => {
626 | listInput.forEach((item) => {
627 | if (item.hasAttribute('checked')) {
628 | item.nextSibling.style.textDecoration = 'line-through';
629 | } else {
630 | item.nextSibling.style.textDecoration = 'none';
631 | }
632 | });
633 | };
634 |
635 | function populateStorage() {
636 | window.addEventListener('load', () => {
637 | render();
638 | const listInput = document.querySelectorAll('.list-input');
639 | const itemsLocal = JSON.parse(localStorage.getItem('itemsLocal'));
640 | listInput.forEach((item) => {
641 | const parent = item.parentNode;
642 | const superParent = parent.parentNode;
643 | const index = Array.prototype.indexOf.call(superParent.children, parent);
644 | const currentItem = itemsLocal[index].completed;
645 | if (currentItem) {
646 | item.setAttribute('checked', '');
647 | parent.lastChild.style.display = 'block';
648 | }
649 | });
650 | textDecoration(listInput);
651 | });
652 | }
653 |
654 | function userInteraction(listInput) {
655 | listInput.forEach((item) => {
656 | item.addEventListener('change', () => {
657 | const itemsLocal = JSON.parse(localStorage.getItem('itemsLocal'));
658 | const parent = item.parentNode;
659 | const superParent = parent.parentNode;
660 | const index = Array.prototype.indexOf.call(superParent.children, parent);
661 | const currentItem = itemsLocal[index].completed;
662 | if (currentItem) {
663 | item.removeAttribute('checked');
664 | parent.lastChild.style.display = 'none';
665 | itemsLocal[index].completed = false;
666 | } else {
667 | item.setAttribute('checked', '');
668 | parent.lastChild.style.display = 'block';
669 | itemsLocal[index].completed = true;
670 | }
671 | textDecoration(listInput);
672 | localStorage.setItem('itemsLocal', JSON.stringify(itemsLocal));
673 | items.splice(0, items.length, ...itemsLocal);
674 | });
675 | });
676 | }
677 |
678 | const render = () => {
679 | const list = document.querySelector('.ul-list');
680 | const itemsLocal = JSON.parse(localStorage.getItem('itemsLocal'));
681 | items.splice(0, items.length, ...itemsLocal);
682 | list.innerHTML = '';
683 | for (let i = 0; i < itemsLocal.length; i += 1) {
684 | const { description } = itemsLocal[i];
685 | const listItem = document.createElement('li');
686 | listItem.className = 'list-item';
687 | listItem.innerHTML = `
17 |
18 |
Today's To Do
19 |
20 |
21 |
22 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import './style.css';
2 | import populateStorage from './utils/structure.js';
3 |
4 | populateStorage();
5 |
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | /* stylesheet */
2 | @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
3 |
4 | body {
5 | font-family: "Poppins", sans-serif;
6 | }
7 |
8 | .main-container {
9 | border: 3px solid #dfe1e6;
10 | margin: 30px 20px 0 20px;
11 | box-shadow: 5px 5px #dfe1e6;
12 | }
13 |
14 | .list-head {
15 | display: flex;
16 | justify-content: space-between;
17 | margin: 0 10px;
18 | }
19 |
20 | hr {
21 | height: 1px;
22 | background-color: #dfe1e6;
23 | border: none;
24 | margin: 0;
25 | }
26 |
27 | form {
28 | display: flex;
29 | }
30 |
31 | .fa-level-down-alt {
32 | font-size: 20px;
33 | color: rgba(5, 5, 5, 0.507);
34 | }
35 |
36 | .form-input {
37 | font-style: italic;
38 | padding: 10px;
39 | border: none;
40 | width: 90%;
41 | outline: none;
42 | }
43 |
44 | .main-heading {
45 | font-weight: 100;
46 | font-size: 18px;
47 | color: rgba(0, 0, 0, 0.877);
48 | }
49 |
50 | .fa-sync-alt {
51 | margin-top: 17px;
52 | margin-right: 10px;
53 | color: rgba(5, 5, 5, 0.507);
54 | }
55 |
56 | ul {
57 | padding: 0;
58 | gap: 10px;
59 | display: flex;
60 | flex-direction: column;
61 | list-style-type: none;
62 | }
63 |
64 | .list-item {
65 | display: flex;
66 | gap: 10px;
67 | padding-left: 0;
68 | }
69 |
70 | .list-input {
71 | margin-top: 5px;
72 | transform: scale(1.3);
73 | }
74 |
75 | .item-details {
76 | margin-top: 0;
77 | width: 300px;
78 | border: none;
79 | resize: none;
80 | outline: none;
81 | }
82 |
83 | .fa-trash-alt {
84 | display: none;
85 | margin-left: 150px;
86 | color: rgba(73, 73, 73, 0.726);
87 | }
88 |
89 | .fa-square {
90 | font-size: 18px;
91 | margin-top: 18px;
92 | color: rgb(73, 73, 73);
93 | }
94 |
95 | .clear {
96 | font-size: 18px;
97 | border: none;
98 | color: rgb(87, 80, 80);
99 | background-color: #80808048;
100 | padding: 30px 0;
101 | width: 100%;
102 | cursor: pointer;
103 | }
104 |
105 | @media screen and (min-width: 772px) {
106 | .main-container {
107 | margin: 30px 30vw 0 30vw;
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/src/utils/structure.js:
--------------------------------------------------------------------------------
1 | const items = [];
2 |
3 | const textDecoration = (listInput) => {
4 | listInput.forEach((item) => {
5 | if (item.hasAttribute('checked')) {
6 | item.nextSibling.style.textDecoration = 'line-through';
7 | } else {
8 | item.nextSibling.style.textDecoration = 'none';
9 | }
10 | });
11 | };
12 |
13 | const userInteraction = (listInput) => {
14 | listInput.forEach((item) => {
15 | item.addEventListener('change', () => {
16 | const itemsLocal = JSON.parse(localStorage.getItem('itemsLocal'));
17 | const parent = item.parentNode;
18 | const superParent = parent.parentNode;
19 | const index = Array.prototype.indexOf.call(superParent.children, parent);
20 | const currentItem = itemsLocal[index].completed;
21 | if (currentItem) {
22 | item.removeAttribute('checked');
23 | parent.lastChild.style.display = 'none';
24 | itemsLocal[index].completed = false;
25 | } else {
26 | item.setAttribute('checked', '');
27 | parent.lastChild.style.display = 'block';
28 | itemsLocal[index].completed = true;
29 | }
30 | textDecoration(listInput);
31 | localStorage.setItem('itemsLocal', JSON.stringify(itemsLocal));
32 | items.splice(0, items.length, ...itemsLocal);
33 | });
34 | });
35 | };
36 |
37 | const removeItem = () => {
38 | const button = document.querySelectorAll('.fa-trash-alt');
39 | button.forEach((item) => {
40 | const parent = item.parentNode;
41 | const superParent = parent.parentNode;
42 | const index = Array.prototype.indexOf.call(superParent.children, parent);
43 | const listInput = parent.firstChild;
44 | item.addEventListener('click', () => {
45 | const itemsLocal = JSON.parse(localStorage.getItem('itemsLocal'));
46 | items.splice(0, items.length, ...itemsLocal);
47 | if (listInput.hasAttribute('checked')) {
48 | parent.remove();
49 | items.splice(index, 1);
50 | }
51 | for (let i = 0; i < items.length; i += 1) {
52 | items[i].index = i + 1;
53 | }
54 | localStorage.setItem('itemsLocal', JSON.stringify(items));
55 | });
56 | });
57 | };
58 |
59 | const clearList = () => {
60 | const itemsLocal = JSON.parse(localStorage.getItem('itemsLocal'));
61 | items.splice(0, items.length, ...itemsLocal);
62 | const list = document.querySelector('.ul-list');
63 | const getClearElement = document.querySelector('.clear');
64 | getClearElement.addEventListener('click', () => {
65 | for (let i = 0; i < items.length; i += 1) {
66 | if (items[i].completed) {
67 | items.splice(i, 1);
68 | list.childNodes[i].remove();
69 | }
70 | }
71 | for (let i = 0; i < items.length; i += 1) {
72 | items[i].index = i + 1;
73 | }
74 | localStorage.setItem('itemsLocal', JSON.stringify(items));
75 | });
76 | };
77 |
78 | const updateValues = () => {
79 | const itemDetails = document.querySelectorAll('.item-details');
80 | itemDetails.forEach((item) => {
81 | const parent = item.parentNode;
82 | const superParent = parent.parentNode;
83 | const index = Array.prototype.indexOf.call(superParent.children, parent);
84 | item.addEventListener('change', () => {
85 | items[index].description = item.value;
86 | localStorage.setItem('itemsLocal', JSON.stringify(items));
87 | });
88 | });
89 | };
90 |
91 | const render = () => {
92 | const list = document.querySelector('.ul-list');
93 | const itemsLocal = JSON.parse(localStorage.getItem('itemsLocal'));
94 | items.splice(0, items.length, ...itemsLocal);
95 | list.innerHTML = '';
96 | for (let i = 0; i < itemsLocal.length; i += 1) {
97 | const { description } = itemsLocal[i];
98 | const listItem = document.createElement('li');
99 | listItem.className = 'list-item';
100 | listItem.innerHTML = `