Resilient-Labs · angy255 · Oct 7, 2025 · Oct 8, 2025 · Oct 8, 2025 · Oct 14, 2025
diff --git a/README.md b/README.md
@@ -1,22 +1,70 @@
-# 🚀 Project: Complex NASA API
-
-### Goal: Use NASA's API to return all of their facility locations (~400). Display the name of the facility, its location, and the weather at the facility currently. 
-
-### How to submit your code for review:
-
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
-  - (1 to 5 no 3) I completed the challenge
-  - (1 to 5 no 3) I feel good about my code
-  - Anything specific on which you want feedback!
-
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+# 🧑‍🚀 🛰️ NASA Facilities Explorer
+
+Explore **all 400+ NASA facilities** across the United States — from mission control centers to research labs! See each facility’s location, learn about its purpose, and even check the current weather on site 🌤️
+
+---
+
+## ✨ Features
+- 🪐 Fetch all NASA facility locations using NASA’s public dataset
+- 📍 Display each facility’s name, center, state, and coordinates
+- 🌦️ Integrate real-time weather data via OpenWeather API
+- 🚀 Clean astronaut-inspired interface — red, white & blue with mission-stripe animation
+- 🧭 Scrollable, card-based layout for exploring hundreds of facilities
+- 📱 Fully responsive design for desktop and mobile
+
+---
+
+## 🛠️ Built With
+- **HTML5** – structure  
+- **CSS3** – responsive design and animations 
+- **JavaScript** – fetch NASA Facility API + OpenWeather API
+---
+
+## 🎯 How to Use
+1. Open the app in your browser  
+2. Click “Let's go!”
+3. Instantly view facility names, centers, states, coordinates, and current weather
+4. Scroll through all 400+ NASA facilities and explore Earth’s space infrastructure 🌎
+
+---
+
+## 📦 Installation & Setup
+1. Clone this repository:  
+
+  ```bash
+git clone https://github.com/your-username/complex-nasa.git
+  ```
+
+2. Navigate into the project folder:
+
+  ```bash
+cd complex-nasa
+  ```
+
+3. Open index.html in your browser.
+
+
+4. (Optional) Add your **OpenWeather API** key in main.js where indicated
+---
+
+## 📸 Screenshots
+
+<img width="1792" height="872" alt="nasa-screenshot-homepage" src="https://github.com/user-attachments/assets/6362f0ff-69b8-494d-a571-befb41c5ef7f" />
+
+---
+
+<img width="1792" height="879" alt="nasa-facilities" src="https://github.com/user-attachments/assets/5aa15284-2c2d-40d1-8cef-b8f525d1137e" />
+
+
+## 🤝 Contributing
+
+Contributions are welcome!
+
+If you’d like to add new features (e.g., add an interactive map, show facility type filters, or include NASA imagery backgrounds), feel free to fork the repo and submit a pull request.
+
+---
+
+## 🙌🏽 Acknowledgments
+- Inspired by NASA’s spirit of exploration and discovery 🛰️
+- Data sourced from: NASA Facilities Dataset
+- Weather data from: OpenWeather API
diff --git a/images/nasa-backgorund-2.jpg b/images/nasa-backgorund-2.jpg
diff --git a/images/nasa-background.jpg b/images/nasa-background.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="description" content="This is where your description goes" />
+    <meta name="keywords" content="one, two, three" />
+
+    <title>Nasa Complex API</title>
+
+    <!-- external CSS link -->
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+  <header></header>
+<div class="astronaut"></div>
+
+  <h1>🚀 NASA Facilities Explorer</h1>
+  <p>Discover 400+ facilities across the U.S. — with live weather data at each site.</p>
+
+  <button id="loadData">Let's go!</button>
+
+  <section id="nasaFac">
+    <ul id="facilitiesList"></ul>
+  </section>
+
+
+    <div id="nasaFac">
+      <div id="facility"></div>
+      <div id="facCenter"></div>
+      <div id="state"></div>
+      <div id="zip"></div>
+
+      <div id="longitude"></div>
+      <div id="latitude"></div>
+
+      <div id="temp"></div>
+      <div id="weather"></div>
+    </div>
+<!-- should add a button somewhere once js is fixed that says "learn about nasa facilities!" and then user can click and have all data display-->
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,70 @@
+//Goal: Use NASA's API to return all of their facility locations (~400). Display the name of the facility, its location, and the weather at the facility currently.
+
+// declare all variables for nasa facilities api and for weather api
+
+// let's move this within the function
+// let urlNasa = `https://corsproxy.io/?url=https://data.nasa.gov/docs/legacy/gvk9-iz74.json`;
+
+const nasaFac = document.getElementById("nasaFac");
+const facility = document.getElementById("facility");
+const facCenter = document.getElementById("facCenter");
+const state = document.getElementById("state");
+const zip = document.getElementById("zip");
+
+//used to create variables for the urlWeather
+const lon = document.getElementById("latitude");
+const lat = document.getElementById("longitude");
+
+const weatherApiKey = "a4342a4e03d652a49f6f999e6dd07493";
+const temp = document.getElementById("temp");
+const weather = document.getElementById("weather");
+
+let lonVal = "";
+let latVal = "";
+
+// make function for nasa facilities api and weather within api
+
+function getNasaFacilities() {
+  let urlNasa = `https://corsproxy.io/?url=https://data.nasa.gov/docs/legacy/gvk9-iz74.json`;
+
+  fetch(urlNasa)
+    .then((res) => res.json())
+    .then((data) => {
+      console.log("fetching data from", data);
+      facCenter.innerHTML = data[0].center;
+      facility.innerHTML = data[0].facility;
+      state.innerHTML = data[0].state;
+      zip.innerHTML = data[0].zipcode;
+      lonVal = data[0].location.longitude;
+      latVal = data[0].location.latitude;
+
+      data.forEach((element) => {
+        // created a method here to keep things cleaner
+        getWeather(element);
+      });
+    })
+    .catch((err) => console.error("error", err));
+}
+
+function getWeather(element) {
+  let urlWeather = `https://api.openweathermap.org/data/2.5/weather?lat=${element.location.latitude}&lon=${element.location.longitude}&appid=${weatherApiKey}&units=imperial`;
+
+  fetch(urlWeather)
+    .then((res) => res.json())
+    .then((weatherdata) => {
+      console.log(weatherdata);
+      temp.innerHTML = `Current temperature: ${Math.round(
+        weatherdata.main.temp
+      )}°F`;
+      weather.innerHTML = `Current weather: ${weatherdata.weather[0].description}`;
+      nasaFac.innerHTML += `<li>The facility is called ${element.facility} and the center is named the ${element.center}, found in the state of ${
+        element.state
+      }. Current weather: ${
+        weatherdata.weather[0].description
+      } Current temperature: ${Math.round(weatherdata.main.temp)}°F - Zip Code: ${zip.innerText} </li>`;
+    });
+}
+
+getNasaFacilities();
+
+// work completed with the help of Rumi's bf and classmates
diff --git a/styles.css b/styles.css
@@ -0,0 +1,170 @@
+/* styling completed with the help of chatgpt */
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+}
+
+body {
+  /* background: radial-gradient(circle at top, #0b0d17 0%, #10152b 100%);
+  color: #e0e6ed; */
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 20px 40px;
+  overflow-x: hidden;
+  background-image: url(images/nasa-background.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+header {
+  width: 100%;
+  height: 16px;
+  background: repeating-linear-gradient(
+    90deg,
+    #d32f2f 0 25%,
+    #ffffff 25% 50%,
+    #d32f2f 50% 75%,
+    #ffffff 75% 100%
+  );
+  background-size: 80px 100%;
+  animation: slideStripe 8s linear infinite;
+}
+
+@keyframes slideStripe {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 80px 0;
+  }
+}
+
+/*floating astronaut icon*/
+.astronaut {
+  position: absolute;
+  top: 35px;
+  right: 40px;
+  width: 60px;
+  height: 60px;
+  background: url('https://cdn-icons-png.flaticon.com/512/3212/3212608.png')
+    no-repeat center/contain;
+  animation: floatAstronaut 5s ease-in-out infinite;
+  opacity: 0.85;
+}
+
+@keyframes floatAstronaut {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+h1 {
+  font-size: 2.4rem;
+  color: #ffffff;
+  margin-top: 60px;
+  margin-bottom: 15px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  border-bottom: 2px solid #d32f2f;
+  padding-bottom: 10px;
+}
+
+p {
+  color: #d0d6e0;
+  font-size: 1.1rem;
+  margin-bottom: 30px;
+  max-width: 650px;
+  line-height: 1.6;
+}
+
+button {
+  background: #d32f2f;
+  color: #fff;
+  border: none;
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 12px 24px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  letter-spacing: 0.5px;
+  box-shadow: 0 3px 8px rgba(211, 47, 47, 0.3);
+}
+
+button:hover {
+  background: #b71c1c;
+  box-shadow: 0 4px 12px rgba(183, 28, 28, 0.4);
+  transform: translateY(-2px);
+}
+
+/* facilities container */
+#nasaFac {
+  width: 90%;
+  max-width: 900px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(6px);
+  overflow-y: auto;
+  max-height: 70vh;
+  margin-top: 20px;
+  color: white;
+  font-size: 20px;
+}
+
+/* facilities list */
+#facilitiesList {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+#facilitiesList li {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-left: 5px solid #d32f2f;
+  border-radius: 6px;
+  padding: 15px 18px;
+  text-align: left;
+  line-height: 1.5;
+  color: #f5f7fa;
+  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.05);
+  transition: all 0.3s ease;
+}
+
+#nasaFac::-webkit-scrollbar {
+  width: 8px;
+}
+
+#nasaFac::-webkit-scrollbar-thumb {
+  background: #d32f2f;
+  border-radius: 4px;
+}
+
+/* responsive design */
+@media (max-width: 600px) {
+  h1 {
+    font-size: 2rem;
+  }
+
+  .astronaut {
+    width: 45px;
+    height: 45px;
+    right: 20px;
+  }
+
+  #facilitiesList li {
+    font-size: 0.9rem;
+  }
+}