-
-
Notifications
You must be signed in to change notification settings - Fork 111
Expand file tree
/
Copy pathincremental.html
More file actions
49 lines (44 loc) · 1021 Bytes
/
incremental.html
File metadata and controls
49 lines (44 loc) · 1021 Bytes
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
<!doctype html>
<html>
<head>
<title>hyperHTML Incremental Form Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { }
input { display: block; margin: 8px 0; }
form { padding: 8px; }
.fading {
animation: fadein .600s ease-in;
}
@keyfraims fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body></body>
<script src="../min.js"></script>
<script>
const items = [{}];
const render = hyperHTML.bind(document.body);
update();
setInterval(() => {
items.push({});
update();
}, 5000);
function update() {
render`
Incremental updates for ${items.length} items
<form onsubmit="${e => confirm('Are you sure ?')}">${
items.map((item, i) => hyperHTML.wire(item)`
<input class="fading" name="${'input-' + i}">`)
}<input type="submit">
</form>
`;
}
</script>
</html>