-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
101 lines (95 loc) · 3.23 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
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
<!DOCTYPE html>
<html>
<head>
<title>Sleeping Legacies</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script>
<script type="text/javascript" src="deathnote.json"></script>
</head>
<body x-data="loadData()">
<nav class="nav">
<img src="img/logo.svg" class="nav__logo">
<div class="nav__search">
<input
x-ref="searchField"
x-model="search"
x-on:keydown.window.prevent.slash="$refs.searchField.focus()"
class="form-control"
type="search"
placeholder="Search..." >
</div>
</nav>
<div class="hero">
<p>A celebration and record of innovative products and services that made an impact across <br> Africa before their journeys came to an end.</p>
</div>
<div class="stepwizard">
<div class="stepwizard-row">
<template x-for="alphabet in alphabets" :key="alphabet">
<div class="stepwizard-step">
<button type="button" class="btn btn-primary btn-circle" x-text="alphabet" @click="filter(alphabet)"></button>
</div>
</template>
</div>
</div>
<div class="category-filter">
<label for="category">Filter by Category:</label>
<select id="category" x-model="selectedCategory" @change="filterByCategory">
<option value="">All</option>
<template x-for="category in categories" :key="category">
<option x-text="category"></option>
</template>
</select>
</div>
<section class="row">
<template x-for="item in filteredData" :key="item">
<div class="col-4 card">
<div class="card-header">
<h5 x-text="item['name']" class="item-name"></h5>
<span x-text="item['category']" class="item-category"></span>
</div>
<p x-text="item['description']"></p>
<h5 x-text="item['dateOpen'] +' - '+ item['dateClose']"></h5>
</div>
</template>
</section>
<script type="text/javascript">
function loadData() {
return {
alphabets: ['*', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
search: "",
selectedCategory: "",
categories: [...new Set(items.map(item => item.category))],
myForData: items,
get filteredData() {
let data = this.myForData;
if (this.search !== "") {
data = data.filter(item => item.name.toLowerCase().startsWith(this.search.toLowerCase()));
}
if (this.selectedCategory !== "") {
data = data.filter(item => item.category === this.selectedCategory);
}
return data.sort(compare);
},
filter(alphabet) {
if (alphabet === '*') {
this.search = "";
} else {
this.search = alphabet;
}
},
filterByCategory() {
// This function is just a placeholder to trigger the reactivity
}
};
}
function compare(a, b) {
return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
}
</script>
</body>
</html>