diff --git a/IVAN-MARAKHOVSKII/index.html b/IVAN-MARAKHOVSKII/index.html new file mode 100644 index 0000000..4f3f126 --- /dev/null +++ b/IVAN-MARAKHOVSKII/index.html @@ -0,0 +1,53 @@ + + + + + + + + Document + + + + + + +
+
+
+
+ + + + +
+
+ + + + + + + + +
+
+ +
+
+
+ + + + + + + + \ No newline at end of file diff --git a/IVAN-MARAKHOVSKII/scripts/createElement.js b/IVAN-MARAKHOVSKII/scripts/createElement.js new file mode 100644 index 0000000..e69de29 diff --git a/IVAN-MARAKHOVSKII/scripts/main.js b/IVAN-MARAKHOVSKII/scripts/main.js new file mode 100644 index 0000000..6dc8c90 --- /dev/null +++ b/IVAN-MARAKHOVSKII/scripts/main.js @@ -0,0 +1,120 @@ + +var data = JSON.parse(localStorage.getItem("data")) || []; +render("all"); + +function validate(date) { + date = date.split("-"); + if (date.length !== 3 || + date[0].length !== 4 || + date[1].length !== 2 || + date[2].length !== 2 || + isNaN(parseInt(date[0])) || + isNaN(parseInt(date[1])) || + isNaN(parseInt(date[2])) ) { + return false; + } + return true; +} +function render(filter) { + var itemList = document.getElementById("itemList"); + while (itemList.firstChild) { + itemList.removeChild(itemList.firstChild); + } + data.forEach(function(el, idx) { + if (filter == "done") { + if (el.check) { + createElement(el, idx); + } + } + if (filter == "undone") { + if (!el.check) { + createElement(el, idx); + } + } + if (filter == "all") { + createElement(el, idx); + } + if (filter == "tmr" || filter == "week") { + var now = new Date(); + var dlDate = Date.parse(el.deadLine); + var delta = dlDate - +now; + var dayTimeDelta = 86400000; + var weekTimeDelta = 604800000; + if (filter == "tmr" && delta <= dayTimeDelta) { + createElement(el, idx); + } + if (filter == "week" && delta <= weekTimeDelta) { + createElement(el, idx); + } + } + }); +} + +function addItem() { + var text = document.getElementById("input").value; + var deadLine = document.getElementById("deadline").value; + if (!validate(deadLine)){ + alert("You should write data in YYYY-MM-DD format") + return + } + if (!text) { + alert("You need to write something!"); + return; + } + data.push({ text: text, check: false, deadLine: deadLine }); + localStorage.setItem("data", JSON.stringify(data)); + document.getElementById("input").value = ""; + document.getElementById("deadline").value = ""; + render("all"); +} +function createElement(el, idx) { + var text = el.text; + var divForItem = document.createElement("div"); + if (el.check) { + divForItem.className = "item checked"; + } else { + divForItem.className = "item"; + } + var pNode = document.createElement("p"); + var textNode = document.createTextNode(text); + pNode.appendChild(textNode); + divForItem.appendChild(pNode); + + if (el.deadLine) { + var dl = document.createElement("p"); + dl.className = "ml-2"; + var dlToNode = document.createTextNode(el.deadLine); + dl.appendChild(dlToNode); + divForItem.appendChild(dl); + } + + var span = document.createElement("SPAN"); + var txt = document.createTextNode("\u00D7"); + span.appendChild(txt); + span.className = "close"; + divForItem.appendChild(span); + + span.addEventListener("click", function(e) { + e.stopPropagation(); + itemList.removeChild(divForItem); + data.splice(idx, 1); + localStorage.setItem("data", JSON.stringify(data)); + }); + + divForItem.addEventListener("click", function() { + for (var idx in data) { + if (data[idx].text == text) { + if (data[idx].check) { + data[idx].check = false; + } else { + data[idx].check = true; + } + } + } + localStorage.setItem("data", JSON.stringify(data)); + divForItem.classList.toggle("checked"); + }); + + itemList.appendChild(divForItem); +} + diff --git a/IVAN-MARAKHOVSKII/style/style.css b/IVAN-MARAKHOVSKII/style/style.css new file mode 100644 index 0000000..0b74b79 --- /dev/null +++ b/IVAN-MARAKHOVSKII/style/style.css @@ -0,0 +1,75 @@ +.grid { + height: 95vh; + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 4fr 1fr; + grid-template-columns: 1fr 4fr 1fr; + -ms-grid-rows: 1fr 6fr 1fr; + grid-template-rows: 1fr 6fr 1fr; +} + +.grid .todo { + width: 100%; + height: 100%; + -ms-grid-column: 2; + grid-column: 2; + -ms-grid-row: 2; + grid-row: 2; +} + +.grid .todo .head { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 1rem; +} + +.grid .todo .filters { + padding: 1rem; +} + +.grid .todo .itemList { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + padding: 1rem 1rem 1rem 1rem; +} + +.item { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + border: 1px solid lightgrey; + margin-top: 0.5rem; + padding: 1rem; + font-size: 1.5rem; +} + +.item:hover { + background: #b1a0a0; +} + +.item p { + margin: 0; +} + +.checked { + background: #4e4949; + color: #fff; +} + +.close { + position: absolute; + right: 0; + top: 0; + padding: 12px 16px 12px 16px; +} +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/IVAN-MARAKHOVSKII/style/style.css.map b/IVAN-MARAKHOVSKII/style/style.css.map new file mode 100644 index 0000000..cb04be7 --- /dev/null +++ b/IVAN-MARAKHOVSKII/style/style.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AAAA,AAAA,KAAK,CAAC;EACJ,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,WAAW;EAClC,kBAAkB,EAAE,WAAW;CAwBhC;;AA5BD,AAME,KANG,CAMD,KAAK,CAAC;EACN,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,CAAC;EACd,QAAQ,EAAE,CAAC;CAiBZ;;AA3BH,AAYI,KAZC,CAMD,KAAK,CAMH,KAAK,CAAC;EACN,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;EAC9B,OAAO,EAAE,IAAI;CACd;;AAhBL,AAkBI,KAlBC,CAMD,KAAK,CAYH,QAAQ,CAAC;EACT,OAAO,EAAE,IAAI;CACd;;AApBL,AAsBI,KAtBC,CAMD,KAAK,CAgBH,SAAS,CAAC;EACV,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,OAAO,EAAE,mBAAmB;CAC7B;;AAIL,AAAA,KAAK,CAAC;EACJ,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,mBAAmB;EAC3B,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,IAAI;EAEb,SAAS,EAAE,MAAM;CASlB;;AAhBD,AASE,KATG,AASF,MAAM,CAAC;EACN,UAAU,EAAE,OAAkB;CAC/B;;AAXH,AAYE,KAZG,CAYH,CAAC,CAAC;EACA,MAAM,EAAE,CAAC;CACV;;AAIH,AAAA,QAAQ,CAAC;EACP,UAAU,EAAE,OAAe;EAC3B,KAAK,EAAE,IAAI;CACZ;;AAED,AAAA,MAAM,CAAC;EACL,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,CAAC;EACR,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,mBAAmB;CAC7B", + "sources": [ + "style.scss" + ], + "names": [], + "file": "style.css" +} \ No newline at end of file diff --git a/IVAN-MARAKHOVSKII/style/style.scss b/IVAN-MARAKHOVSKII/style/style.scss new file mode 100644 index 0000000..b7a67e6 --- /dev/null +++ b/IVAN-MARAKHOVSKII/style/style.scss @@ -0,0 +1,59 @@ +.grid { + height: 95vh; + display: grid; + grid-template-columns: 1fr 4fr 1fr; + grid-template-rows: 1fr 6fr 1fr; + + & .todo { + width: 100%; + height: 100%; + grid-column: 2; + grid-row: 2; + + & .head { + display: flex; + justify-content: space-between; + padding: 1rem; + } + + & .filters { + padding: 1rem; + } + + & .itemList { + display: flex; + flex-direction: column; + padding: 1rem 1rem 1rem 1rem; + } + } +} + +.item { + position: relative; + display: flex; + border: 1px solid lightgrey; + margin-top: 0.5rem; + padding: 1rem; + + font-size: 1.5rem; + + &:hover { + background: rgb(177, 160, 160); + } + p { + margin: 0; + } + +} + +.checked { + background: rgb(78, 73, 73); + color: #fff; +} + +.close { + position: absolute; + right: 0; + top: 0; + padding: 12px 16px 12px 16px; +}