Resilient-Labs · JColeman1550 · Oct 21, 2024
diff --git a/index.html b/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="style.css">
+</head>
+<body>
+    <h1>NASA Facilities & Current Weather</h1>
+
+    <div class="search-container">
+        <input type="text" id="city-input" placeholder="Enter city name..." />
+        <button id="search-btn">Search</button>
+    </div>
+
+    <div id="facility-list"></div> 
+
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,92 @@
+// NASA API URL
+const NASA_API_URL = "https://data.nasa.gov/resource/gvk9-iz74.json";
+
+// weather URL
+const weather_url = "https://api.open-meteo.com/v1/forecast?hourly=temperature_2m&temperature_unit=fahrenheit";
+
+const searchBtn = document.getElementById("search-btn");
+const cityInput = document.getElementById("city-input");
+const facilityList = document.getElementById("facility-list");
+
+// event listener for search button
+searchBtn.addEventListener("click", () => {
+    const city = cityInput.value; 
+    if (city) {
+        fetchFacilitiesByCity(city); 
+    } else {
+        alert("Please enter a city name."); 
+    }
+});
+
+// fetch facilities for each city
+function fetchFacilitiesByCity(city) {
+    fetch(`${NASA_API_URL}?city=${city}`)
+        .then(response => response.json())
+        .then(facilities => {
+            // clears previous results
+            facilityList.innerHTML = ""; 
+
+            if (facilities.length > 0) {
+                facilities.forEach(facility => {
+
+                    addFacilityToDOM(facility); 
+                });
+            } else {
+                facilityList.innerText = `No facilities found for ${city}`; 
+            }
+        })
+        .catch(error => {
+            console.error("Error fetching NASA facilities:", error);
+            facilityList.innerText = `Error fetching facilities for ${city}`; 
+        });
+}
+
+// add facility to DOM
+function addFacilityToDOM(facility) {
+    const facilityDiv = document.createElement("div");
+    facilityDiv.classList.add("facility");
+
+    const facilityName = facility.facility; 
+    const facilityLocation = `${facility.city}, ${facility.state}`; 
+    const latitude = facility.location.latitude; 
+    const longitude = facility.location.longitude; 
+
+    // sets initial text while fetching weather
+    facilityDiv.innerText = `${facilityName} - Location: ${facilityLocation} - Weather: Loading...`;
+    facilityList.appendChild(facilityDiv); 
+
+    // fetches weather data for the facility's location
+    fetchWeather(latitude, longitude)
+        .then(weatherData => {
+            facilityDiv.innerText = `
+                ${facilityName}
+                Location: ${facilityLocation}
+                Weather: ${weatherData ? `${weatherData.temp}°F` : 'No data available'}
+            `;
+        })
+        .catch(error => {
+            console.error("Error fetching weather data:", error);
+            facilityDiv.innerText = `${facilityName} - Location: ${facilityLocation} - Weather: No data`;
+        });
+}
+
+// fetches weather data based on latitude and longitude
+function fetchWeather(latitude, longitude) {
+    const weatherUrl = `${weather_url}&latitude=${latitude}&longitude=${longitude}`;
+
+    return fetch(weatherUrl)
+        .then(response => response.json())
+        .then(weather => {
+            if (weather && weather.hourly && weather.hourly.temperature_2m) {
+                return {
+                    temp: weather.hourly.temperature_2m[0] 
+                };
+            }
+            // returns null if no weather data is available for city
+            return "N/A"; 
+        })
+        .catch(error => {
+            console.error("Error fetching weather data:", error);
+            return "N/A"; 
+        });
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,18 @@
+body {
+    margin: 0;
+    padding: 20px;
+    background-image: url("https://clipart-library.com/images/8TxraXeyc.png");
+    background-size: cover;
+    background-attachment: fixed;
+    color: white;
+}
+
+h1 {
+    text-align: center;
+    color: white;
+}
+
+.search-container {
+    text-align: center;
+}
+
diff --git a/template.zip b/template.zip