Add files via upload

akshbansal61203 · May 30, 2024 · d416d57 · d416d57
1 parent f7f6cb1
commit d416d57
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 0 deletions.
diff --git a/Nasa APOD Extension/galaxy.png b/Nasa APOD Extension/galaxy.png
diff --git a/Nasa APOD Extension/manifest.json b/Nasa APOD Extension/manifest.json
@@ -0,0 +1,14 @@
+{
+    "manifest_version": 3,
+    "name": "APOD Extension",
+    "description": "Shows the Astronomy Picture of the Day",
+    "version": "1.0",
+    "action": {
+      "default_popup": "popup.html",
+      "default_icon": "galaxy.png"
+    },
+    "permissions": [
+      "https://api.nasa.gov/"
+    ]
+  }
+
diff --git a/Nasa APOD Extension/popup.css b/Nasa APOD Extension/popup.css
@@ -0,0 +1,36 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 10px;
+    width: 300px;
+    background-color: #1a1a1a;
+    color: #ffffff;
+  }
+
+  #content {
+    text-align: center;
+  }
+
+  #image-container {
+    margin: 10px 0;
+  }
+
+  #apod-image {
+    max-width: 100%;
+    height: auto;
+    border: 2px solid #ffffff;
+  }
+
+  #details {
+    text-align: left;
+  }
+
+  #title {
+    font-size: 1.2em;
+    margin: 10px 0;
+  }
+
+  #description {
+    font-size: 0.9em;
+  }
+
diff --git a/Nasa APOD Extension/popup.html b/Nasa APOD Extension/popup.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Astronomy Picture of the Day</title>
+  <link rel="stylesheet" type="text/css" href="popup.css">
+</head>
+<body>
+  <div id="content">
+    <h1>Astronomy Picture of the Day</h1>
+    <div id="image-container">
+      <img id="apod-image" src="" alt="Astronomy Picture of the Day">
+    </div>
+    <div id="details">
+      <h2 id="title"></h2>
+      <p id="description"></p>
+    </div>
+  </div>
+  <script src="popup.js"></script>
+</body>
+</html>
diff --git a/Nasa APOD Extension/popup.js b/Nasa APOD Extension/popup.js
@@ -0,0 +1,14 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const apiKey = 'DEMO_KEY';  // Replace with your NASA API key
+    const apiURL = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}`;
+
+    fetch(apiURL)
+      .then(response => response.json())
+      .then(data => {
+        document.getElementById('apod-image').src = data.url;
+        document.getElementById('title').textContent = data.title;
+        document.getElementById('description').textContent = data.explanation;
+      })
+      .catch(error => console.error('Error fetching the APOD:', error));
+  });
+