Resilient-Labs · Innocent-R · Oct 7, 2025 · Oct 9, 2025 · Oct 31, 2025 · Oct 31, 2025
diff --git a/README.md b/README.md
@@ -1,22 +1,13 @@
-# 🚀 Project: Complex NASA API
+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. 
+This project integrates multiple NASA APIs, including a weather API and a data API, to display facility information, weather conditions, and location details.
 
-### How to submit your code for review:
+How It's Made:
+Tech used: HTML, CSS, and JavaScript
 
-- 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!
+Lessons Learned:
+While working on this conplext nasa api project, I learned how to effectively wranble and transform complex datasets. I also gained understanding of how to integrate with external APIs.
 
-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="907" height="523" alt="complex nasa" src="https://github.com/user-attachments/assets/234fa960-1ead-473d-849d-4046ed6b5849" />
+
+Find the live project here https://innocent-r.github.io/complex-nasa/
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Complex Nasa API</title>
+</head>
+<body>
+    <section>
+        <h1>Complex Nasa API</h1>
+        <button id="fetchFacilities">Fetch Facilities</button>
+
+   <h2></h2>
+    </section>
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,44 @@
+//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.
+//Creating key and url variables
+//Creating a function to fetch facilities
+//Fetching url information
+//Catching errors tha may happen
+//Displaying facility, city, weather, state and weather information on the DOM
+
+const key = "d23e009d9e3c420522a7d9b1300082d7";
+const url = "https://corsproxy.io/?url=https://data.nasa.gov/docs/legacy/gvk9-iz74.json"
+
+document.querySelector("#fetchFacilities").addEventListener("click", fetchFacilities);
+
+// getWeather();
+// fetchFacilities();
+
+function fetchFacilities(){
+    fetch(url)
+    .then(res => res.json())
+    .then(data => {
+        console.log(data)
+        data.forEach(element => {
+            getWeather(element);
+        });
+    })
+    .catch(error => console.error(error));
+}
+
+function getWeather(sun){
+    let weatherUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${sun.location.latitude}&lon=${sun.location.longitude}&units=imperial&appid=${key}`
+    fetch(weatherUrl)
+    .then(res => res.json())
+    .then(data => {
+        console.log(data);
+        document.querySelector("h2").innerHTML += `<li>${sun.facility} - ${sun.city}, ${sun.state}. Current Weather: ${data.weather[0].description} and Temp: ${data.main.temp} °F</li>`;
+    })
+    .catch(error => console.error(error));
+}
+
+
+
+
+
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,33 @@
+body{
+    background-color: rgb(26, 26, 79);
+    color: white;
+}
+h1{
+    color: rgb(245, 211, 19);
+    font-size: 3em;
+}
+button{
+    width: 30%;
+    height: 40px;
+    font-weight: bold;
+    font-size: 1em;
+    background-color: green;
+    color: white;
+}
+button:hover{
+    cursor: pointer;
+}
+button:active{
+    background-color: rgb(94, 231, 94);
+}
+section{
+    padding: 2%;
+}
+@media screen and (max-width: 920px){
+    h2{
+        font-size: 1em;
+    }
+    button{
+        font-size: 0.8em;
+    }
+}