Skip to content

A
app-todo
Commit 7507f85e authored by Milan Iliev's avatar Milan Iliev
Browse files
Options

Deleting Tasks

parent f49f843b
Hide whitespace changes
Inline Side-by-side
Showing with 13428 additions and 3 deletions
index.html
View file @ 7507f85e
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
<head> <head>
<meta charset="utf8"/> <meta charset="utf8"/>
<link rel="stylesheet" href="main.css"/> <link rel="stylesheet" href="main.css"/>
<script src="sugar.js"></script>
<script>Sugar.extend()</script>
</head> </head>
<body> <body>
...@@ -15,7 +17,7 @@ ...@@ -15,7 +17,7 @@
<input type="date" name="due_date"/> <input type="date" name="due_date"/>
<button>Delete</button> <button id="delete_button">Delete</button>
</task-detail> </task-detail>
<button id="add_button">Add Task</button> <button id="add_button">Add Task</button>
......
main.js
View file @ 7507f85e
...@@ -29,6 +29,11 @@ let tasks = [ ...@@ -29,6 +29,11 @@ let tasks = [
new Task({done: false, description: "Do Chores" }), new Task({done: false, description: "Do Chores" }),
] ]
let task_views = []
let list = document.querySelector("task-list")
class TaskView { class TaskView {
static template = ` static template = `
<input type="checkbox" name="done"/> <input type="checkbox" name="done"/>
...@@ -61,7 +66,6 @@ class TaskView { ...@@ -61,7 +66,6 @@ class TaskView {
} }
class DetailTaskView { class DetailTaskView {
constructor(element){ constructor(element){
this.element = element this.element = element
this.fields = { this.fields = {
...@@ -76,6 +80,18 @@ class DetailTaskView { ...@@ -76,6 +80,18 @@ class DetailTaskView {
this.fields.done.addEventListener("change", () => { this.fields.done.addEventListener("change", () => {
this.task.done = this.fields.done.checked this.task.done = this.fields.done.checked
}) })
this.deleteButton = this.element.querySelector("#delete_button")
this.deleteButton.addEventListener("click", () => {
let summary_view_for_deleted_task = task_views.find((summary_view) => summary_view.task === this.task)
task_views.remove(summary_view_for_deleted_task)
tasks.remove(this.task)
list.removeChild(summary_view_for_deleted_task.element)
})
} }
get task(){ get task(){
...@@ -96,12 +112,12 @@ class DetailTaskView { ...@@ -96,12 +112,12 @@ class DetailTaskView {
let detail_view = new DetailTaskView(document.querySelector("task-detail")) let detail_view = new DetailTaskView(document.querySelector("task-detail"))
let list = document.querySelector("task-list")
let addTask = function(task){ let addTask = function(task){
let view = new TaskView(task) let view = new TaskView(task)
view.element.addEventListener("click", () => detail_view.task = task ) view.element.addEventListener("click", () => detail_view.task = task )
list.appendChild(view.element) list.appendChild(view.element)
task_views.push(view)
} }
for (let task of tasks){ addTask(task) } for (let task of tasks){ addTask(task) }
......
sugar.js 0 → 100644
View file @ 7507f85e
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment