Merge pull request #352 from abckhush/h1

Added NASA Mars Rover Photos API
dishamodi0910 · Aug 5, 2024 · e21b794 · e21b794
2 parents f1aee7d + 69a7e11
commit e21b794
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 0 deletions.
diff --git a/Existing_API_Collection/NASA_Mars_Rover_Photos_API/README.md b/Existing_API_Collection/NASA_Mars_Rover_Photos_API/README.md
@@ -0,0 +1,30 @@
+# Mars Rover Photos
+
+## Description
+This is a simple web application that fetches and displays photos taken by NASA's Mars rovers. Users can select a rover and a date to view photos taken on that date.
+
+## Features
+- Select a Mars rover (Curiosity, Opportunity, Spirit).
+- Pick a date to view photos taken by the selected rover.
+- Display photos in a responsive grid layout.
+
+## How to Generate a NASA API Key
+
+1. **Visit the NASA API Portal:**
+   Go to the [NASA API portal](https://api.nasa.gov/).
+
+2. **Register for an API Key:**
+   - Click on "Get Started".
+   - Fill out the registration form with your details.
+   - Submit the form.
+
+3. **Receive Your API Key:**
+   - Check your email for a message from NASA.
+   - Your API key will be included in the email.
+
+4. **Use the API Key:**
+   - Open the `script.js` file.
+   - Replace `DEMO_KEY` with your actual NASA API key.
+
+## Screenshots
+![Screenshot 2024-07-28 123553](https://github.com/user-attachments/assets/ee926729-2227-4647-8d71-085ec1360534)
diff --git a/Existing_API_Collection/NASA_Mars_Rover_Photos_API/index.html b/Existing_API_Collection/NASA_Mars_Rover_Photos_API/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mars Rover Photos</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <h1>Mars Rover Photos</h1>
+    <div class="controls">
+      <label for="rover">Rover:</label>
+      <select id="rover">
+        <option value="curiosity">Curiosity</option>
+        <option value="opportunity">Opportunity</option>
+        <option value="spirit">Spirit</option>
+      </select>
+
+      <label for="date">Date:</label>
+      <input type="date" id="date" value="2023-07-01">
+
+      <button onclick="fetchPhotos()">Get Photos</button>
+    </div>
+    <div id="photos" class="photos"></div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/NASA_Mars_Rover_Photos_API/script.js b/Existing_API_Collection/NASA_Mars_Rover_Photos_API/script.js
@@ -0,0 +1,28 @@
+const API_KEY = 'DEMO_KEY'; // Replace with your NASA API key
+
+async function fetchPhotos() {
+  const rover = document.getElementById('rover').value;
+  const date = document.getElementById('date').value;
+
+  const response = await fetch(`https://api.nasa.gov/mars-photos/api/v1/rovers/${rover}/photos?earth_date=${date}&api_key=${API_KEY}`);
+  const data = await response.json();
+
+  displayPhotos(data.photos);
+}
+
+function displayPhotos(photos) {
+  const photosContainer = document.getElementById('photos');
+  photosContainer.innerHTML = '';
+
+  if (photos.length === 0) {
+    photosContainer.innerHTML = '<p>No photos found for this date.</p>';
+    return;
+  }
+
+  photos.forEach(photo => {
+    const img = document.createElement('img');
+    img.src = photo.img_src;
+    img.alt = `Photo by ${photo.rover.name} on ${photo.earth_date}`;
+    photosContainer.appendChild(img);
+  });
+}
diff --git a/Existing_API_Collection/NASA_Mars_Rover_Photos_API/styles.css b/Existing_API_Collection/NASA_Mars_Rover_Photos_API/styles.css
@@ -0,0 +1,49 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    margin: 0;
+    padding: 0;
+  }
+
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    margin-top: 50px;
+  }
+
+  h1 {
+    text-align: center;
+  }
+
+  .controls {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+
+  label {
+    margin-right: 10px;
+  }
+
+  input, select, button {
+    padding: 10px;
+    margin-right: 10px;
+  }
+
+  .photos {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .photos img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+
diff --git a/Existing_API_Collection/README.md b/Existing_API_Collection/README.md
@@ -30,4 +30,5 @@
 |[CoinGecko API](./CoinGecko_API/)| This API is use to fetch Top 100 Crypto Currencies and display comprehensive data about them with market capital, price etc.|
 |[Gemini API](./Gemini_API/)| The Google Gemini API is a powerful tool that leverages cutting-edge generative AI models to assist developers and businesses in various tasks. It provides functionalities such as text generation, content creation, and creative assistance.|
 |[Brewery_API](./Brewery_API/)| Brewery Finder API is designed to help you explore the world of breweries by providing detailed information about various breweries across different states.|
+|[NASA Mars Rover Photos API](./NASA_Mars_Rover_Photos_API/)|NASA Mars Rover Photos API provides images captured by NASA's Mars rovers, including Opportunity, Curiosity, and Spirit.|
 |[Bhagavad_Gita_API](./Bhagavad_Gita_API/)| Bhagavad Gita API provides quotes from the Bhagavad Gita, offering wisdom and inspiration.|