diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..73f31ea --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,25 @@ +{ + "env": { + "browser": true, + "es6": true, + "jest": true + }, + "parser": "babel-eslint", + "parserOptions": { + "ecmaVersion": 2018, + "sourceType": "module" + }, + "extends": ["airbnb-base"], + "rules": { + "no-shadow": "off", + "no-param-reassign": "off", + "eol-last": "off", + "import/extensions": [ 1, { + "js": "always", "json": "always" + }] + }, + "ignorePatterns": [ + "dist/", + "build/" + ] + } \ No newline at end of file diff --git a/.github/workflows/linters.yml b/.github/workflows/linters.yml new file mode 100644 index 0000000..6e37878 --- /dev/null +++ b/.github/workflows/linters.yml @@ -0,0 +1,36 @@ +name: Linters + +on: pull_request + +env: + FORCE_COLOR: 1 + +jobs: + eslint: + name: ESLint + runs-on: ubuntu-18.04 + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: "12.x" + - name: Setup ESLint + run: | + npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x + [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/javascript/.eslintrc.json + - name: ESLint Report + run: npx eslint . + stylelint: + name: Stylelint + runs-on: ubuntu-18.04 + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: "12.x" + - name: Setup Stylelint + run: | + npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x + [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/javascript/.stylelintrc.json + - name: Stylelint Report + run: npx stylelint "**/*.{css,scss}" \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ccb2c80 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules/ +package-lock.json \ No newline at end of file diff --git a/.hintrc b/.hintrc new file mode 100644 index 0000000..39cbb86 --- /dev/null +++ b/.hintrc @@ -0,0 +1,18 @@ +{ + "connector": { + "name": "local", + "options": { + "pattern": ["**", "!.git/**", "!node_modules/**"] + } + }, + "extends": ["development"], + "formatters": ["stylish"], + "hints": [ + "button-type", + "disown-opener", + "html-checker", + "meta-charset-utf-8", + "meta-viewport", + "no-inline-styles:error" + ] + } \ No newline at end of file diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..54cf906 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,10 @@ +{ + "extends": ["stylelint-config-standard"], + "plugins": ["stylelint-scss", "stylelint-csstree-validator"], + "rules": { + "at-rule-no-unknown": null, + "scss/at-rule-no-unknown": true, + "csstree/validator": true + }, + "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] + } \ No newline at end of file diff --git a/MIT.md b/MIT.md new file mode 100644 index 0000000..97f904b --- /dev/null +++ b/MIT.md @@ -0,0 +1,10 @@ +## Copyright 2021, [YOUR NAME] + +###### Please delete this line and the next one +###### APP TYPE can be a webpage/website, a web app, a software and so on + +Permission is hereby granted, free of charge, to any person obtaining a copy of this [APP TYPE] and associated documentation files, to deal in the [APP TYPE] without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the [APP TYPE], and to permit persons to whom the [APP TYPE] is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the [APP TYPE]. + +THE [APP TYPE] IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE [APP TYPE] OR THE USE OR OTHER DEALINGS IN THE [APP TYPE]. diff --git a/README.md b/README.md index eb492c4..bcd0dc2 100644 --- a/README.md +++ b/README.md @@ -1 +1,58 @@ -# code-review-practice \ No newline at end of file +![](https://img.shields.io/badge/Microverse-blueviolet) + +# To-D0 List + +> "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. + +![screenshot](./app_screenshot.png) + + +## Built With + +- Webpack +- JavaScript (ES6) +- CSS +- HTML + +## Live Demo + + +## Getting Started + +To get a local copy up and running follow these simple steps. + +### Prerequisites + +some knowledge on `npm` webpack and ES6 + +### Setup + +- Clone repository +- run `npm start` +### Install + +- Node modules +- HtmlWebpackPlugin `npm install --save-dev html-webpack-plugin` +- Load CSS `npm install --save-dev style-loader css-loader` +- Setup local dev server `npm install --save-dev webpack-dev-server` + + + +## Author 👤 + +- GitHub: [@cwaku](https://github.com/cwaku) +- LinkedIn: [Ricky Mormor](www.linkedin.com/in/ricky-mormor) +- Instagram: [@rickymormor](https://instagram.com/rickymormor) + +## 🤝 Contributing + +Contributions, issues, and feature requests are welcome! + +Feel free to check the [issues page](https://github.com/cwaku/to-do-list/issues). + +## Show your support + +Give a ⭐️ if you like this project! +## 📝 License + +This project is [MIT](./MIT.md) licensed. diff --git a/app_screenshot.png b/app_screenshot.png new file mode 100644 index 0000000..3b58bcb Binary files /dev/null and b/app_screenshot.png differ diff --git a/dist/index.bundle.js b/dist/index.bundle.js new file mode 100644 index 0000000..b142496 --- /dev/null +++ b/dist/index.bundle.js @@ -0,0 +1,2 @@ +(()=>{"use strict";var n={426:(n,e,t)=>{t.d(e,{Z:()=>c});var o=t(537),r=t.n(o),a=t(645),i=t.n(a)()(r());i.push([n.id,"body {\n background-color: #fff;\n}\n\n.container {\n margin: 10% 25% 0 25%;\n padding: 20px 0 0 0;\n box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.75);\n -webkit-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.75);\n -moz-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.75);\n}\n\n.contain {\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid #c9bebeab;\n padding-bottom: 5px;\n}\n\n.iconed,\n.sub-icon {\n padding-right: 10px;\n cursor: pointer;\n}\n\n.sub-icon:hover {\n font-size: 20px;\n color: aqua;\n}\n\n.heading {\n display: flex;\n justify-content: space-between;\n padding-bottom: 20px;\n border-bottom: 1px solid #c9bebeab;\n}\n\n.input {\n width: 100%;\n}\n\np {\n outline: none;\n width: 100%;\n}\n\n.contain-icons {\n display: flex;\n}\n\n.text {\n border: 0;\n text-transform: inherit;\n font-style: italic;\n padding: 16px 10px;\n padding-bottom: 16px;\n width: 100%;\n outline: none;\n}\n\n.list {\n padding: 0;\n}\n\nul li {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 2%;\n border-bottom: 1px solid #c9bebeab;\n}\n\n.strike {\n text-decoration: line-through;\n color: #746d6d;\n}\n\n.task {\n display: flex;\n align-items: center;\n width: 100%;\n}\n\n.list button {\n border: 0;\n background-color: #fff;\n margin: 16px;\n font-size: 16px;\n color: #746d6d;\n}\n\n.icon-d {\n padding-right: 5px;\n}\n\n.icon-d:hover {\n color: red;\n font-size: 20px;\n}\n\n.icons {\n color: #746d6d;\n}\n\n.icons:hover {\n cursor: move;\n color: #000;\n font-size: 20px;\n}\n\n.clear-all {\n border: none;\n background-color: #fff;\n width: 100%;\n font-size: 15px;\n margin-bottom: 10px;\n}\n\n.save {\n border: none;\n background-color: #548b3b85;\n padding: 15px;\n font-size: 16px;\n width: 100%;\n}\n\n.save:hover {\n background-color: #548b3be6;\n}\n","",{version:3,sources:["webpack://./src/style.css"],names:[],mappings:"AAAA;EACE,sBAAsB;AACxB;;AAEA;EACE,qBAAqB;EACrB,mBAAmB;EACnB,6CAA6C;EAC7C,qDAAqD;EACrD,kDAAkD;AACpD;;AAEA;EACE,aAAa;EACb,8BAA8B;EAC9B,kCAAkC;EAClC,mBAAmB;AACrB;;AAEA;;EAEE,mBAAmB;EACnB,eAAe;AACjB;;AAEA;EACE,eAAe;EACf,WAAW;AACb;;AAEA;EACE,aAAa;EACb,8BAA8B;EAC9B,oBAAoB;EACpB,kCAAkC;AACpC;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,aAAa;EACb,WAAW;AACb;;AAEA;EACE,aAAa;AACf;;AAEA;EACE,SAAS;EACT,uBAAuB;EACvB,kBAAkB;EAClB,kBAAkB;EAClB,oBAAoB;EACpB,WAAW;EACX,aAAa;AACf;;AAEA;EACE,UAAU;AACZ;;AAEA;EACE,aAAa;EACb,8BAA8B;EAC9B,mBAAmB;EACnB,WAAW;EACX,kCAAkC;AACpC;;AAEA;EACE,6BAA6B;EAC7B,cAAc;AAChB;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,WAAW;AACb;;AAEA;EACE,SAAS;EACT,sBAAsB;EACtB,YAAY;EACZ,eAAe;EACf,cAAc;AAChB;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,UAAU;EACV,eAAe;AACjB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,YAAY;EACZ,WAAW;EACX,eAAe;AACjB;;AAEA;EACE,YAAY;EACZ,sBAAsB;EACtB,WAAW;EACX,eAAe;EACf,mBAAmB;AACrB;;AAEA;EACE,YAAY;EACZ,2BAA2B;EAC3B,aAAa;EACb,eAAe;EACf,WAAW;AACb;;AAEA;EACE,2BAA2B;AAC7B",sourcesContent:["body {\n background-color: #fff;\n}\n\n.container {\n margin: 10% 25% 0 25%;\n padding: 20px 0 0 0;\n box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.75);\n -webkit-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.75);\n -moz-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.75);\n}\n\n.contain {\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid #c9bebeab;\n padding-bottom: 5px;\n}\n\n.iconed,\n.sub-icon {\n padding-right: 10px;\n cursor: pointer;\n}\n\n.sub-icon:hover {\n font-size: 20px;\n color: aqua;\n}\n\n.heading {\n display: flex;\n justify-content: space-between;\n padding-bottom: 20px;\n border-bottom: 1px solid #c9bebeab;\n}\n\n.input {\n width: 100%;\n}\n\np {\n outline: none;\n width: 100%;\n}\n\n.contain-icons {\n display: flex;\n}\n\n.text {\n border: 0;\n text-transform: inherit;\n font-style: italic;\n padding: 16px 10px;\n padding-bottom: 16px;\n width: 100%;\n outline: none;\n}\n\n.list {\n padding: 0;\n}\n\nul li {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 2%;\n border-bottom: 1px solid #c9bebeab;\n}\n\n.strike {\n text-decoration: line-through;\n color: #746d6d;\n}\n\n.task {\n display: flex;\n align-items: center;\n width: 100%;\n}\n\n.list button {\n border: 0;\n background-color: #fff;\n margin: 16px;\n font-size: 16px;\n color: #746d6d;\n}\n\n.icon-d {\n padding-right: 5px;\n}\n\n.icon-d:hover {\n color: red;\n font-size: 20px;\n}\n\n.icons {\n color: #746d6d;\n}\n\n.icons:hover {\n cursor: move;\n color: #000;\n font-size: 20px;\n}\n\n.clear-all {\n border: none;\n background-color: #fff;\n width: 100%;\n font-size: 15px;\n margin-bottom: 10px;\n}\n\n.save {\n border: none;\n background-color: #548b3b85;\n padding: 15px;\n font-size: 16px;\n width: 100%;\n}\n\n.save:hover {\n background-color: #548b3be6;\n}\n"],sourceRoot:""}]);const c=i},645:n=>{n.exports=function(n){var e=[];return e.toString=function(){return this.map((function(e){var t="",o=void 0!==e[5];return e[4]&&(t+="@supports (".concat(e[4],") {")),e[2]&&(t+="@media ".concat(e[2]," {")),o&&(t+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),t+=n(e),o&&(t+="}"),e[2]&&(t+="}"),e[4]&&(t+="}"),t})).join("")},e.i=function(n,t,o,r,a){"string"==typeof n&&(n=[[null,n,void 0]]);var i={};if(o)for(var c=0;c0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=a),t&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=t):d[2]=t),r&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=r):d[4]="".concat(r)),e.push(d))}},e}},537:n=>{n.exports=function(n){var e=n[1],t=n[3];if(!t)return e;if("function"==typeof btoa){var o=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),r="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(o),a="/*# ".concat(r," */"),i=t.sources.map((function(n){return"/*# sourceURL=".concat(t.sourceRoot||"").concat(n," */")}));return[e].concat(i).concat([a]).join("\n")}return[e].join("\n")}},379:n=>{var e=[];function t(n){for(var t=-1,o=0;o{var e={};n.exports=function(n,t){var o=function(n){if(void 0===e[n]){var t=document.querySelector(n);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(n){t=null}e[n]=t}return e[n]}(n);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(t)}},216:n=>{n.exports=function(n){var e=document.createElement("style");return n.setAttributes(e,n.attributes),n.insert(e,n.options),e}},565:(n,e,t)=>{n.exports=function(n){var e=t.nc;e&&n.setAttribute("nonce",e)}},795:n=>{n.exports=function(n){var e=n.insertStyleElement(n);return{update:function(t){!function(n,e,t){var o="";t.supports&&(o+="@supports (".concat(t.supports,") {")),t.media&&(o+="@media ".concat(t.media," {"));var r=void 0!==t.layer;r&&(o+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),o+=t.css,r&&(o+="}"),t.media&&(o+="}"),t.supports&&(o+="}");var a=t.sourceMap;a&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(o,n,e.options)}(e,n,t)},remove:function(){!function(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n)}(e)}}}},589:n=>{n.exports=function(n,e){if(e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}}},e={};function t(o){var r=e[o];if(void 0!==r)return r.exports;var a=e[o]={id:o,exports:{}};return n[o](a,a.exports,t),a.exports}t.n=n=>{var e=n&&n.__esModule?()=>n.default:()=>n;return t.d(e,{a:e}),e},t.d=(n,e)=>{for(var o in e)t.o(e,o)&&!t.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:e[o]})},t.o=(n,e)=>Object.prototype.hasOwnProperty.call(n,e);var o={};(()=>{t.d(o,{j:()=>E});class n{constructor(n,e,t){this.description=n,this.completed=e,this.index=t}listCode(){return`

  • ${this.description}

    \n
    `}static addTo(n){E.push(n),localStorage.setItem("ToDo",JSON.stringify(E))}static remove(n){E=E.filter((e=>e.index!==Number(n)));for(let n=0;n',C.append(g),x.append(C);const h=document.createElement("div");h.className="contain";const v=document.createElement("div");v.className="input";const y=document.createElement("input");y.placeholder="Add to your list...",y.type="text",y.className="text";const B=document.createElement("div");B.innerHTML='',h.append(v),h.append(B),v.append(y),x.append(h);const k=document.createElement("button");k.type="button",k.className="clear-all",k.textContent="Clear all completed",document.body.insertAdjacentElement("afterbegin",x);const w=document.createElement("button");w.className="save",w.textContent="Save edits";const S=document.querySelector(".list");function T(){const e=E.map((e=>new n(e.description,e.completed,e.index).listCode()));S.innerHTML=e.join("");document.querySelectorAll(".check-box").forEach((n=>{n.addEventListener("change",(n=>{!function(n,e){if(n){e.classList.add("strike");const n=e.getAttribute("data-id");for(let e=0;e{e.addEventListener("click",(e=>{const t=e.target.parentElement.parentElement.getAttribute("data-id");n.remove(t),T()}))}))}x.append(S),x.append(k),x.append(w),T(),document.addEventListener("DOMContentLoaded",(()=>{document.querySelector(".sub-icon").addEventListener("click",(()=>{const e=document.querySelector(".text"),t=e.value.trim();if(!t)return;let o=0;0===E.length?o=E.length+1:E.length>0&&(o=E[E.length-1].index+1);const r=new n(t,!1,o);n.addTo(r),T(),e.value=""})),document.querySelector(".clear-all").addEventListener("click",(()=>{E=E.filter((n=>!1===n.completed)),T();for(let n=0;n{for(let e=0;e{n.addEventListener("click",(()=>{e.addEventListener("click",(()=>{const e=n.innerHTML;for(let t=0;tTo Do
      \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..32c242d --- /dev/null +++ b/package.json @@ -0,0 +1,678 @@ +{ + "name": "to-do-list", + "version": "1.0.0", + "description": "![](https://img.shields.io/badge/Microverse-blueviolet)", + "private": true, + "dependencies": { + "abab": "^2.0.5", + "abbrev": "^1.1.1", + "acorn": "^8.5.0", + "acorn-globals": "^6.0.0", + "acorn-import-assertions": "^1.8.0", + "acorn-jsx": "^5.3.2", + "acorn-jsx-walk": "^2.0.0", + "acorn-walk": "^8.2.0", + "agent-base": "^6.0.2", + "agentkeepalive": "^4.1.4", + "aggregate-error": "^3.1.0", + "ajv": "^8.6.3", + "ajv-formats": "^2.1.1", + "ansi-align": "^3.0.1", + "ansi-colors": "^4.1.1", + "ansi-regex": "^5.0.1", + "ansi-styles": "^4.3.0", + "anymatch": "^3.1.2", + "append-transform": "^2.0.0", + "aproba": "^2.0.0", + "archy": "^1.0.0", + "are-we-there-yet": "^2.0.0", + "argparse": "^1.0.10", + "array-includes": "^3.1.4", + "array-union": "^2.1.0", + "array.prototype.flat": "^1.2.5", + "arrify": "^1.0.1", + "asn1": "^0.2.4", + "assert-plus": "^1.0.0", + "astral-regex": "^2.0.0", + "async": "^0.9.2", + "asynckit": "^0.4.0", + "autoprefixer": "^9.8.8", + "aws-sign2": "^0.7.0", + "aws4": "^1.11.0", + "axe-core": "^4.3.4", + "bail": "^1.0.5", + "balanced-match": "^1.0.2", + "base64-js": "^1.5.1", + "bcp47": "^1.1.2", + "bcrypt-pbkdf": "^1.0.2", + "binary-extensions": "^2.2.0", + "bl": "^4.1.0", + "boolbase": "^1.0.0", + "boxen": "^5.1.2", + "brace-expansion": "^1.1.11", + "braces": "^3.0.2", + "browser-process-hrtime": "^1.0.0", + "browserslist": "^4.17.5", + "buffer": "^5.7.1", + "buffer-crc32": "^0.2.13", + "buffer-from": "^1.1.2", + "builtins": "^1.0.3", + "cacache": "^15.3.0", + "cacheable-lookup": "^5.0.4", + "cacheable-request": "^7.0.2", + "caching-transform": "^4.0.0", + "call-bind": "^1.0.2", + "callsites": "^3.1.0", + "camelcase": "^5.3.1", + "camelcase-keys": "^6.2.2", + "caniuse-lite": "^1.0.30001271", + "canvas": "^2.8.0", + "caseless": "^0.12.0", + "chalk": "^4.1.2", + "character-entities": "^1.2.4", + "character-entities-legacy": "^1.1.4", + "character-reference-invalid": "^1.1.4", + "chokidar": "^3.5.2", + "chownr": "^2.0.0", + "chrome-trace-event": "^1.0.3", + "ci-info": "^3.2.0", + "clean-stack": "^2.2.0", + "cli-boxes": "^2.2.1", + "cli-cursor": "^3.1.0", + "cli-spinners": "^2.6.1", + "cliui": "^6.0.0", + "clone": "^1.0.4", + "clone-deep": "^4.0.1", + "clone-regexp": "^2.2.0", + "clone-response": "^1.0.2", + "cloudinary": "^1.27.1", + "cloudinary-core": "^2.12.0", + "color-convert": "^2.0.1", + "color-name": "^1.1.4", + "color-string": "^1.6.0", + "color-support": "^1.1.3", + "colorette": "^2.0.16", + "combined-stream": "^1.0.8", + "commander": "^2.20.3", + "commondir": "^1.0.1", + "concat-map": "^0.0.1", + "configstore": "^5.0.1", + "confusing-browser-globals": "^1.0.10", + "console-control-strings": "^1.1.0", + "content-type": "^1.0.4", + "convert-source-map": "^1.8.0", + "core-js": "^3.6.5", + "core-util-is": "^1.0.2", + "cosmiconfig": "^7.0.1", + "cross-spawn": "^7.0.3", + "crypto-random-string": "^2.0.0", + "css-select": "^4.1.3", + "css-tree": "^1.1.3", + "css-what": "^5.1.0", + "cssesc": "^3.0.0", + "cssom": "^0.4.4", + "cssstyle": "^2.3.0", + "dashdash": "^1.14.1", + "data-urls": "^2.0.0", + "debug": "^4.3.2", + "decamelize": "^1.2.0", + "decamelize-keys": "^1.1.0", + "decimal.js": "^10.3.1", + "decompress-response": "^6.0.0", + "deep-extend": "^0.6.0", + "deep-is": "^0.1.4", + "default-require-extensions": "^3.0.0", + "defaults": "^1.0.3", + "defer-to-connect": "^2.0.1", + "define-properties": "^1.1.3", + "delayed-stream": "^1.0.0", + "delegates": "^1.0.0", + "depd": "^1.1.2", + "detect-libc": "^1.0.3", + "devtools-protocol": "^0.0.901419", + "dir-glob": "^3.0.1", + "doctrine": "^3.0.0", + "dom-serializer": "^1.3.2", + "domelementtype": "^2.2.0", + "domexception": "^2.0.1", + "domhandler": "^4.2.2", + "domutils": "^2.8.0", + "dot-prop": "^5.3.0", + "duplexer3": "^0.1.4", + "ecc-jsbn": "^0.1.2", + "ejs": "^3.1.6", + "electron-to-chromium": "^1.3.880", + "emoji-regex": "^8.0.0", + "encoding": "^0.1.13", + "end-of-stream": "^1.4.4", + "enhanced-resolve": "^5.8.3", + "enquirer": "^2.3.6", + "entities": "^2.2.0", + "envinfo": "^7.8.1", + "err-code": "^2.0.3", + "error-ex": "^1.3.2", + "es-abstract": "^1.19.1", + "es-module-lexer": "^0.9.3", + "es-to-primitive": "^1.2.1", + "es6-error": "^4.1.1", + "escalade": "^3.1.1", + "escape-goat": "^2.1.1", + "escape-string-regexp": "^1.0.5", + "escodegen": "^2.0.0", + "eslint-import-resolver-node": "^0.3.6", + "eslint-module-utils": "^2.7.1", + "eslint-scope": "^5.1.1", + "eslint-utils": "^2.1.0", + "eslint-visitor-keys": "^2.1.0", + "espree": "^7.3.1", + "esprima": "^4.0.1", + "esquery": "^1.4.0", + "esrecurse": "^4.3.0", + "estraverse": "^5.3.0", + "esutils": "^2.0.3", + "eventemitter2": "^6.4.5", + "events": "^3.3.0", + "execa": "^4.1.0", + "execall": "^2.0.0", + "extend": "^3.0.2", + "extract-zip": "^2.0.1", + "extsprintf": "^1.3.0", + "fast-deep-equal": "^3.1.3", + "fast-glob": "^3.2.7", + "fast-json-stable-stringify": "^2.1.0", + "fast-levenshtein": "^2.0.6", + "fast-xml-parser": "^3.21.0", + "fastest-levenshtein": "^1.0.12", + "fastq": "^1.13.0", + "fd-slicer": "^1.1.0", + "file-entry-cache": "^6.0.1", + "file-type": "^16.5.3", + "filelist": "^1.0.2", + "fill-range": "^7.0.1", + "find-cache-dir": "^3.3.2", + "find-up": "^4.1.0", + "flat-cache": "^3.0.4", + "flatted": "^3.2.2", + "foreground-child": "^2.0.0", + "forever-agent": "^0.6.1", + "form-data": "^3.0.1", + "fromentries": "^1.3.2", + "fs-constants": "^1.0.0", + "fs-extra": "^10.0.0", + "fs-minipass": "^2.1.0", + "fs.realpath": "^1.0.0", + "function-bind": "^1.1.1", + "functional-red-black-tree": "^1.0.1", + "gauge": "^3.0.1", + "gensync": "^1.0.0-beta.2", + "get-caller-file": "^2.0.5", + "get-intrinsic": "^1.1.1", + "get-package-type": "^0.1.0", + "get-stdin": "^8.0.0", + "get-stream": "^5.2.0", + "get-symbol-description": "^1.0.0", + "getpass": "^0.1.7", + "gh-pages": "^3.2.3", + "glob": "^7.2.0", + "glob-parent": "^5.1.2", + "glob-to-regexp": "^0.4.1", + "global-dirs": "^3.0.0", + "global-modules": "^2.0.0", + "global-prefix": "^3.0.0", + "globals": "^11.12.0", + "globby": "^11.0.4", + "globjoin": "^0.1.4", + "gonzales-pe": "^4.3.0", + "got": "^11.8.2", + "graceful-fs": "^4.2.8", + "har-schema": "^2.0.0", + "har-validator": "^5.1.5", + "hard-rejection": "^2.1.0", + "has": "^1.0.3", + "has-bigints": "^1.0.1", + "has-flag": "^4.0.0", + "has-symbols": "^1.0.2", + "has-tostringtag": "^1.0.0", + "has-unicode": "^2.0.1", + "has-yarn": "^2.1.0", + "hasha": "^5.2.2", + "hosted-git-info": "^4.0.2", + "html-encoding-sniffer": "^2.0.1", + "html-escaper": "^2.0.2", + "html-tags": "^3.1.0", + "htmlparser2": "^3.10.1", + "http-cache-semantics": "^4.1.0", + "http-proxy-agent": "^4.0.1", + "http-signature": "^1.2.0", + "http2-wrapper": "^1.0.3", + "https-proxy-agent": "^5.0.0", + "human-signals": "^1.1.1", + "humanize-ms": "^1.2.1", + "iconv-lite": "^0.6.3", + "ieee754": "^1.2.1", + "ignore": "^5.1.8", + "image-size": "^1.0.0", + "import-fresh": "^3.3.0", + "import-lazy": "^2.1.0", + "import-local": "^3.0.3", + "imurmurhash": "^0.1.4", + "indent-string": "^4.0.0", + "infer-owner": "^1.0.4", + "inflight": "^1.0.6", + "inherits": "^2.0.4", + "ini": "^2.0.0", + "internal-slot": "^1.0.3", + "interpret": "^2.2.0", + "invert-kv": "^3.0.1", + "ip": "^1.1.5", + "is-alphabetical": "^1.0.4", + "is-alphanumerical": "^1.0.4", + "is-arrayish": "^0.3.2", + "is-bigint": "^1.0.4", + "is-binary-path": "^2.1.0", + "is-boolean-object": "^1.1.2", + "is-buffer": "^2.0.5", + "is-callable": "^1.2.4", + "is-ci": "^3.0.1", + "is-core-module": "^2.8.0", + "is-date-object": "^1.0.5", + "is-decimal": "^1.0.4", + "is-docker": "^2.2.1", + "is-extglob": "^2.1.1", + "is-fullwidth-code-point": "^2.0.0", + "is-glob": "^4.0.3", + "is-hexadecimal": "^1.0.4", + "is-installed-globally": "^0.4.0", + "is-interactive": "^1.0.0", + "is-lambda": "^1.0.1", + "is-negative-zero": "^2.0.1", + "is-npm": "^5.0.0", + "is-number": "^7.0.0", + "is-number-object": "^1.0.6", + "is-obj": "^2.0.0", + "is-path-inside": "^3.0.3", + "is-plain-obj": "^1.1.0", + "is-plain-object": "^2.0.4", + "is-potential-custom-element-name": "^1.0.1", + "is-regex": "^1.1.4", + "is-regexp": "^2.1.0", + "is-shared-array-buffer": "^1.0.1", + "is-stream": "^2.0.1", + "is-string": "^1.0.7", + "is-svg": "^4.3.1", + "is-symbol": "^1.0.4", + "is-typedarray": "^1.0.0", + "is-unicode-supported": "^0.1.0", + "is-weakref": "^1.0.1", + "is-windows": "^1.0.2", + "is-wsl": "^2.2.0", + "is-yarn-global": "^0.3.0", + "isexe": "^2.0.0", + "isobject": "^3.0.1", + "isstream": "^0.1.2", + "istanbul-lib-coverage": "^3.2.0", + "istanbul-lib-hook": "^3.0.0", + "istanbul-lib-instrument": "^4.0.3", + "istanbul-lib-processinfo": "^2.0.2", + "istanbul-lib-report": "^3.0.0", + "istanbul-lib-source-maps": "^4.0.1", + "istanbul-reports": "^3.0.5", + "jake": "^10.8.2", + "jest-worker": "^27.3.1", + "js-library-detector": "^6.4.0", + "js-tokens": "^4.0.0", + "js-yaml": "^3.14.1", + "jsbn": "^0.1.1", + "jsdom": "^16.7.0", + "jsesc": "^2.5.2", + "json-buffer": "^3.0.1", + "json-parse-better-errors": "^1.0.2", + "json-parse-even-better-errors": "^2.3.1", + "json-schema": "^0.2.3", + "json-schema-traverse": "^1.0.0", + "json-stable-stringify-without-jsonify": "^1.0.1", + "json-stringify-safe": "^5.0.1", + "json5": "^2.2.0", + "jsonc-parser": "^3.0.0", + "jsonfile": "^6.1.0", + "jsonparse": "^1.3.1", + "jsprim": "^1.4.1", + "keyv": "^4.0.3", + "kind-of": "^6.0.3", + "known-css-properties": "^0.21.0", + "latest-version": "^5.1.0", + "lcid": "^3.1.1", + "levn": "^0.4.1", + "lines-and-columns": "^1.1.6", + "loader-runner": "^4.2.0", + "locate-path": "^5.0.0", + "lockfile": "^1.0.4", + "lodash": "^4.17.21", + "lodash.clonedeep": "^4.5.0", + "lodash.flattendeep": "^4.4.0", + "lodash.merge": "^4.6.2", + "lodash.truncate": "^4.4.2", + "log-symbols": "^4.1.0", + "longest-streak": "^2.0.4", + "lowercase-keys": "^2.0.0", + "lru-cache": "^6.0.0", + "make-dir": "^3.1.0", + "make-fetch-happen": "^9.1.0", + "map-age-cleaner": "^0.1.3", + "map-obj": "^4.3.0", + "mathml-tag-names": "^2.1.3", + "mdast-util-from-markdown": "^0.8.5", + "mdast-util-to-markdown": "^0.6.5", + "mdast-util-to-string": "^2.0.0", + "mdn-data": "^2.0.22", + "mem": "^5.1.1", + "meow": "^9.0.0", + "merge-stream": "^2.0.0", + "merge2": "^1.4.1", + "metaviewport-parser": "^0.2.0", + "micromark": "^2.11.4", + "micromatch": "^4.0.4", + "mime-db": "^1.50.0", + "mime-types": "^2.1.33", + "mimic-fn": "^2.1.0", + "mimic-response": "^1.0.1", + "min-indent": "^1.0.1", + "minimatch": "^3.0.4", + "minimist": "^1.2.5", + "minimist-options": "^4.1.0", + "minipass": "^3.1.5", + "minipass-collect": "^1.0.2", + "minipass-fetch": "^1.4.1", + "minipass-flush": "^1.0.5", + "minipass-json-stream": "^1.0.1", + "minipass-pipeline": "^1.2.4", + "minipass-sized": "^1.0.3", + "minizlib": "^2.1.2", + "mkdirp": "^1.0.4", + "ms": "^2.1.2", + "mutationobserver-shim": "^0.3.7", + "nan": "^2.15.0", + "nanoid": "^3.1.30", + "natural-compare": "^1.4.0", + "negotiator": "^0.6.2", + "neo-async": "^2.6.2", + "node-fetch": "^2.6.5", + "node-preload": "^0.2.1", + "node-releases": "^2.0.1", + "nopt": "^5.0.0", + "normalize-package-data": "^3.0.3", + "normalize-path": "^3.0.0", + "normalize-range": "^0.1.2", + "normalize-selector": "^0.2.0", + "normalize-url": "^6.1.0", + "npm-package-arg": "^8.1.5", + "npm-registry-fetch": "^11.0.0", + "npm-run-path": "^4.0.1", + "npmlog": "^5.0.1", + "nth-check": "^2.0.1", + "num2fraction": "^1.2.2", + "nwsapi": "^2.2.0", + "nyc": "^15.1.0", + "oauth-sign": "^0.9.0", + "object-assign": "^4.1.1", + "object-inspect": "^1.11.0", + "object-keys": "^1.1.1", + "object.assign": "^4.1.2", + "object.entries": "^1.1.5", + "object.values": "^1.1.5", + "once": "^1.4.0", + "onetime": "^5.1.2", + "optionator": "^0.9.1", + "ora": "^5.4.1", + "os-locale": "^5.0.0", + "p-cancelable": "^2.1.1", + "p-defer": "^1.0.0", + "p-is-promise": "^2.1.0", + "p-limit": "^2.3.0", + "p-locate": "^4.1.0", + "p-map": "^4.0.0", + "p-try": "^2.2.0", + "package-hash": "^4.0.0", + "package-json": "^6.5.0", + "parent-module": "^1.0.1", + "parse-entities": "^2.0.0", + "parse-json": "^5.2.0", + "parse5": "^6.0.1", + "parse5-htmlparser2-tree-adapter": "^6.0.1", + "path-exists": "^4.0.0", + "path-is-absolute": "^1.0.1", + "path-key": "^3.1.1", + "path-parse": "^1.0.7", + "path-type": "^4.0.0", + "peek-readable": "^4.0.1", + "pend": "^1.2.0", + "performance-now": "^2.1.0", + "picocolors": "^1.0.0", + "picomatch": "^2.3.0", + "pkg-dir": "^4.2.0", + "postcss": "^8.3.11", + "postcss-html": "^0.36.0", + "postcss-less": "^5.0.0", + "postcss-media-query-parser": "^0.2.3", + "postcss-resolve-nested-selector": "^0.1.1", + "postcss-safe-parser": "^6.0.0", + "postcss-sass": "^0.5.0", + "postcss-scss": "^4.0.1", + "postcss-selector-parser": "^6.0.6", + "postcss-syntax": "^0.36.2", + "postcss-value-parser": "^4.1.0", + "prelude-ls": "^1.2.1", + "prepend-http": "^2.0.0", + "process-on-spawn": "^1.0.0", + "progress": "^2.0.1", + "promise-inflight": "^1.0.1", + "promise-retry": "^2.0.1", + "proxy-from-env": "^1.1.0", + "psl": "^1.8.0", + "pump": "^3.0.0", + "punycode": "^2.1.1", + "pupa": "^2.1.1", + "puppeteer-core": "^10.4.0", + "q": "^1.5.1", + "qs": "^6.5.2", + "queue": "^6.0.2", + "queue-microtask": "^1.2.3", + "quick-lru": "^5.1.1", + "randombytes": "^2.1.0", + "rc": "^1.2.8", + "read-pkg": "^5.2.0", + "read-pkg-up": "^7.0.1", + "readable-stream": "^3.6.0", + "readable-web-to-node-stream": "^3.0.2", + "readdirp": "^3.6.0", + "rechoir": "^0.7.1", + "redent": "^3.0.0", + "regexpp": "^3.2.0", + "registry-auth-token": "^4.2.1", + "registry-url": "^5.1.0", + "release-zalgo": "^1.0.0", + "remark": "^13.0.0", + "remark-parse": "^9.0.0", + "remark-stringify": "^9.0.1", + "repeat-string": "^1.6.1", + "request": "^2.88.2", + "require-directory": "^2.1.1", + "require-from-string": "^2.0.2", + "require-main-filename": "^2.0.0", + "resolve": "^1.20.0", + "resolve-alpn": "^1.2.1", + "resolve-cwd": "^3.0.0", + "resolve-from": "^5.0.0", + "responselike": "^2.0.0", + "restore-cursor": "^3.1.0", + "retry": "^0.12.0", + "reusify": "^1.0.4", + "rimraf": "^3.0.2", + "run-parallel": "^1.2.0", + "safe-buffer": "^5.1.2", + "safer-buffer": "^2.1.2", + "saxes": "^5.0.1", + "schema-utils": "^3.1.1", + "semver": "^7.3.5", + "semver-diff": "^3.1.1", + "serialize-javascript": "^6.0.0", + "set-blocking": "^2.0.0", + "setimmediate": "^1.0.5", + "shallow-clone": "^3.0.1", + "shebang-command": "^2.0.0", + "shebang-regex": "^3.0.0", + "side-channel": "^1.0.4", + "signal-exit": "^3.0.5", + "simple-concat": "^1.0.1", + "simple-get": "^3.1.0", + "simple-swizzle": "^0.2.2", + "slash": "^3.0.0", + "slice-ansi": "^4.0.0", + "smart-buffer": "^4.2.0", + "socks": "^2.6.1", + "socks-proxy-agent": "^6.1.0", + "source-map": "^0.6.1", + "source-map-js": "^0.6.2", + "source-map-support": "^0.5.20", + "spawn-wrap": "^2.0.0", + "spdx-correct": "^3.1.1", + "spdx-exceptions": "^2.3.0", + "spdx-expression-parse": "^3.0.1", + "spdx-license-ids": "^3.0.10", + "specificity": "^0.4.1", + "sprintf-js": "^1.0.3", + "sshpk": "^1.16.1", + "ssri": "^8.0.1", + "string_decoder": "^1.3.0", + "string-width": "^2.1.1", + "string.prototype.trimend": "^1.0.4", + "string.prototype.trimstart": "^1.0.4", + "strip-ansi": "^6.0.1", + "strip-bom": "^4.0.0", + "strip-final-newline": "^2.0.0", + "strip-indent": "^3.0.0", + "strip-json-comments": "^3.1.1", + "strnum": "^1.0.4", + "strtok3": "^6.2.4", + "style-search": "^0.1.0", + "stylelint-config-recommended": "^4.0.0", + "sugarss": "^2.0.0", + "supports-color": "^7.2.0", + "svg-tags": "^1.0.0", + "symbol-tree": "^3.2.4", + "table": "^6.7.2", + "tapable": "^2.2.1", + "tar": "^6.1.11", + "tar-fs": "^2.0.0", + "tar-stream": "^2.2.0", + "terser": "^5.9.0", + "terser-webpack-plugin": "^5.2.4", + "test-exclude": "^6.0.0", + "text-table": "^0.2.0", + "through": "^2.3.8", + "to-fast-properties": "^2.0.0", + "to-readable-stream": "^1.0.0", + "to-regex-range": "^5.0.1", + "token-types": "^4.1.1", + "tough-cookie": "^4.0.0", + "tr46": "^2.1.0", + "trim-newlines": "^3.0.1", + "trough": "^1.0.5", + "tsconfig-paths": "^3.11.0", + "tslib": "^1.14.1", + "tsutils": "^3.21.0", + "tunnel-agent": "^0.6.0", + "tweetnacl": "^0.14.5", + "type-check": "^0.4.0", + "type-fest": "^0.8.1", + "typedarray-to-buffer": "^3.1.5", + "typescript": "^4.4.4", + "unbox-primitive": "^1.0.1", + "unbzip2-stream": "^1.3.3", + "unified": "^9.2.2", + "unique-filename": "^1.1.1", + "unique-slug": "^2.0.2", + "unique-string": "^2.0.0", + "unist-util-find-all-after": "^3.0.2", + "unist-util-is": "^4.1.0", + "unist-util-stringify-position": "^2.0.3", + "universalify": "^2.0.0", + "update-notifier": "^5.1.0", + "uri-js": "^4.4.1", + "url-parse-lax": "^3.0.0", + "util-deprecate": "^1.0.2", + "uuid": "^3.4.0", + "v8-compile-cache": "^2.3.0", + "validate-npm-package-license": "^3.0.4", + "validate-npm-package-name": "^3.0.0", + "verror": "^1.10.0", + "vfile": "^4.2.1", + "vfile-message": "^2.0.4", + "w3c-hr-time": "^1.0.2", + "w3c-xmlserializer": "^2.0.0", + "watchpack": "^2.2.0", + "wcwidth": "^1.0.1", + "webidl-conversions": "^6.1.0", + "webpack-merge": "^5.8.0", + "webpack-sources": "^3.2.1", + "whatwg-encoding": "^1.0.5", + "whatwg-mimetype": "^2.3.0", + "whatwg-url": "^8.7.0", + "which": "^2.0.2", + "which-boxed-primitive": "^1.0.2", + "which-module": "^2.0.0", + "wide-align": "^1.1.5", + "widest-line": "^3.1.0", + "wildcard": "^2.0.0", + "word-wrap": "^1.2.3", + "wrap-ansi": "^7.0.0", + "wrappy": "^1.0.2", + "write-file-atomic": "^3.0.3", + "ws": "^7.5.5", + "xdg-basedir": "^4.0.0", + "xml-name-validator": "^3.0.0", + "xmlchars": "^2.2.0", + "y18n": "^4.0.3", + "yallist": "^4.0.0", + "yaml": "^1.10.2", + "yargs": "^15.4.1", + "yargs-parser": "^18.1.3", + "yauzl": "^2.10.0", + "yocto-queue": "^0.1.0", + "zwitch": "^1.0.5" + }, + "devDependencies": { + "babel-eslint": "^10.1.0", + "css-loader": "^6.5.0", + "eslint": "^7.32.0", + "eslint-config-airbnb-base": "^14.2.1", + "eslint-plugin-import": "^2.25.2", + "hint": "^6.1.6", + "html-webpack-plugin": "^5.5.0", + "style-loader": "^3.3.1", + "stylelint": "^13.13.1", + "stylelint-config-standard": "^21.0.0", + "stylelint-csstree-validator": "^1.9.0", + "stylelint-scss": "^3.21.0", + "webpack": "^5.60.0", + "webpack-cli": "^4.9.1", + "webpack-dev-server": "^4.4.0" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start": "webpack serve --open", + "deploy": "gh-pages -d dist", + "build": "webpack" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/cwaku/to-do-list.git" + }, + "keywords": [], + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/cwaku/to-do-list/issues" + }, + "homepage": "https://github.com/cwaku/to-do-list#readme" +} diff --git a/src/addRemove.js b/src/addRemove.js new file mode 100644 index 0000000..0e0576f --- /dev/null +++ b/src/addRemove.js @@ -0,0 +1,30 @@ +/* eslint-disable */ +import { toDoList } from './index.js'; + +export class ToDoClass { + constructor(description, completed, index) { + this.description = description; + this.completed = completed; + this.index = index; + } + + /* eslint-enable */ + + listCode() { + return `

    • ${this.description}

      +
      `; + } + + static addTo(newList) { + toDoList.push(newList); + localStorage.setItem('ToDo', JSON.stringify(toDoList)); + } + + static remove(oldList) { + toDoList = toDoList.filter((x) => x.index !== Number(oldList)); + for (let i = 0; i < toDoList.length; i += 1) { + toDoList[i].index = i + 1; + } + localStorage.setItem('ToDo', JSON.stringify(toDoList)); + } +} diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..2ae759b --- /dev/null +++ b/src/index.html @@ -0,0 +1,15 @@ + + + + + + To Do + + + +
        + + diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..c3d1062 --- /dev/null +++ b/src/index.js @@ -0,0 +1,139 @@ +/* eslint-disable */ +import { checkBox } from './status.js'; +import { ToDoClass } from './addRemove.js'; +import './style.css'; + +export let toDoList = JSON.parse(localStorage.getItem('ToDo')) || []; +/* eslint-enable */ + +const div = document.createElement('div'); +div.className = 'container'; + +const heading = document.createElement('p'); +heading.className = 'heading'; +heading.textContent = 'Today\'s To Do'; +const span = document.createElement('span'); +span.innerHTML = ''; +heading.append(span); +div.append(heading); + +const contain = document.createElement('div'); +contain.className = 'contain'; +const me = document.createElement('div'); +me.className = 'input'; +const input = document.createElement('input'); +input.placeholder = 'Add to your list...'; +input.type = 'text'; +input.className = 'text'; +const span1 = document.createElement('div'); +span1.innerHTML = ''; +contain.append(me); +contain.append(span1); +me.append(input); +div.append(contain); + +const clearBtn = document.createElement('button'); +clearBtn.type = 'button'; +clearBtn.className = 'clear-all'; +clearBtn.textContent = 'Clear all completed'; +document.body.insertAdjacentElement('afterbegin', div); + +const save = document.createElement('button'); +save.className = 'save'; +save.textContent = 'Save edits'; + +const list = document.querySelector('.list'); +div.append(list); +div.append(clearBtn); +div.append(save); + +export function showList() { + const listsCode = toDoList.map((newList) => new ToDoClass( + newList.description, + newList.completed, + newList.index, + ).listCode()); + + list.innerHTML = listsCode.join(''); + + const checkbox = document.querySelectorAll('.check-box'); + checkBox(checkbox); + + const btn = document.querySelectorAll('.icon-d'); + btn.forEach((el) => { + el.addEventListener('click', (e) => { + const oldList = e.target.parentElement.parentElement.getAttribute('data-id'); // get parent + ToDoClass.remove(oldList); + showList(); + }); + }); +} + +showList(); + +document.addEventListener('DOMContentLoaded', () => { + const submitBtn = document.querySelector('.sub-icon'); + submitBtn.addEventListener('click', () => { + const desInput = document.querySelector('.text'); + const description = desInput.value.trim(); + if (!description) { + return; + } + + let id = 0; + if (toDoList.length === 0) { + id = toDoList.length + 1; + } else if (toDoList.length > 0) { + id = toDoList[toDoList.length - 1].index + 1; + } + + const index = id; + + const completed = false; + const newList = new ToDoClass(description, completed, index); + ToDoClass.addTo(newList); + showList(); + desInput.value = ''; + }); + + const clearCompleted = document.querySelector('.clear-all'); + clearCompleted.addEventListener('click', () => { + toDoList = toDoList.filter((x) => x.completed === false); + showList(); + for (let i = 0; i < toDoList.length; i += 1) { + toDoList[i].index = i + 1; + } + localStorage.setItem('ToDo', JSON.stringify(toDoList)); + }); + + const isComplete = document.querySelectorAll('.check-box'); + isComplete.forEach((el) => { + for (let i = 0; i < toDoList.length; i += 1) { + if (toDoList[i].completed === true) { + const compId = el.parentElement.getAttribute('id'); + if (Number(compId) === toDoList[i].index) { + el.parentElement.classList.add('strike'); + el.checked = true; + } + } + } + }); + + // Get edited task and update to localStorage + const saveBtn = document.querySelector('.save'); + const paragraphs = document.querySelectorAll('.edit'); + paragraphs.forEach((el) => { + el.addEventListener('click', () => { + saveBtn.addEventListener('click', () => { + const newInput = el.innerHTML; + for (let i = 0; i < toDoList.length; i += 1) { + const parentId = el.parentElement.getAttribute('data-id'); + if (Number(parentId - 1) === toDoList[i].index) { + toDoList[i].description = newInput; + localStorage.setItem('ToDo', JSON.stringify(toDoList)); + } + } + }); + }); + }); +}); \ No newline at end of file diff --git a/src/status.js b/src/status.js new file mode 100644 index 0000000..8aca9f3 --- /dev/null +++ b/src/status.js @@ -0,0 +1,40 @@ +/* eslint-disable */ +import { toDoList } from './index.js'; +/* eslint-enable */ + +export function completed(state, description) { + if (state) { + description.classList.add('strike'); + const index = description.getAttribute('data-id'); + for (let i = 0; i < toDoList.length; i += 1) { + toDoList[i].index = i + 1; + if (Number(index - 1) === toDoList[i].index) { + toDoList[i].completed = true; + localStorage.setItem('ToDo', JSON.stringify(toDoList)); + } + } + } else { + description.classList.remove('strike'); + const index = description.getAttribute('data-id'); + for (let i = 0; i < toDoList.length; i += 1) { + if (Number(index - 1) === toDoList[i].index) { + toDoList[i].completed = false; + localStorage.setItem('ToDo', JSON.stringify(toDoList)); + } + } + } +} + +export const checkBox = (arr) => { + arr.forEach((el) => { + el.addEventListener('change', (e) => { + const state = e.target.checked; + const description = e.target.parentElement; + if (state === true) { + completed(state, description); + } else { + completed(state, description); + } + }); + }); +}; diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..27b67ed --- /dev/null +++ b/src/style.css @@ -0,0 +1,129 @@ +body { + background-color: #fff; +} + +.container { + margin: 10% 25% 0 25%; + padding: 20px 0 0 0; + box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.75); + -webkit-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.75); + -moz-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.75); +} + +.contain { + display: flex; + justify-content: space-between; + border-bottom: 1px solid #c9bebeab; + padding-bottom: 5px; +} + +.iconed, +.sub-icon { + padding-right: 10px; + cursor: pointer; +} + +.sub-icon:hover { + font-size: 20px; + color: aqua; +} + +.heading { + display: flex; + justify-content: space-between; + padding-bottom: 20px; + border-bottom: 1px solid #c9bebeab; +} + +.input { + width: 100%; +} + +p { + outline: none; + width: 100%; +} + +.contain-icons { + display: flex; +} + +.text { + border: 0; + text-transform: inherit; + font-style: italic; + padding: 16px 10px; + padding-bottom: 16px; + width: 100%; + outline: none; +} + +.list { + padding: 0; +} + +ul li { + display: flex; + justify-content: space-between; + align-items: center; + padding: 2%; + border-bottom: 1px solid #c9bebeab; +} + +.strike { + text-decoration: line-through; + color: #746d6d; +} + +.task { + display: flex; + align-items: center; + width: 100%; +} + +.list button { + border: 0; + background-color: #fff; + margin: 16px; + font-size: 16px; + color: #746d6d; +} + +.icon-d { + padding-right: 5px; +} + +.icon-d:hover { + color: red; + font-size: 20px; +} + +.icons { + color: #746d6d; +} + +.icons:hover { + cursor: move; + color: #000; + font-size: 20px; +} + +.clear-all { + border: none; + background-color: #fff; + width: 100%; + font-size: 15px; + margin-bottom: 10px; +} + +.save { + border: none; + background-color: #548b3b85; + padding: 15px; + font-size: 16px; + width: 100%; +} + +.save:hover { + background-color: #548b3be6; +} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..26fc001 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,32 @@ +const path = require('path'); +/* eslint-disable */ +const HtmlWebpackPlugin = require('html-webpack-plugin'); +/* eslint-enable */ + +module.exports = { + entry: { + index: './src/index.js', + }, + devServer: { + static: './dist', + }, + devtool: 'inline-source-map', + plugins: [ + new HtmlWebpackPlugin({ + template: './src/index.html', + }), + ], + output: { + filename: '[name].bundle.js', + path: path.resolve(__dirname, 'dist'), + clean: true, + }, + module: { + rules: [ + { + test: /\.css$/i, + use: ['style-loader', 'css-loader'], + }, + ], + }, +};