Initial Commit

cb4438d3 · Milan Iliev · cb4438d3 · cb4438d3
Commit cb4438d3 authored Mar 31, 2020 by Milan Iliev
Hide whitespace changes
Inline Side-by-side

Showing with 108 additions and 0 deletions

index.html index.html +58 -0

main.js main.js +50 -0

No files found.
--- a/index.html
+++ b/index.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf8"/>
+
+    <style>
+      body {
+        display: grid;
+        grid-template: 
+          "summary detail" 1fr
+          "controls controls" 40px
+          /1fr      1fr
+        ;
+
+      }
+
+      task-list {
+        grid-area: summary;
+
+        display: grid;
+      }
+
+      task-summary:hover {
+        background-color: #eee;
+        cursor: pointer;
+      }
+
+      task-summary:active {
+        background-color: #ddd;
+      }
+
+      task-detail {
+        grid-area: detail;
+
+        background-color: #eee;
+      }
+    </style>
+  </head>
+  <body>
+
+    <task-list>
+    </task-list>
+
+    <task-detail>
+      <input type="checkbox" name="done"/>
+      <input type="text" name="description"/>
+    
+      <input type="date" name="due_date"/>
+    
+      <button>Delete</button>
+    </task-detail>
+
+    <button>Add Task</button>
+    <script src="main.js"></script>
+
+  </body>
+</html>
\ No newline at end of file
--- a/main.js
+++ b/main.js
+let tasks = [
+  {done: true, description: "Do Laundry"},
+  {done: false, description: "Do Homework"},
+  {done: false, description: "Do Chores"},
+
+]
+
+class TaskView {
+  static template = `
+    <input type="checkbox" name="done"/> 
+    <task-description> -- </task-description>
+  `
+
+  constructor(task){
+    this.task = task
+    this.element = document.createElement("task-summary")
+    this.element.innerHTML = this.constructor.template
+    this.update()
+  }
+
+  update() {
+    this.element.querySelector("[name=done]").checked = this.task.done
+    this.element.querySelector("task-description").innerText = this.task.description
+  }
+}
+
+class DetailTaskView {
+
+  constructor(element){
+    this.element = element
+  }
+
+  update(task) {
+    this.element.querySelector("[name=done]").checked = task.done
+    this.element.querySelector("[name=description]").value = task.description
+  }
+}
+
+let detail_view = new DetailTaskView(document.querySelector("task-detail"))
+
+let list = document.querySelector("task-list")
+
+for (let task of tasks){
+  let view = new TaskView(task)
+
+  view.element.addEventListener("click", () => detail_view.update(task) )
+
+  list.appendChild(view.element)
+}
\ No newline at end of file