forked from tsoding/grecha.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
56 lines (53 loc) · 1.73 KB
/
example.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
<!DOCTYPE html>
<html>
<head><title>Grecha.js</title></head>
<body>
<div id="entry"></div>
<script src="./grecha.js"></script>
<script>
const kasha = img("Kasha.png");
const kashaHard = img("KashaHard.gif");
const [count, setCount] = createSignal(0);
const squared = () => count() * count();
const [hard, setHard] = createSignal(false);
const route = routeSignal();
const r = div(() => ({
"/": () => div(
h1("Grecha.js"),
div(a("Foo (new content here!)").att$("href", "#/foo")),
div(a("Bar").att$("href", "#/bar")),
div("Counter: ", count),
div(() => hard() ? kashaHard : kasha).onclick$(() => {
setCount(count() + !hard());
setHard(!hard());
}),
div("Squared: ", squared, " (click to decrement)").onclick$(()=>setCount(count()-1))
),
"/foo": () => div(
h1("Foo"),
() => {
// Wow, scoping!
const [count, setCount] = createSignal(-7);
return div("This one resets when you leave the page, automagically: ", b(count)).
onclick$(() => setCount(count() * .9 + 1));
},
p(LOREM),
div(a("Home").att$("href", "#")),
),
"/bar": () => div(
h1("Bar"),
p(LOREM),
div(a("Home").att$("href", "#"))
)
} [route()]
// TODO(#2): make the route404 customizable in the router component
?? (() => div(
h1("404"),
p("I no find"),
div(a("Home").att$("href", "#"))
))
));
entry.appendChild(r);
</script>
</body>
</html>