epam-js-jun-2019 · notnotzero · Jul 27, 2019 · Jul 28, 2019 · Jul 30, 2019
diff --git a/IVAN-MARAKHOVSKII/index.html b/IVAN-MARAKHOVSKII/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>Document</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
+  <link rel="stylesheet" href="./style/style.css" />
+
+</head>
+
+<body>
+  <div class="grid">
+    <div class="todo">
+      <div class="head">
+        <div class="inputData"></div>
+        <input type="text" class="form-control mr-2 add" placeholder="Добавить задание!" id="input">
+        <input type="text" class="form-control mr-2 add" placeholder="Дедлайн YYYY-MM-DD" id="deadline" >
+
+        <button type="button" class="btn btn-info" onclick="addItem()" id="inputBtn">Добавить</button>
+      </div>
+      <div class="filters">
+        <button type="button" class="btn btn-info mt-1 mt-lg-0" id="tomorrowBtn" onclick="render('tmr')">Завтра</button>
+        <button type="button" class="btn btn-info mt-1 mt-lg-0" id="weekBtn" onclick="render('week')">Неделя</button>
+
+        <button type="button" class="btn btn-info mt-1 mt-lg-0" id="doneBtn" onclick="render('done')">Выполнены</button>
+
+        <button type="button" class="btn btn-info mt-1 mt-lg-0" id="undoneBtn" onclick="render('undone')">Не выполнены</button>
+        <button type="button" class="btn btn-info mt-1 mt-lg-0" id="undoneBtn" onclick="render('all')">Все задания</button>
+
+      </div>
+      <div class="itemList" id="itemList">
+
+      </div>
+    </div>
+  </div>
+
+  <script src='./scripts/main.js'></script>
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
+    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
+    crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+    crossorigin="anonymous"></script>
+</body>
+
+</html>
diff --git a/IVAN-MARAKHOVSKII/scripts/createElement.js b/IVAN-MARAKHOVSKII/scripts/createElement.js
diff --git a/IVAN-MARAKHOVSKII/scripts/main.js 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
diff --git a/IVAN-MARAKHOVSKII/style/style.css.map b/IVAN-MARAKHOVSKII/style/style.css.map
diff --git a/IVAN-MARAKHOVSKII/style/style.scss 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;
+}