Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added NASA API #29

Merged
merged 2 commits into from
Oct 4, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions Existing_API_Collection/NasaAPI/README.md
Original file line number Diff line number Diff line change
@@ -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/
Binary file added Existing_API_Collection/NasaAPI/image-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions Existing_API_Collection/NasaAPI/index.html
Original file line number Diff line number Diff line change
@@ -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>
57 changes: 57 additions & 0 deletions Existing_API_Collection/NasaAPI/script.js
Original file line number Diff line number Diff line change
@@ -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();
91 changes: 91 additions & 0 deletions Existing_API_Collection/NasaAPI/style.css
Original file line number Diff line number Diff line change
@@ -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;
}
Loading