DB lab 4
This commit is contained in:
Binary file not shown.
Binary file not shown.
@@ -1,8 +1,101 @@
|
|||||||
table {
|
/* Full disclosure, I am really bad at styling. Just not the creative type... */
|
||||||
border: 2px solid black;
|
/* Body and other basic elements styling */
|
||||||
|
body {
|
||||||
|
background-color: gray;
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#map {
|
h1 {
|
||||||
height: 720px;
|
text-align: center;
|
||||||
width: 100%;
|
}
|
||||||
|
|
||||||
|
/* 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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<header>
|
||||||
<h1>Nasa Meteorite Explorer</h1>
|
<h1>Nasa Meteorite Explorer</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#map">Map</a></li>
|
||||||
|
<li><a href="#meteorTableBody">Table</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
<hr>
|
<hr>
|
||||||
|
</header>
|
||||||
|
|
||||||
<!-- Filter by year stuff -->
|
<!-- Filter by year stuff -->
|
||||||
<fieldset>
|
<fieldset>
|
||||||
@@ -21,7 +29,7 @@
|
|||||||
<input type="number" placeholder="MaxYear" name="maxYearInput">
|
<input type="number" placeholder="MaxYear" name="maxYearInput">
|
||||||
|
|
||||||
<button type="submit" value="Filter By Year" name="yearFilterBtn">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">Reset Filter</button><br>
|
<button type="reset" value="Reset Filter" name="resetFilterBtn" id="resetFilterBtn">Reset Filter</button>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<!-- Filter by name stuff -->
|
<!-- Filter by name stuff -->
|
||||||
@@ -52,7 +60,7 @@
|
|||||||
<tbody id="meteorTableBody"></tbody>
|
<tbody id="meteorTableBody"></tbody>
|
||||||
</table><br>
|
</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/main.js"></script>
|
||||||
<script src="js/map.js"></script>
|
<script src="js/map.js"></script>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ fetch('./js/Meteorite_Landings.json')
|
|||||||
.then(data => {
|
.then(data => {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
const tableBody = document.getElementById("meteorTableBody");
|
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 row = document.createElement("tr");
|
||||||
const id = document.createElement("td");
|
const id = document.createElement("td");
|
||||||
id.textContent = meteor.id ?? "-";
|
id.textContent = meteor.id ?? "-";
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
|
// Load the map from the Google Maps JS API
|
||||||
function loadMap() {
|
function loadMap() {
|
||||||
const map = new google.maps.Map(document.getElementById("map"), {
|
const map = new google.maps.Map(document.getElementById("map"), {
|
||||||
center: {lat: 0, lng: 0}, // Center of the globe
|
center: {lat: 0, lng: 0}, // Center of the globe
|
||||||
zoom: 2
|
zoom: 2
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Add custom markers from meteor data
|
||||||
Reference in New Issue
Block a user