Merge pull request #29 from dhruti26/nasa_api

Added NASA API
dishamodi0910 · Oct 4, 2023 · cf67273 · cf67273
2 parents ce19446 + 637f671
commit cf67273
Show file tree

Hide file tree

Showing 5 changed files with 199 additions and 0 deletions.
diff --git a/Existing_API_Collection/NasaAPI/README.md 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
diff --git a/Existing_API_Collection/NasaAPI/index.html b/Existing_API_Collection/NasaAPI/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NASA APOD Slideshow</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>NASA Astronomy Picture of The Day</h1>
+        <div class="slideshow-container">
+            <div class="slideshow">
+                <div class="image-container">
+                    <img id="apodImage" src="" alt="NASA APOD">
+                </div>
+                <div class="info">
+                    <h2 id="apodTitle"></h2>
+                    <p id="apodExplanation"></p>
+                </div>
+            </div>
+            <div class="nav-buttons">
+                <button id="prevBtn">Previous</button>
+                <button id="nextBtn">Next</button>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/NasaAPI/script.js 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
@@ -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;
+}