-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
50 lines (46 loc) · 1.66 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
<!DOCTYPE html>
<title>cDom Sample Page</title>
<meta charset="utf-8">
<script src="cdom.js"></script>
<body></body>
<script>
let count = 0;
const updatecount = (num)=>{
count += num
document.getElementById("count").textContent = count
}
function main() {
// DOMを生成する
const dom = elm("div",{width:100,height:30},[
elm("h1",{},[textelm("cDom.js")]),
elm("p",{},[
elm("span",{},[textelm("vanilla-jsで簡単にDOMを作りたいので片手間に作ったライブラリです。")]),
elm("span",{},[textelm("cDomはcreate-DOMの略です。")]),
]),
elm("p",{},[
textelm("このライブラリを使うことで、"),
elm("code",{},[textelm("document.createElement()")]),
textelm("と"),
elm("code",{},[textelm("element.setAttribute()")]),
textelm("と"),
elm("code",{},[textelm("element.appendChild()")]),
textelm("を書き続ける苦痛から解放されます。"),
]),
elm("h2",{},[textelm("サンプルコード")]),
elm("p",{},[
elm("code",{},[elm("pre",{},[textelm(main.toString())])]),
]),
]);
// DOMを追加する
document.body.appendChild(dom);
const dom1 = elm("div",{},[textelm("状態管理のテスト"),
elm("div",{style:"display:flex;"},[
elm("button",{id:"up",onclick:"updatecount(1)"},[textelm("👍")]),
elm("button",{id:"down",onclick:"updatecount(-1)"},[textelm("👎")]),
elm("div",{id:"count",style:"margin:0 5px;"},[textelm("0")])
])
]);
document.body.appendChild(dom1);
}
window.onload = main;
</script>