Resilient-Labs · ishelvirakeira · Oct 6, 2025 · Oct 6, 2025 · Oct 28, 2025
diff --git a/README.md b/README.md
@@ -2,21 +2,13 @@
 
 ### 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:
+The complex NASA API project uses data from NASA's around 400 facilities API to display information about all NASA centers across the US. The name, location, and curren weather of those locations are displayed in the DOM (Facility Name - City, State. Current  Weather: Description and Temperature in Fahrenheit). The program uses the OpenWeatherMap API to retrieve real-time weather data for each facility by using its latitude and longitude.
 
-- 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!
+Find the live demo at https://ishelvirakeira.github.io/complex-nasa-bootcamp/
 
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+<img width="745" height="430" alt="Nasa facilities" src="https://github.com/user-attachments/assets/0825f646-08e5-4d52-93b4-83f6ce57af6a" />
+
+
+Tools used: HTML, CSS, JavaScript, NASA's Facilities API, OpenWeatherMap API
+
+I learned how to work with 2 APIs together to get more information about the locations that are not necessarily included in one of the APIs. I learned how to debug API and JavaScript errors collaboratively.
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang = "en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Complex NASA API</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+
+        <h1>NASA Facilities</h1>
+
+        <button type="button" name="button">Get Facilities</button>
+
+        <div class="facilities"></div>
+
+
+        <script type="text/javascript" src="main.js"></script>
+
+    </body>
+
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,42 @@
+//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
+
+//listen for click, call the api
+
+
+//worked on it with Rumi (Marquis), Justin Joshi, Leanne, Godwin, ...
+
+//Karim helped me debug the code
+
+//declare variables
+document.querySelector('button').addEventListener('click', getFacilities);
+const apiKey= "d23e009d9e3c420522a7d9b1300082d7";//key for the weather
+const url= "https://corsproxy.io/?url=https://data.nasa.gov/docs/legacy/gvk9-iz74.json";
+
+//get NASA facilities
+function getFacilities(){
+    fetch(url)
+    .then(res => res.json())
+    .then(data => {
+        console.log(data[0], typeof(data));
+        data.forEach(i => getWeather(i))//i represents each one of the ~400 locations
+    })
+    .catch(err=>{
+        console.log(`error ${err}`);
+    })
+}
+//get the weather
+function getWeather(i){
+    let weatherUrl=`https://api.openweathermap.org/data/2.5/weather?lat=${i.location.latitude}&lon=${i.location.longitude}&units=imperial&appid=${apiKey}`;
+    fetch(weatherUrl)
+        .then(res => res.json())
+        .then(weatherdata=>{
+            console.log(weatherdata);
+            document.querySelector('.facilities').innerHTML += `<li>${i.center} - ${i.city}, ${i.state}. Current Weather: ${weatherdata.weather[0].description} and Temp: ${weatherdata.main.temp} °F</li>`;
+        })
+         .catch(err=>{
+        console.log(`error ${err}`);
+    })
+
+
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,70 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+    padding: 20px;
+    background-color: white;
+}
+
+h1 {
+    color: rgb(46, 46, 215);
+    margin-bottom: 20px;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 1rem;
+    background-color: rgb(55, 55, 126);
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-bottom: 20px;
+}
+
+button:hover {
+    background-color: rgb(75, 72, 141);
+}
+
+.facilities {
+    list-style-type: none;
+    padding: 0;
+    max-width: 800px;
+    margin: auto;
+}
+
+.facilities li {
+    background-color: white;
+    margin: 10px 0;
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(159, 115, 115, 0.2);
+    text-align: left;
+}
+
+/* Responsive Design */
+@media screen and (max-width: 768px) {
+    body {
+        padding: 10px;
+    }
+
+    button {
+        width: 100%;
+        margin-bottom: 15px;
+    }
+
+    .facilities li {
+        font-size: 0.9rem;
+        padding: 10px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    h1 {
+        font-size: 12px;
+    }
+
+    .facilities li {
+        font-size: 10px;
+        padding: 8px;
+    }
+}