diff --git a/.gitignore b/.gitignore index 4ad6760..a5a9300 100644 --- a/.gitignore +++ b/.gitignore @@ -80,7 +80,6 @@ typings/ # Nuxt.js build / generate output .nuxt -dist # Gatsby files .cache/ diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..cf2fb87 --- /dev/null +++ b/dist/index.html @@ -0,0 +1 @@ +MyDayApp - JS

My Day

All my tasks in one place

    \ No newline at end of file diff --git a/dist/main.bundle.js b/dist/main.bundle.js new file mode 100644 index 0000000..5748c16 --- /dev/null +++ b/dist/main.bundle.js @@ -0,0 +1 @@ +(()=>{"use strict";var n={945:(n,e,t)=>{t.d(e,{Z:()=>g});var o=t(81),i=t.n(o),r=t(645),l=t.n(r),a=t(667),d=t.n(a),s=new URL(t(808),t.b),c=new URL(t(36),t.b),p=l()(i()),u=d()(s),f=d()(c);p.push([n.id,'html,\nbody {\n margin: 0;\n padding: 0;\n}\n\nbutton {\n margin: 0;\n padding: 0;\n border: 0;\n background: none;\n font-size: 100%;\n vertical-align: baseline;\n font-family: inherit;\n font-weight: inherit;\n color: inherit;\n -webkit-appearance: none;\n appearance: none;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\nbody {\n font-family: "Roboto", sans-serif;\n background: #f5f5f5;\n color: #111111;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-weight: 300;\n}\n\n.container {\n min-width: 230px;\n max-width: 550px;\n margin: 0 auto;\n}\n\n.header {\n background-image: linear-gradient(\n 224deg,\n hsl(240deg 100% 50%) 2%,\n hsl(249deg 100% 59%) 63%,\n hsl(252deg 99% 64%) 78%,\n hsl(253deg 98% 68%) 87%,\n hsl(254deg 96% 73%) 92%,\n hsl(253deg 93% 77%) 96%,\n hsl(251deg 89% 81%) 98%,\n hsl(246deg 81% 85%) 99%,\n hsl(232deg 68% 88%) 100%,\n hsl(200deg 53% 90%) 100%\n );\n padding-bottom: 4rem;\n}\n\n.hidden {\n display: none;\n}\n\n.todoapp-wrapper {\n position: relative;\n top: -40px;\n background: #fff;\n border-radius: 8px;\n box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n.todoapp input::-webkit-input-placeholder {\n font-style: italic;\n font-weight: 400;\n color: rgba(0, 0, 0, 0.4);\n}\n\n.todoapp input::-moz-placeholder {\n font-style: italic;\n font-weight: 400;\n color: rgba(0, 0, 0, 0.4);\n}\n\n.todoapp input::input-placeholder {\n font-style: italic;\n font-weight: 400;\n color: rgba(0, 0, 0, 0.4);\n}\n\n.header h1 {\n width: 100%;\n font-size: 3rem;\n font-weight: 200;\n color: white;\n padding-top: 2rem;\n margin: 0;\n}\n\n.header h1 + p {\n margin: 0;\n color: white;\n padding-bottom: 1.2rem;\n}\n\n.new-todo,\n.edit {\n position: relative;\n margin: 0;\n width: 100%;\n font-size: 24px;\n font-family: inherit;\n font-weight: inherit;\n line-height: 1.4em;\n color: inherit;\n padding: 6px;\n border: 1px solid #999;\n box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);\n box-sizing: border-box;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.new-todo {\n padding: 2rem;\n height: 65px;\n border: none;\n background: white;\n box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);\n border-radius: 8px;\n}\n\n.main {\n position: relative;\n z-index: 2;\n border-top: 1px solid #e6e6e6;\n}\n\n.toggle-all {\n width: 1px;\n height: 1px;\n border: none;\n /* Mobile Safari */\n opacity: 0;\n position: absolute;\n right: 100%;\n bottom: 100%;\n}\n\n.toggle-all + label {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 45px;\n height: 65px;\n font-size: 0;\n position: absolute;\n top: -65px;\n left: -0;\n}\n\n.toggle-all + label:before {\n content: "❯";\n display: inline-block;\n font-size: 22px;\n color: #949494;\n padding: 10px 27px 10px 27px;\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg);\n}\n\n.toggle-all:checked + label:before {\n color: #484848;\n}\n\n.todo-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.todo-list li {\n position: relative;\n font-size: 24px;\n border-bottom: 1px solid #ededed;\n padding: 0rem 1rem;\n}\n\n.todo-list li:last-child {\n border-bottom: none;\n}\n\n.todo-list li.editing {\n border-bottom: none;\n padding: 0;\n}\n\n.todo-list li.editing .edit {\n display: block;\n width: calc(100% - 4rem);\n padding: 12px 16px;\n margin: 0 0 0 4rem;\n}\n\n.todo-list li.editing .view {\n display: none;\n}\n\n.todo-list li .toggle {\n text-align: center;\n width: 40px;\n /* auto, since non-WebKit browsers doesn\'t support input styling */\n height: auto;\n position: absolute;\n top: 0;\n bottom: 0;\n margin: auto 0;\n border: none;\n /* Mobile Safari */\n -webkit-appearance: none;\n appearance: none;\n}\n\n.todo-list li .toggle {\n opacity: 0;\n}\n\n.todo-list li .toggle + label {\n /*\n\t\tFirefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433\n\t\tIE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/\n\t*/\n background-image: url('+u+");\n background-repeat: no-repeat;\n background-position: center left;\n}\n\n.todo-list li .toggle:checked + label {\n background-image: url("+f+');\n}\n\n.todo-list li label {\n word-break: break-all;\n padding: 15px 15px 15px 60px;\n display: block;\n line-height: 1.2;\n transition: color 0.4s;\n font-weight: 400;\n color: #484848;\n}\n\n.todo-list li.completed label {\n color: #949494;\n text-decoration: line-through;\n}\n\n.todo-list li .destroy {\n display: none;\n position: absolute;\n top: 0;\n right: 10px;\n bottom: 0;\n width: 40px;\n height: 40px;\n margin: auto 0;\n font-size: 30px;\n color: #949494;\n transition: color 0.2s ease-out;\n}\n\n.todo-list li .destroy:hover,\n.todo-list li .destroy:focus {\n color: #c18585;\n}\n\n.todo-list li .destroy:after {\n content: "×";\n display: block;\n height: 100%;\n line-height: 1.1;\n}\n\n.todo-list li:hover .destroy {\n display: block;\n}\n\n.todo-list li .edit {\n display: none;\n}\n\n.todo-list li.editing:last-child {\n margin-bottom: -1px;\n}\n\n.footer {\n padding: 1rem 1.5rem;\n height: 20px;\n text-align: center;\n font-size: 15px;\n border-top: 1px solid #e6e6e6;\n}\n\n.todo-count {\n float: left;\n text-align: left;\n}\n\n.todo-count strong {\n font-weight: 300;\n}\n\n.filters {\n margin: 0;\n padding: 0;\n list-style: none;\n position: absolute;\n right: 0;\n left: 0;\n}\n\n.filters li {\n display: inline;\n}\n\n.filters li a {\n color: inherit;\n margin: 3px;\n padding: 3px 7px;\n text-decoration: none;\n border: 1px solid transparent;\n border-radius: 3px;\n}\n\n.filters li a:hover {\n border-color: #6e49fe;\n}\n\n.filters li a.selected {\n border-color: #4c33b1;\n}\n\n.clear-completed,\nhtml .clear-completed:active {\n float: right;\n position: relative;\n line-height: 19px;\n text-decoration: none;\n cursor: pointer;\n}\n\n.clear-completed:hover {\n text-decoration: underline;\n}\n\n.info {\n margin: 65px auto 0;\n color: #4d4d4d;\n font-size: 11px;\n text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);\n text-align: center;\n}\n\n.info p {\n line-height: 1;\n}\n\n.info a {\n color: inherit;\n text-decoration: none;\n font-weight: 400;\n}\n\n.info a:hover {\n text-decoration: underline;\n}\n\n/*\n\tHack to remove background from Mobile Safari.\n\tCan\'t use it globally since it destroys checkboxes in Firefox\n*/\n@media screen and (-webkit-min-device-pixel-ratio: 0) {\n .toggle-all,\n .todo-list li .toggle {\n background: none;\n }\n\n .todo-list li .toggle {\n height: 40px;\n }\n}\n\n@media (max-width: 430px) {\n .footer {\n height: 50px;\n }\n\n .filters {\n bottom: 10px;\n }\n}\n\n:focus {\n outline: 0;\n}\n',""]);const g=p},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,i,r){"string"==typeof n&&(n=[[null,n,void 0]]);var l={};if(o)for(var a=0;a0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=r),t&&(c[2]?(c[1]="@media ".concat(c[2]," {").concat(c[1],"}"),c[2]=t):c[2]=t),i&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=i):c[4]="".concat(i)),e.push(c))}},e}},667:n=>{n.exports=function(n,e){return e||(e={}),n?(n=String(n.__esModule?n.default:n),/^['"].*['"]$/.test(n)&&(n=n.slice(1,-1)),e.hash&&(n+=e.hash),/["'() \t\n]|(%20)/.test(n)||e.needQuotes?'"'.concat(n.replace(/"/g,'\\"').replace(/\n/g,"\\n"),'"'):n):n}},81:n=>{n.exports=function(n){return n[1]}},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 i=void 0!==t.layer;i&&(o+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),o+=t.css,i&&(o+="}"),t.media&&(o+="}"),t.supports&&(o+="}");var r=t.sourceMap;r&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),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))}}},36:n=>{n.exports="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E"},808:n=>{n.exports="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E"}},e={};function t(o){var i=e[o];if(void 0!==i)return i.exports;var r=e[o]={id:o,exports:{}};return n[o](r,r.exports,t),r.exports}t.m=n,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),t.b=document.baseURI||self.location.href,t.nc=void 0,(()=>{var n=t(379),e=t.n(n),o=t(795),i=t.n(o),r=t(569),l=t.n(r),a=t(565),d=t.n(a),s=t(216),c=t.n(s),p=t(589),u=t.n(p),f=t(945),g={};function h(n){return function(n){if(Array.isArray(n))return m(n)}(n)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(n)||function(n,e){if(n){if("string"==typeof n)return m(n,e);var t=Object.prototype.toString.call(n).slice(8,-1);return"Object"===t&&n.constructor&&(t=n.constructor.name),"Map"===t||"Set"===t?Array.from(n):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?m(n,e):void 0}}(n)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function m(n,e){(null==e||e>n.length)&&(e=n.length);for(var t=0,o=new Array(e);t".concat(t.length-1," items left"),z(e)):(n.parentElement.parentElement.classList.remove("completed"),w.innerHTML="".concat(t.length+1," items left"),o.completed=!1,z(e))}function M(n){n.parentElement.parentElement.classList.add("editing"),n.parentElement.nextSibling.focus()}function D(n){var e=n.target.previousSibling.childNodes[1].textContent,t=n.target.value.trim(),o=I(),i=o.find((function(n){return n.title===e}));"Enter"===n.key&&""!==n.target.value&&(n.target.previousSibling.childNodes[1].textContent=t,i.title=n.target.value.trim(),i.id=n.target.value,z(o),n.target.parentElement.classList.remove("editing")),"Escape"===n.key&&n.target.parentElement.classList.remove("editing")}function T(n,e){var t=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o=document.createElement("li");o.id=e;var i=document.createElement("div");i.classList.add("view");var r=document.createElement("input");r.type="checkbox",r.classList.add("toggle"),r.onclick=function(n){L(n.target)},t&&(o.classList.add("completed"),r.checked=!0);var l=document.createElement("label");l.innerText=n.trim(),l.ondblclick=function(n){M(n.target)};var a=document.createElement("button");a.classList.add("destroy"),a.onclick=function(n){A(n.target)};var d=document.createElement("input");if(d.classList.add("edit"),d.value=n,d.onkeydown=function(n){D(n)},i.appendChild(r),i.appendChild(l),i.appendChild(a),o.appendChild(i),o.appendChild(d),""!=n)return o}function A(n){var e=I(),t=e.filter((function(n){return!0===n.completed})),o=e.findIndex((function(e){return e.id===n.parentElement.parentElement.id}));e.splice(o,1),z(e),b.innerHTML="",e.forEach((function(n){var t=T(n.title,n.title);b.appendChild(t),w.innerHTML="".concat(e.length," items left")})),0==e.length&&(y.style.display="none",x.style.display="none",localStorage.clear()),0==t.length&&(k.style.display="none")}function z(n){localStorage.setItem("mydayapp-js",JSON.stringify(h(n)))}function I(){return JSON.parse(localStorage.getItem("mydayapp-js"))}setInterval((function(){C=null===I()?[]:I()}),1),E.forEach((function(n){n.addEventListener("click",(function(n){S(),n.target.classList.add("selected"),"Pending"==n.target.textContent&&(C=I().filter((function(n){return!n.completed})),b.innerHTML="",C.forEach((function(n){b.appendChild(T(n.title,n.id,n.completed))}))),"Completed"==n.target.textContent&&(C=I().filter((function(n){return n.completed})),b.innerHTML="",C.forEach((function(n){b.appendChild(T(n.title,n.id,n.completed))}))),"All"==n.target.textContent&&(C=I(),b.innerHTML="",C.forEach((function(n){b.appendChild(T(n.title,n.id,n.completed))})))}))})),"none"!=x.style.display&&(k.style.display="block"),0!==localStorage.length&&0!==I().length||(y.style.display="none",x.style.display="none"),window.onload=function(){var n=I();if(n&&0!==n.length){n.forEach((function(n){var e=T(n.title,n.id,n.completed);b.appendChild(e)}));var e=n.filter((function(n){return!n.completed})),t=n.filter((function(n){return!0===n.completed}));w.innerHTML="".concat(e.length," items left"),0===t.length&&(k.style.display="none")}else y.style.display="none",x.style.display="none",k.style.display="none"},v.addEventListener("keydown",(function(n){if("Enter"===n.key){var e=v.value.trim(),t=e.trim();if(""!==e){if(!function(n,e){if(n.find((function(n){return n.title===e})))return!0}(C,e)){var o=T(t,e);b.appendChild(o),function(n,e){C.push({title:n,id:e,completed:!1})}(t,t),y.style.display="block",x.style.display="block",k.style.display="block",v.value=""}z(C),w.innerHTML="".concat(C.length," items left")}}})),k.onclick=function(){!function(){k.style.display="none";var n=I(),e=n.filter((function(n){return!1===n.completed})),t=n.filter((function(n){return!0===n.completed}));localStorage.setItem("mydayapp-js",JSON.stringify(h(e))),b.innerHTML="",e.forEach((function(n){var e=T(n.title,n.title);b.appendChild(e)})),0==t.length&&(k.style.display="none"),0==e.length&&(y.style.display="none",x.style.display="none")}(),S(),E[0].classList.add("selected")}})()})(); \ No newline at end of file diff --git a/src/index.html b/src/index.html index c38e045..d951cdc 100644 --- a/src/index.html +++ b/src/index.html @@ -32,30 +32,6 @@

    My Day

      -
    • -
      - - - -
      - -
      • -
    • -
      - - - -
      - -
      • -
    • -
      - - - -
      - -
    diff --git a/src/index.js b/src/index.js index eba52c1..c2e060d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,258 @@ import "./css/base.css"; -import { sayHello } from "./js/utils"; +const footer = document.querySelector("footer"); +const list = document.querySelector(".todo-list"); +const main = document.querySelector(".main"); +const input = document.querySelector(".new-todo"); +const count = document.querySelector(".todo-count"); +const clearAll = document.querySelector(".clear-completed"); +const tabs = Array.from(document.querySelectorAll("a")); -console.log(sayHello("Hello")); +let todos = []; +setInterval(() => { + if (getTodosFromLocalStorage() === null) { + todos = []; + } else { + todos = getTodosFromLocalStorage(); + } +}, 1); + +tabs.forEach((tab) => { + tab.addEventListener("click", (e) => { + removeClass(); + e.target.classList.add("selected"); + if (e.target.textContent == "Pending") { + todos = getTodosFromLocalStorage().filter((todo) => !todo.completed); + list.innerHTML = ""; + todos.forEach((todo) => { + list.appendChild(createTodo(todo.title, todo.id, todo.completed)); + }); + } + if (e.target.textContent == "Completed") { + todos = getTodosFromLocalStorage().filter((todo) => todo.completed); + list.innerHTML = ""; + todos.forEach((todo) => { + list.appendChild(createTodo(todo.title, todo.id, todo.completed)); + }); + } + if (e.target.textContent == "All") { + todos = getTodosFromLocalStorage(); + list.innerHTML = ""; + todos.forEach((todo) => { + list.appendChild(createTodo(todo.title, todo.id, todo.completed)); + }); + } + }); +}); + +function removeClass() { + tabs.forEach((tab) => { + tab.classList.remove("selected"); + }); +} + +if (main.style.display != "none") { + clearAll.style.display = "block"; +} + +if (localStorage.length === 0 || getTodosFromLocalStorage().length === 0) { + footer.style.display = "none"; + main.style.display = "none"; +} + +window.onload = () => { + const todos = getTodosFromLocalStorage(); + if (!todos || todos.length === 0) { + footer.style.display = "none"; + main.style.display = "none"; + clearAll.style.display = "none"; + } else { + todos.forEach((todo) => { + const newtodo = createTodo(todo.title, todo.id, todo.completed); + list.appendChild(newtodo); + }); + const uncompleted = todos.filter((todo) => !todo.completed); + const completed = todos.filter((todo) => todo.completed === true); + count.innerHTML = `${uncompleted.length} items left`; + if (completed.length === 0) { + clearAll.style.display = "none"; + } + } +}; + +input.addEventListener("keydown", (e) => { + if (e.key === "Enter") { + const title = input.value.trim(); + const trimmedTitle = title.trim(); + if (title !== "") { + if (!preventDuplicate(todos, title)) { + const newtodo = createTodo(trimmedTitle, title); + list.appendChild(newtodo); + addTodoToStorage(trimmedTitle, trimmedTitle); + footer.style.display = "block"; + main.style.display = "block"; + clearAll.style.display = "block"; + input.value = ""; + } + updateLocalStorage(todos); + count.innerHTML = `${todos.length} items left`; + } + } +}); + +function checked(input) { + clearAll.style.display = "block"; + const todos = getTodosFromLocalStorage(); + const uncompleted = todos.filter((todo) => todo.completed === false); + const completed = todos.find( + (todo) => todo.title === input.parentElement.childNodes[1].textContent + ); + if (input.checked) { + input.parentElement.parentElement.classList.add("completed"); + completed.completed = true; + count.innerHTML = `${uncompleted.length - 1} items left`; + updateLocalStorage(todos); + } else { + input.parentElement.parentElement.classList.remove("completed"); + count.innerHTML = `${uncompleted.length + 1} items left`; + completed.completed = false; + updateLocalStorage(todos); + } +} + +function edit(label) { + label.parentElement.parentElement.classList.add("editing"); + label.parentElement.nextSibling.focus(); +} + +function editFinished(input) { + const initialValue = input.target.previousSibling.childNodes[1].textContent; + const text = input.target.value.trim(); + const todos = getTodosFromLocalStorage(); + const editing = todos.find((todo) => todo.title === initialValue); + if (input.key === "Enter") { + if (input.target.value !== "") { + input.target.previousSibling.childNodes[1].textContent = text; + editing.title = input.target.value.trim(); + editing.id = input.target.value; + updateLocalStorage(todos); + input.target.parentElement.classList.remove("editing"); + } + } + if (input.key === "Escape") { + input.target.parentElement.classList.remove("editing"); + } +} + +function createTodo(title, id, completed = false) { + let todo = document.createElement("li"); + todo.id = id; + let div = document.createElement("div"); + div.classList.add("view"); + let mark = document.createElement("input"); + mark.type = "checkbox"; + mark.classList.add("toggle"); + mark.onclick = (e) => { + checked(e.target); + }; + if (completed) { + todo.classList.add("completed"); + mark.checked = true; + } + let label = document.createElement("label"); + label.innerText = title.trim(); + label.ondblclick = (e) => { + edit(e.target); + }; + let destroy = document.createElement("button"); + destroy.classList.add("destroy"); + destroy.onclick = (e) => { + destroyTodo(e.target); + }; + let hiddenInput = document.createElement("input"); + hiddenInput.classList.add("edit"); + hiddenInput.value = title; + hiddenInput.onkeydown = (e) => { + editFinished(e); + }; + div.appendChild(mark); + div.appendChild(label); + div.appendChild(destroy); + todo.appendChild(div); + todo.appendChild(hiddenInput); + if (title != "") { + return todo; + } +} + +function preventDuplicate(actual, newItem) { + if (actual.find((item) => item.title === newItem)) { + return true; + } +} + +function destroyTodo(button) { + const todos = getTodosFromLocalStorage(); + let completed = todos.filter((todo) => todo.completed === true); + const index = todos.findIndex( + (todo) => todo.id === button.parentElement.parentElement.id + ); + todos.splice(index, 1); + updateLocalStorage(todos); + list.innerHTML = ""; + todos.forEach((todo) => { + const newtodo = createTodo(todo.title, todo.title); + list.appendChild(newtodo); + count.innerHTML = `${todos.length} items left`; + }); + if (todos.length == 0) { + footer.style.display = "none"; + main.style.display = "none"; + localStorage.clear(); + } + if (completed.length == 0) { + clearAll.style.display = "none"; + } +} + +function destroyAll() { + clearAll.style.display = "none"; + let todos = getTodosFromLocalStorage(); + let uncompleted = todos.filter((todo) => todo.completed === false); + let completed = todos.filter((todo) => todo.completed === true); + localStorage.setItem("mydayapp-js", JSON.stringify([...uncompleted])); + list.innerHTML = ""; + uncompleted.forEach((todo) => { + const newTodo = createTodo(todo.title, todo.title); + list.appendChild(newTodo); + }); + if (completed.length == 0) { + clearAll.style.display = "none"; + } + if (uncompleted.length == 0) { + footer.style.display = "none"; + main.style.display = "none"; + } +} + +clearAll.onclick = () => { + destroyAll(); + removeClass(); + tabs[0].classList.add("selected"); +}; + +function updateLocalStorage(todos) { + localStorage.setItem("mydayapp-js", JSON.stringify([...todos])); +} + +function getTodosFromLocalStorage() { + return JSON.parse(localStorage.getItem("mydayapp-js")); +} + +function addTodoToStorage(title, id) { + todos.push({ + title: title, + id: id, + completed: false, + }); +} diff --git a/src/js/utils.js b/src/js/utils.js deleted file mode 100644 index a985c08..0000000 --- a/src/js/utils.js +++ /dev/null @@ -1,3 +0,0 @@ -export const sayHello = (text) => { - return text; -};