Levi/IWD2-02
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

JS project finished

Browse Source
This commit is contained in:
Levi
2026-02-12 15:10:50 -05:00
parent 1357b2362a
commit 71a5d36a7a
5 changed files with 255 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
INFO-3168 (JS 2)/Project/LeviMclean_nasa-meteorite-explorer/index.html
+17 -16
View File
@@ -23,46 +23,47 @@
<fieldset>
<legend>Sort By Year</legend>
<label for="minYearInput">Min Year</label>
<input type="number" placeholder="MinYear" name="minYearInput">
<input type="number" placeholder="MinYear" name="minYearInput" id="minYearInput">
<label for="maxYearInput">Max Year</label>
<input type="number" placeholder="MaxYear" name="maxYearInput">
<input type="number" placeholder="MaxYear" name="maxYearInput" id="maxYearInput">
<button type="submit" value="Filter By Year" name="yearFilterBtn" onclick="filterByYear()">Filter By Year</button>
<button type="submit" value="Filter By Year" name="yearFilterBtn">Filter By Year</button>
<button type="reset" value="Reset Filter" name="resetFilterBtn" id="resetFilterBtn">Reset Filter</button>
</fieldset>
<!-- Filter by name stuff -->
<fieldset>
<legend>Sort By Name</legend>
<label for="nameInput">Name</label>
<input type="text" placeholder="Name" name="nameInput">
<input type="text" placeholder="Name" name="nameInput" id="nameInput">
<button type="submit" value="Filter By Name" name="nameFilterBtn">Filter By Name</button>
</fieldset><hr>
<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>
<table id="meteorTable">
<caption>Meteorite Data Table</caption>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Year</th>
<th>Recclass</th>
<th>Mass</th>
<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>
<button type="button" name="downloadBtn" id="downloadBtn">Download Filtered Data</button>
<script src="js/main.js"></script>
<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>