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

Merge branch 'main' of https://git.levimclean.me/Levi/IWD2-02

Browse Source
This commit is contained in:
LeviM0323
2026-02-09 22:00:30 -05:00
parent 8b7df42d74 4b1b63befb
commit 064cff7cfc
5 changed files with 58 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
INFO-3163 (CMS Web Dev)/Labs/lab 2/SDLCTemplate.docx
BIN
View File
Binary file not shown.
INFO-3168 (JS 2)/Notes/code1/code1/index.html → INFO-3168 (JS 2)/Notes/code1/index.html
View File
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')
.then((response) => response.json())
.then(data => {
console.log(data);
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));
// TODO:
// Implement Search by year and name
// Reset filters button
// Clickable table headers for sortin (reuse code?)
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
zoom: 2
});
}
const infoWindow = new google.maps.InfoWindow(); // create InfoWindow object to use later
// 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));
};