diff --git a/NW.css b/NW.css
new file mode 100644
index 0000000..23cce9f
--- /dev/null
+++ b/NW.css
@@ -0,0 +1,95 @@
+/* Default Light Mode (NASA Theme: Red, White, Blue) */
+body {
+ font-family: Arial, sans-serif;
+ background-color: #ffffff; /* White background */
+ color: #0033a0; /* NASA Blue text */
+ text-align: center;
+ padding: 20px;
+ transition: background 0.3s, color 0.3s; /* Smooth transition when switching themes */
+}
+
+header {
+ background-color: #0033a0; /* NASA Blue */
+ color: white;
+ padding: 15px;
+ border-radius: 10px;
+ box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+/* Button for toggling dark mode */
+#toggle-dark-mode {
+ background-color: #d91c1f; /* NASA Red */
+ color: white;
+ border: none;
+ padding: 10px;
+ cursor: pointer;
+ border-radius: 5px;
+ font-weight: bold;
+ margin-top: 10px;
+}
+
+main {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ margin-top: 20px;
+}
+
+/* Card-style container for each facility */
+.facility {
+ background: #ffffff; /* White background */
+ border: 2px solid #0033a0; /* NASA Blue border */
+ border-radius: 10px;
+ padding: 15px;
+ margin: 10px;
+ width: 250px;
+ box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.facility h2 {
+ font-size: 18px;
+ margin-bottom: 5px;
+}
+
+.facility p {
+ font-size: 14px;
+ color: #555;
+}
+
+/* Dark Mode (Navy, Black, Gold) */
+.dark-mode {
+ background-color: #0b0c10; /* Almost black */
+ color: #f5c518; /* Gold text */
+}
+
+.dark-mode header {
+ background-color: #1f2833; /* Dark navy header */
+}
+
+/* Dark mode facility card */
+.dark-mode .facility {
+ background: #214e86; /* Dark navy */
+ border: 2px solid #f5c518; /* Gold border */
+ color: white;
+}
+
+/* Dark mode button styling */
+.dark-mode #toggle-dark-mode {
+ background-color: #f5c518; /* Gold */
+ color: black;
+}
+#fetch-nasa-data, #toggle-dark-mode {
+ background-color: #0033a0; /* NASA Blue */
+ color: white;
+ border: none;
+ padding: 10px 15px;
+ cursor: pointer;
+ border-radius: 5px;
+ font-weight: bold;
+ margin: 10px auto;
+ display: block;
+}
+
+#toggle-dark-mode {
+ background-color: #d91c1f; /* NASA Red */
+}
diff --git a/NW.js b/NW.js
new file mode 100644
index 0000000..05d6d9d
--- /dev/null
+++ b/NW.js
@@ -0,0 +1,100 @@
+// Class to fetch NASA facility data
+class NASAData {
+ constructor(apiKey) {
+ this.apiKey = apiKey;
+ this.nasaURL = `https://data.nasa.gov/resource/gvk9-iz74.json?$$app_token=${this.apiKey}`;
+ }
+
+ // Fetches NASA facilities data and calls the callback function with the data
+ getFacilities(callback) {
+ fetch(this.nasaURL)
+ .then(response => response.json()) // Convert response to JSON
+ .then(data => {
+ console.log("NASA Data:", data); // Debugging
+ callback(data);
+ })
+ .catch(error => console.error("Error fetching NASA facilities:", error));
+ }
+}
+
+// Class to fetch weather data from OpenWeatherMap
+class Weather {
+ constructor(apiKey) {
+ this.apiKey = apiKey;
+ this.weatherURL = "https://api.openweathermap.org/data/2.5/weather";
+ }
+
+ // Fetches weather data for given latitude and longitude
+ getWeather(lat, lon, facilityName) {
+ fetch(`${this.weatherURL}?lat=${lat}&lon=${lon}&appid=${this.apiKey}&units=metric`)
+ .then(response => response.json()) // Convert response to JSON
+ .then(data => {
+ console.log(`Weather for ${facilityName}:`, data); // Debugging
+ UI.updateWeather(facilityName, data);
+ })
+ .catch(error => console.error(`Error fetching weather for ${facilityName}:`, error));
+ }
+}
+
+// Class to manage UI updates
+class UI {
+ // Displays the list of facilities on the webpage
+ static displayFacilities(facilities) {
+ const container = document.getElementById("facilities-container");
+ container.innerHTML = ""; // Clear previous content
+
+ facilities.forEach(facility => {
+ const facilityName = facility.facility || "Unknown Facility";
+ const city = facility.city || "Unknown City";
+ const state = facility.state || "Unknown State";
+ const lat = facility.location?.latitude;
+ const lon = facility.location?.longitude;
+
+ // Create a card for each facility
+ const facilityCard = document.createElement("div");
+ facilityCard.classList.add("facility");
+ facilityCard.innerHTML = `
+ ${facilityName}
+ ${city}, ${state}
+ Fetching weather...
+ `;
+
+ container.appendChild(facilityCard);
+
+ // Fetch weather if lat/lon exists
+ if (lat && lon) {
+ weather.getWeather(lat, lon, facilityName);
+ } else {
+ document.getElementById(`weather-${facilityName.replace(/\s+/g, '')}`).textContent = "Weather data unavailable";
+ }
+ });
+ }
+
+ // Updates weather data in the UI
+ static updateWeather(facilityName, weatherData) {
+ const weatherElement = document.getElementById(`weather-${facilityName.replace(/\s+/g, '')}`);
+ if (weatherElement && weatherData.main) {
+ weatherElement.textContent = `Temp: ${weatherData.main.temp}°C, ${weatherData.weather[0].description}`;
+ }
+ }
+
+ // Toggles dark mode on and off
+ static toggleDarkMode() {
+ document.body.classList.toggle("dark-mode");
+ }
+}
+
+// Initialize NASA and Weather instances with API keys
+const nasa = new NASAData("pittyJyfgndNDefa98bB1304lYrmmH2sRm5Oierq");
+const weather = new Weather("a892507f23bd0efd3ecf30b2c30cd588");
+
+// Function to fetch and display NASA facilities with weather
+function fetchNASAData() {
+ nasa.getFacilities(facilities => {
+ UI.displayFacilities(facilities);
+ });
+}
+
+// Attach event listeners to buttons
+document.getElementById("fetch-nasa-data").addEventListener("click", fetchNASAData);
+document.getElementById("toggle-dark-mode").addEventListener("click", UI.toggleDarkMode);
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c58f934
--- /dev/null
+++ b/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+ NASA Facilities & Weather
+
+
+
+
+ NASA Facilities & Weather
+
+
+
+
+
+
+
+
+
+