-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
70 lines (63 loc) · 2.08 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TODO</title>
<!-- <link rel="stylesheet" href="todo.css"> -->
</head>
<body>
<!-- Templates first because script needs them -->
<!-- This first template renders all the subsequent ones -->
<template id="todo-app">
<todo-entry-form></todo-entry-form>
<todo-list></todo-list>
<todo-filters></todo-filters>
</template>
<template id="todo-entry-form">
<form>
<input type="text" placeholder="Get the milk" />
<button type="submit" type="submit">Create Todo</button>
</form>
</template>
<template id="todo-list">
<ul></ul>
</template>
<template id="todo-item">
<style>
.done {
text-decoration: line-through;
}
</style>
<li>
<slot name="title"></slot>
<button class="done-button">Done</button>
<button class="delete-button">Delete</button>
</li>
</template>
<template id="todo-filters">
<style>
.selected {
font-weight: bold;
}
</style>
<slot name="count"></slot> items left
<button class="all-filter selected">All</button>
<button class="done-filter">Done</button>
<button class="active-filter">Active</button>
</template>
<!-- Here we define custom elements using templates -->
<script src="todo.js"></script>
<!-- Instantiate the app itself with this tag -->
<todo-app>
<todo-entry done="true">Toggles</todo-entry>
<todo-entry done="true">Base class</todo-entry>
<todo-entry done="false">Toggle all items</todo-entry>
<todo-entry done="false">Clear completed</todo-entry>
<todo-entry done="true">Bold current filter</todo-entry>
<todo-entry done="false">Fix issues with multiple apps per page (gobals etc.)</todo-entry>
<todo-entry done="false">Improve re-rendering</todo-entry>
<todo-entry done="true">Allow passing entries into the HTML tag</todo-entry>
<todo-entry done="false">Edit item title</todo-entry>
</todo-app>
</body>
</html>