diff --git a/Existing_API_Collection/NasaAPI/README.md b/Existing_API_Collection/NasaAPI/README.md new file mode 100644 index 0000000..253369d --- /dev/null +++ b/Existing_API_Collection/NasaAPI/README.md @@ -0,0 +1,21 @@ +NASA APOD(Astronomy Picture of The Day) API: +-The APOD API provides access to the Astronomy Picture of the Day, which showcases a different astronomical image or photograph each day along with a brief explanation written by a professional astronomer. + +Future Scope: +-Enhance the API with additional educational content, such as interactive lessons, quizzes, and facts related to each APOD image. +- Implement AI algorithms to provide personalized content recommendations based on users' interests and viewing history. + +Implementation: +-The JavaScript code fetch response from api and cache is used for fast access,store it in list for later accessing previous and next APOD image and information. + +Tech Stacks used: + - HTML (frontend) + - CSS (styling) + - Javascript (API Implementation) + +Output : +![Output](image-1.png) + + +Reference: +https://api.nasa.gov/ diff --git a/Existing_API_Collection/NasaAPI/image-1.png b/Existing_API_Collection/NasaAPI/image-1.png new file mode 100644 index 0000000..4fc7129 Binary files /dev/null and b/Existing_API_Collection/NasaAPI/image-1.png differ diff --git a/Existing_API_Collection/NasaAPI/index.html b/Existing_API_Collection/NasaAPI/index.html new file mode 100644 index 0000000..d75a8b5 --- /dev/null +++ b/Existing_API_Collection/NasaAPI/index.html @@ -0,0 +1,30 @@ + + + + + + NASA APOD Slideshow + + + +
+

NASA Astronomy Picture of The Day

+
+
+
+ NASA APOD +
+
+

+

+
+
+
+ + +
+
+
+ + + diff --git a/Existing_API_Collection/NasaAPI/script.js b/Existing_API_Collection/NasaAPI/script.js new file mode 100644 index 0000000..b30ee35 --- /dev/null +++ b/Existing_API_Collection/NasaAPI/script.js @@ -0,0 +1,57 @@ +const apodImage = document.getElementById('apodImage'); +const apodTitle = document.getElementById('apodTitle'); +const apodExplanation = document.getElementById('apodExplanation'); +const prevBtn = document.getElementById('prevBtn'); +const nextBtn = document.getElementById('nextBtn'); + +let currentImageIndex = 0; +let apodData = []; +const imageCache = {}; // Cache for storing fetched images + +async function fetchAPODImages() { + const apiKey = 'RXWnNfeza1LHyxDhuLjbPUDCCbt14gFJIPKUnWx8'; + const response = await fetch(`https://api.nasa.gov/planetary/apod?api_key=${apiKey}&count=10`); + const data = await response.json(); + apodData = data; + displayImage(currentImageIndex); +} + +function displayImage(index) { + const currentImage = apodData[index]; + apodTitle.textContent = currentImage.title; + apodExplanation.textContent = currentImage.explanation; + + if (imageCache[currentImage.url]) { + // Serve image from cache if available + apodImage.src = imageCache[currentImage.url]; + } else { + // Fetch and cache the image if it's not in the cache + const image = new Image(); + image.src = currentImage.url; + image.onload = () => { + apodImage.src = currentImage.url; + imageCache[currentImage.url] = currentImage.url; // Store image in cache + }; + } +} + +function showPreviousImage() { + if (currentImageIndex > 0) { + currentImageIndex--; + displayImage(currentImageIndex); + } +} + +function showNextImage() { + if (currentImageIndex < apodData.length - 1) { + currentImageIndex++; + displayImage(currentImageIndex); + } +} + +// Event listeners for navigation buttons +prevBtn.addEventListener('click', showPreviousImage); +nextBtn.addEventListener('click', showNextImage); + +// Initialize the slideshow by preloading images +fetchAPODImages(); diff --git a/Existing_API_Collection/NasaAPI/style.css b/Existing_API_Collection/NasaAPI/style.css new file mode 100644 index 0000000..ed26889 --- /dev/null +++ b/Existing_API_Collection/NasaAPI/style.css @@ -0,0 +1,91 @@ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background-color: #f0f0f0; +} + +.container { + max-width: 800px; + margin: 0 auto; + padding: 20px; + background-color: #ffffff; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + text-align: center; +} + +h1 { + font-size: 24px; + margin-bottom: 20px; + color: #333; +} + +/* Slideshow styles */ +.slideshow { + display: flex; + flex-direction: column; + align-items: center; + background-color: #e5e5e5; + /* Background color for the slideshow container */ + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + transform: scale(1); + transition: transform 0.3s ease; + /* Pop-out effect transition */ +} + +.slideshow:hover { + transform: scale(1.05); + /* Increase the scale on hover for the pop-out effect */ +} + +.image-container { + position: relative; + overflow: hidden; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); +} + +#apodImage { + max-width: 100%; + height: auto; + display: block; + transition: transform 0.3s ease; +} + +.info { + text-align: center; +} + +#apodTitle { + font-size: 20px; + margin: 10px 0; + color: #333; +} + +#apodExplanation { + font-size: 16px; + line-height: 1.5; + color: #555; +} + +.nav-buttons { + margin-top: 20px; +} + +button { + padding: 10px 20px; + background-color: #007BFF; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + margin: 5px; +} + +button:hover { + background-color: #0056b3; +} \ No newline at end of file