-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
104 lines (102 loc) · 3.04 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
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="author" content="pyplacca">
<meta name="theme-color" content="#fff" />
<meta name="robots" content="index, follow">
<meta property="og:type" content="website" />
<meta property="og:title" content="Senior High Schools in Ghana" />
<meta property="og:description" content="Sort and filter through a table of hundreds of Secondary Schools in Ghana with ease." />
<meta property="og:url" content="https://gh-shs-list.netlify.app" />
<meta property="og:image" content="https://imgur.com/oOfDFJp" />
<link rel="shortcut icon" href="./favicon.ico">
<link rel="stylesheet" href="styles.css">
<title>
Senior High Schools In Ghana | Filterable Table
</title>
</head>
<body class="loading">
<!-- <div id="loader"></div> -->
<div class="loading-container">
<span></span>
<p class="loading-text">Crawling wikipedia...</p>
</div>
<button class="toggle">Toggle filter </button>
<!-- filters section -->
<div class="filter">
<!-- <div class="toggle-view"></div> -->
<h3>Filter By</h3>
<div class="categories">
<div class="select" id="region">
<h4 class="header" title="Click to collapse">Region</h4>
<div class="options">
<p class="option locked selected">All</p>
</div>
</div>
<div class="select" id="district">
<h4 class="header" title="Click to collapse">District</h4>
<div class="options">
<p class="option locked selected">All</p>
</div>
</div>
<div class="select" id="type">
<h4 class="header" title="Click to collapse">Type</h4>
<div class="options">
<p class="option locked selected">All</p>
</div>
</div>
</div>
</div>
<!-- main container with table -->
<main class="container">
<h1 style="margin-top: 0">Senior High Schools in Ghana</h1>
<small class="made-by">
Developer:
<a href=https://github.com/pyplacca target="_blank">David Placca</a>
</small>
<br>
<small>
Data source:
<a href="https://en.wikipedia.org/wiki/List_of_senior_high_schools_in_Ghana" target="_blank">Wikipedia</a>
</small>
<div class="table-container">
<p class="results" style="display: none">
Showing results for
<strong id="res-type">All Types</strong>
in
<strong id="res-district">All Districts</strong>
of
<strong id="res-region">All Regions</strong>
</p>
<div class="table-main">
<table>
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</main>
<script src="crawler.js"></script>
<script src="index.js"></script>
<!-- <script src="swipe.js"></script> -->
<script defer>
const sidebar = document.querySelector('.filter')
document.addEventListener('click', ({target}) => {
const { classList } = target
if (classList.contains('option')) {
return
} else {
if (!classList.contains('toggle')) {
sidebar.classList.remove('show')
} else {
sidebar.classList.toggle('show')
}
}
})
</script>
</body>
</html>