DB lab 4

2026-02-04 17:56:29 -05:00
parent c88c9bbeea
commit 050db847ca
6 changed files with 114 additions and 10 deletions
@@ -1,8 +1,101 @@
-table {
-    border: 2px solid black;
+/* Full disclosure, I am really bad at styling. Just not the creative type... */
+/* Body and other basic elements styling */
+body {
+    background-color: gray;
+    font-family: 'Courier New', Courier, monospace;
+    padding: 0;
+    margin: 0;
 }

-#map {
-    height: 720px;
-    width: 100%;
+h1 {
+    text-align: center;
+}
+
+/* Nav styling */
+nav ul {
+    list-style: none;
+    display: flex;
+    padding: 0;
+    margin: 0;
+    justify-content: center;
+    gap: 15px;
+}
+
+nav a {
+    text-decoration: none;
+}
+
+/* Inputs styling */
+fieldset input {
+    max-width: 120px;
+    padding: 3px 5px;
+    margin-right: 5px;
+}
+
+/* Button styling */
+button {
+    background-color: lime;
+    font-weight: bold;
+    padding: 5px 10px;
+    cursor: pointer;
+    border: 1px solid black;
+    transition: background-color 0.2;
+}
+
+button:hover {
+    background-color: #a6ff00;
+}
+
+#resetFilterBtn {
+    background-color: red;
+}
+
+#resetFilterBtn:hover {
+    background-color: #ff5555;
+}
+
+#downloadBtn{
+    display: block;
+    margin: 10px auto;
+}
+
+/* Fieldset legend and table captions */
+legend, caption {
+    font-weight: bold;
+}
+
+/* Table Styling */
+table {
+    border: 2px solid black;
+    background-color: white;
+    margin: 0px auto;
+    border-collapse: collapse;
+    width: 90%;
+    max-width: 1200px;
+}
+
+table td, table th {
+    border: 2px solid black;
+    padding: 6px 10px;
+    text-align: center;
+}
+
+table th {
+    background-color: #f0f0f0;
+}
+
+table tr:nth-child(even) { /* Make every even row a different colour */
+    background-color: #f9f9f9;
+}
+
+table tr:hover {
+    background-color: #e0e0e0;
+}
+
+/* Map Styling */
+#map {
+    border: 2px solid black;
+    height: 700px;
+    width: 90%;
+    margin: 20px auto;
 }
@@ -8,8 +8,16 @@
    </head>

    <body>
-        <h1>Nasa Meteorite Explorer</h1>
-        <hr>
+        <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>
@@ -21,7 +29,7 @@
            <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>
+            <button type="reset" value="Reset Filter" name="resetFilterBtn" id="resetFilterBtn">Reset Filter</button>
        </fieldset>

        <!-- Filter by name stuff -->
@@ -52,7 +60,7 @@
            <tbody id="meteorTableBody"></tbody>
        </table><br>

-        <button type="button" name="downloadBtn">Download Filtered Data</button>
+        <button type="button" name="downloadBtn" id="downloadBtn">Download Filtered Data</button>

        <script src="js/main.js"></script>
        <script src="js/map.js"></script>
@@ -3,7 +3,7 @@ fetch('./js/Meteorite_Landings.json')
    .then(data => {
        console.log(data);
        const tableBody = document.getElementById("meteorTableBody");
-        data.forEach(meteor => {
+        data.splice(0,50).forEach(meteor => { // Just get 50 values for now
            const row = document.createElement("tr");
            const id = document.createElement("td");
            id.textContent = meteor.id ?? "-";
@@ -1,6 +1,9 @@
+// Load the map from the Google Maps JS API
 function loadMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
        center: {lat: 0, lng: 0}, // Center of the globe
        zoom: 2
    });
 }
+
+// Add custom markers from meteor data