70 lines
2.8 KiB
HTML
70 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Nasa Meteorite Explorer</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<h1>Nasa Meteorite Explorer</h1>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#map">Map</a></li>
|
|
<li><a href="#meteorTableBody">Table</a></li>
|
|
</ul>
|
|
</nav>
|
|
<hr>
|
|
</header>
|
|
|
|
<!-- Filter by year stuff -->
|
|
<fieldset>
|
|
<legend>Sort By Year</legend>
|
|
<label for="minYearInput">Min Year</label>
|
|
<input type="number" placeholder="MinYear" name="minYearInput" id="minYearInput">
|
|
|
|
<label for="maxYearInput">Max Year</label>
|
|
<input type="number" placeholder="MaxYear" name="maxYearInput" id="maxYearInput">
|
|
|
|
<button type="submit" value="Filter By Year" name="yearFilterBtn" onclick="filterByYear()">Filter By Year</button>
|
|
</fieldset>
|
|
|
|
<!-- Filter by name stuff -->
|
|
<fieldset>
|
|
<legend>Sort By Name</legend>
|
|
<label for="nameInput">Name</label>
|
|
<input type="text" placeholder="Name" name="nameInput" id="nameInput">
|
|
|
|
<button type="submit" value="Filter By Name" name="nameFilterBtn" onclick="filterByName()">Filter By Name</button>
|
|
<button type="reset" value="Reset Filter" name="resetFilterBtn" id="resetFilterBtn" onclick="resetFilters()">Reset Filters</button>
|
|
</fieldset>
|
|
<button type="button" name="downloadBtn" id="downloadBtn" onclick="downloadData()">Download Filtered Data</button>
|
|
<hr>
|
|
|
|
<!-- Where Google Map will go -->
|
|
<div id="map"></div>
|
|
<hr>
|
|
|
|
<!-- Table with clickable headers for sorting -->
|
|
<table id="meteorTable">
|
|
<caption>Meteorite Data Table</caption>
|
|
<thead>
|
|
<tr>
|
|
<th onclick="sortTable(0)">ID <span class="arrow"></span></th>
|
|
<th onclick="sortTable(1)">Name <span class="arrow"></span></th>
|
|
<th onclick="sortTable(2)">Year <span class="arrow"></span></th>
|
|
<th onclick="sortTable(3)">Recclass <span class="arrow"></span></th>
|
|
<th onclick="sortTable(4)">Mass <span class="arrow"></span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="meteorTableBody"></tbody>
|
|
</table><br>
|
|
|
|
<script src="js/main.js" onload="fetchJson()"></script>
|
|
<script src="js/map.js"></script>
|
|
<script src="js/dataHandler.js"></script>
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1Mo5opxS1m0c16McSaTfzqnFAgbEuU2k&callback=loadMap" async defer></script>
|
|
</body>
|
|
</html> |