diff --git a/README.md b/README.md index 255ab44..4657e13 100644 --- 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 + +nasa-screenshot-homepage + +--- + +nasa-facilities + + +## 🤝 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 new file mode 100644 index 0000000..cedf072 Binary files /dev/null and b/images/nasa-backgorund-2.jpg differ diff --git a/images/nasa-background.jpg b/images/nasa-background.jpg new file mode 100644 index 0000000..b83eb32 Binary files /dev/null and b/images/nasa-background.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..2946860 --- /dev/null +++ b/index.html @@ -0,0 +1,42 @@ + + + + + + + + Nasa Complex API + + + + + +
+
+ +

🚀 NASA Facilities Explorer

+

Discover 400+ facilities across the U.S. — with live weather data at each site.

+ + + +
+ +
+ + +
+
+
+
+
+ +
+
+ +
+
+
+ + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..fe78249 --- /dev/null +++ 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 += `
  • 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}
  • `; + }); +} + +getNasaFacilities(); + +// work completed with the help of Rumi's bf and classmates \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..b5c45fa --- /dev/null +++ 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; + } +}