this is my code for the complex Nasa/Weather API

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 */
+}

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 = `
+                <h2>${facilityName}</h2>
+                <p>${city}, ${state}</p>
+                <p id="weather-${facilityName.replace(/\s+/g, '')}">Fetching weather...</p>
+            `;
+
+            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);

index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NASA Facilities & Weather</title>
+    <link rel="stylesheet" href="NW.css">
+</head>
+<body>
+    <header>
+        <h1>NASA Facilities & Weather</h1>
+    </header>
+
+    <button id="fetch-nasa-data">NASA Locations & Weather</button>
+    <button id="toggle-dark-mode">Toggle Dark Mode</button>
+
+    <div id="facilities-container"></div> <!-- This is where NASA data will be displayed -->
+
+    <script src="NW.js"></script>
+</body>
+</html>