JS project start

2026-02-04 13:51:54 -05:00
parent 59948ed75c
commit c88c9bbeea
16 changed files with 549442 additions and 14 deletions
@@ -0,0 +1,8 @@
+table {
+    border: 2px solid black;
+}
+
+#map {
+    height: 720px;
+    width: 100%;
+}
@@ -0,0 +1,62 @@
+<!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>
+        <h1>Nasa Meteorite Explorer</h1>
+        <hr>
+
+        <!-- Filter by year stuff -->
+        <fieldset>
+            <legend>Sort By Year</legend>
+            <label for="minYearInput">Min Year</label>
+            <input type="number" placeholder="MinYear" name="minYearInput">
+
+            <label for="maxYearInput">Max Year</label>
+            <input type="number" placeholder="MaxYear" name="maxYearInput">
+
+            <button type="submit" value="Filter By Year" name="yearFilterBtn">Filter By Year</button>
+            <button type="reset" value="Reset Filter" name="resetFilterBtn">Reset Filter</button><br>
+        </fieldset>
+
+        <!-- Filter by name stuff -->
+        <fieldset>
+            <legend>Sort By Name</legend>
+            <label for="nameInput">Name</label>
+            <input type="text" placeholder="Name" name="nameInput">
+
+            <button type="submit" value="Filter By Name" name="nameFilterBtn">Filter By Name</button>
+        </fieldset><hr>
+
+        <!-- Where Google Map will go -->
+        <div id="map"></div>
+        <hr>
+
+        <!-- Table with clickable headers for sorting -->
+        <table>
+            <caption>Meteorite Data Table</caption>
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Name</th>
+                    <th>Year</th>
+                    <th>Recclass</th>
+                    <th>Mass</th>
+                </tr>
+            </thead>
+            <tbody id="meteorTableBody"></tbody>
+        </table><br>
+
+        <button type="button" name="downloadBtn">Download Filtered Data</button>
+
+        <script src="js/main.js"></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>
@@ -0,0 +1,22 @@
+fetch('./js/Meteorite_Landings.json')
+    .then((response) => response.json())
+    .then(data => {
+        console.log(data);
+        const tableBody = document.getElementById("meteorTableBody");
+        data.forEach(meteor => {
+            const row = document.createElement("tr");
+            const id = document.createElement("td");
+            id.textContent = meteor.id ?? "-";
+            const name = document.createElement("td");
+            name.textContent = meteor.name ?? "-";
+            const year = document.createElement("td");
+            year.textContent = meteor.year ?? "-";
+            const recclass = document.createElement("td");
+            recclass.textContent = meteor.recclass ?? "-";
+            const mass = document.createElement("td");
+            mass.textContent = meteor["mass (g)"] + "g" ?? "-";
+            row.append(id, name, year, recclass, mass);
+            tableBody.appendChild(row);
+        })
+    })
+    .catch(error => console.error(error));
@@ -0,0 +1,6 @@
+function loadMap() {
+    const map = new google.maps.Map(document.getElementById("map"), {
+        center: {lat: 0, lng: 0}, // Center of the globe
+        zoom: 2
+    });
+}