-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
73 lines (73 loc) · 2.53 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Meteorite landings</title>
<!-- This is the CSS reset-->
<link rel="stylesheet" href="cssreset.css" />
<!-- Loading the required Google Fonts -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Oswald|Roboto"
/>
<!-- Loading Leaflet so that we can display the map -->
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script
src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>
<!-- This is my own stylesheet-->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="titlecard">
<hgroup>
<h1>Meteorite Landings</h1>
<p>
Visualization tool to navigate a data set from The Meteoritical Society that contains information on all of the known meteorite
landings
</p>
</hgroup>
</div>
<div id="map"></div>
<div class="viewOptions">
<p id="card-btn">Card View</p>
<p>|</p>
<p class="disable-text" id="table-btn">Table View</p>
</div>
<div class="order">
<p>Showing the top 500 records ordered by descending mass (ton)</p>
</div>
<section id="cards-section" class="cards"></section>
<section id="table-section" class="hide">
<div style="overflow-x:auto;">
<table>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Mass (tons)</th>
<th>Year</th>
</tr>
</thead>
<tbody id="table-rows">
</tbody>
</table>
</div>
</section>
<!--This adds Axios so that we can import the data from the json file. You have to put it before your javascript file so that it's all loaded before you run the functions-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- This adds Day.js so that we can modify the date format; not needed since the dates are all given for January 1st -->
<!-- When tested, dayjs().format('MMM, YYYY') gave February, Year when the date was formatted as 02/01/year -->
<!-- <script src="https://unpkg.com/[email protected]/dayjs.min.js"></script> -->
<script src="./script.js"></script>
</body>
</html>