-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjs-functional-ui.html
103 lines (88 loc) · 3.33 KB
/
js-functional-ui.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<title>Functional UI in Vanilla JS</title>
<body id="App"></body>
<script>
const App = document.querySelector('#App')
const books = {
best: [
{
title: `The Yellow River`,
author: `I.P. Daily`,
body: `Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.`,
label: `Best!`
},
{
title: `Under the Bleachers`,
author: `Seymour Butts`,
body: `Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper.`
},
{
title: `The Future of Robotics`,
author: `Cy Borg and Anne Droid`,
body: `Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.`
}
],
worst: [
{
title: `The Numbers Game`,
author: `Cal Q. Later`,
body: `Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.`
},
{
title: `Sitting on the Beach`,
author: `Sandy Cheeks`,
body: `Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper.`,
label: `Worst!`
},
{
title: `101 Ways to Diet`,
author: `I. M. Hungry`,
body: `Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.`
}
]
}
function Listicle({ title, items }) {
return `<article>
${Header(title || 'Default Header Title')}
${List(items)}
</article>`
}
function Header(title) {
return `<header>
<div>${title}</div>
</header>`
}
function List(items) {
return `<div>${items.map(ListItem).join('')}</div>`
}
function ListItem(item) {
return `<section ${item.label ? `data-label="${item.label}"` : ''}>
<h1>${item.title}</h1>
<strong>by ${item.author}</strong>
<p>${item.body}</p>
</section>`
}
App.innerHTML += Listicle({
title: `3 Books You Don't Want to Miss`,
items: books.best
})
App.innerHTML += Listicle({
title: `The Worst 3 Books You've Never Heard Of`,
items: books.worst
})
</script>
<style>
body { columns: 2; }
article { padding: 2rem; }
header, section {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #ccc;
}
[data-label]::before {
content: attr(data-label);
border: 1px solid #ccc;
padding: 4px 6px;
float: right;
}
h1 { margin-bottom: 0.5rem }
</style>