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

JS project 1 progress

Browse Source
This commit is contained in:
Levi
2026-02-05 13:58:49 -05:00
parent 62b5583957
commit 49f188ff7d
3 changed files with 58 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
INFO-3168 (JS 2)/Project/LeviMclean_nasa-meteorite-explorer/js/dataHandler.js
+4 -22
View File
@@ -1,22 +1,4 @@
fetch('./js/Meteorite_Landings.json') // TODO:
.then((response) => response.json()) // Implement Search by year and name
.then(data => { // Reset filters button
console.log(data); // Clickable table headers for sortin (reuse code?)
const tableBody = document.getElementById("meteorTableBody");
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 ?? "-";
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));
INFO-3168 (JS 2)/Project/LeviMclean_nasa-meteorite-explorer/js/main.js
+22
View File
@@ -0,0 +1,22 @@
fetch('./js/Meteorite_Landings.json')
.then((response) => response.json())
.then(data => {
console.log(data);
const tableBody = document.getElementById("meteorTableBody");
data.splice(0,500).forEach(meteor => { // Just get 500 values for now
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));
INFO-3168 (JS 2)/Project/LeviMclean_nasa-meteorite-explorer/js/map.js
+31 -1
View File
@@ -4,6 +4,36 @@ function loadMap() {
center: {lat: 0, lng: 0}, // Center of the globe center: {lat: 0, lng: 0}, // Center of the globe
zoom: 2 zoom: 2
}); });
}
const infoWindow = new google.maps.InfoWindow(); // create InfoWindow object to use later
// Add custom markers from meteor data // Add custom markers from meteor data
fetch("./js/Meteorite_Landings.json")
.then((response) => response.json())
.then(data => {
data.splice(0,500).forEach(location => {
const marker = new google.maps.Marker({
position: { lat: location.reclat, lng: location.reclong},
map: map,
title: location.name
});
marker.addListener("click", () => { // Open and show the InfoWindow on click
const content = `
<div class="info-window">
<h3>${location.name}</h3>
<p><strong>Mass:</strong> ${location["mass (g)"]} g</p>
<p><strong>Year:</strong> ${location.year}</p>
<p><strong>Class:</strong> ${location.recclass}</p>
<p><strong>Fall Status:</strong> ${location.fall}</p>
<p><strong>Recorded Latitude:</strong> ${location.reclat}</p>
<p><strong>Recorded Longitude:</strong> ${location.reclong}</p>
</div>`; // By doing this I have more control over what I put in the InfoWindow and how to style it
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
});
})
.catch(error => console.error(error));
};