diff --git a/NASAfacilityproject.jpg b/NASAfacilityproject.jpg new file mode 100644 index 0000000..be33d0d Binary files /dev/null and b/NASAfacilityproject.jpg differ diff --git a/README.md b/README.md index 255ab44..4cbc9de 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,17 @@ -# 🚀 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... -``` +# Complex NASA Project + +This project shows NASA facility locations, names, and weather reports! + +## How It's Made: + +**Tech used:** HTML, CSS, and JavaScript + +I used html for the markup, css for the styling, andI used Javascript for the logic of this project. + +## Lessons Learned: + +I learned how to interact 2 APIs to return multiple results in a single output. I also learned more about dom manipulation with grabbing data from multiple APIs and turn that data into HTML elements. + +## Image of Project: + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..8a80e1c --- /dev/null +++ b/index.html @@ -0,0 +1,17 @@ + + +
+ + + +Location: ${locationStr}
+Weather: Loading...
+ `; + list.appendChild(li); + + // Load weather asynchronously + if (item.location && item.location.latitude && item.location.longitude) { + const weatherP = li.querySelector('p:last-child'); + loadWeather(item.location.latitude, item.location.longitude, weatherP); + } else { + li.querySelector('p:last-child').textContent = 'Weather: Location data unavailable'; + } + }) + }) + .catch(error => { + console.error('Fetch error:', error) + }) \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..77fa737 --- /dev/null +++ b/style.css @@ -0,0 +1,86 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} +body { + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + background-color: #0a0a0a; + color: #ffffff; + padding: 20px; + line-height: 1.6; +} + +h1 { + text-align: center; + color: #28ae81; + font-size: 2.5em; + margin-bottom: 30px; + text-shadow: 0 0 10px rgba(0, 191, 255, 0.5); +} + +#facilities-list { + list-style: none; + padding: 0; + max-width: 800px; + margin: 0 auto; +} + +#facilities-list li { + background: linear-gradient(135deg, #1a1a2e, #16213e); + border: 1px solid #00bfff; + border-radius: 10px; + padding: 20px; + margin-bottom: 20px; + box-shadow: 0 4px 8px rgba(0, 191, 255, 0.2); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +#facilities-list li:hover { + transform: translateY(-5px); + box-shadow: 0 8px 16px rgba(0, 191, 255, 0.3); +} + +h3 { + color: #ffffff; + font-size: 1.5em; + margin: 0 0 10px 0; + text-align: center; + border-bottom: 2px solid #00bfff; + padding-bottom: 5px; +} + + +p { + margin: 10px 0; + font-size: 1em; +} + + +p:first-of-type { + font-weight: bold; + color: #00ff7f; +} + + +p:last-of-type { + color: #ffd700; + font-style: italic; +} + + + +/* responsive design! */ +@media (max-width: 600px) { + body { + padding: 10px; + } + + h1 { + font-size: 2em; + } + + #facilities-list li { + padding: 15px; + } +} \ No newline at end of file