JS Lab 2

2026-03-25 16:10:17 -04:00
parent f3667266a9
commit 942da76704
933 changed files with 149047 additions and 2 deletions
@@ -0,0 +1,70 @@
+<!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>