JSUI/example.html at main · kapenike/JSUI · GitHub

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<html>
<head>
<script src="jsui.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
	document.body.appendChild(
		Create('div', {
			id: 'main',
			className: 'body',
			style: {
				maxWidth: '800px',
				width: '100%',
				margin: '40px',
				boxSizing: 'border-box',
				border: '4px solid #444444',
				textAlign: 'center',
				fontFamily: 'Arial',
				margin: '0 auto'
			},
			children: [
				Create('h1', {
					innerHTML: 'Welcome to JSUI',
					id: 'title',
					style: {
						color: '#222222'
					}
				}),
				Create('p', {
					innerHTML: 'This library will remain as simple as possible to decrease the amount of characters I have to type while manipulating the DOM with vanilla JavaScript.',
					style: {
						color: '#444444'
					}
				}),
				Create('ul', {
					style: {
						fontWeight: 'bold',
						textAlign: 'left'
					},
					innerHTML: 'These list elements are created from a data source',
					children: [
						'JavaScript is the best',
						'And even better when combined with functional programming',
						'Why would we still use bloated libraries?'
					].map(x => {
						return Create('li', {
							style: {
								fontWeight: 'normal',
								marginLeft: '40px'
							},
							innerHTML: x
						});
					})
				}),
				Create('button', {
					innerHTML: 'Click to do stuff',
					style: {
						marginBottom: '10px'
					},
					onclick: function () {
						MSelect('div', {
							style: {
								color: '#c30010'
							}
						});
						Select('#title', {
							innerHTML: this.data
						}).prepend(
							Create('div', {
								style: {
									fontSize: '10px'
								},
								innerHTML: 'inserted via selection'
							})
						);
					},
					data: 'Welcome to Vanilla JavaScript'
				})
			]
		})
	);
});
</script>
</head>
<body></body>
</html>