Deploy APOD Button

Co-authored-by: Panos Triantafyllidis <panostriantafyllidis@users.noreply.github.com>
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

index.html

@@ -64,6 +64,25 @@
       font-family: Arial, sans-serif;
       font-size: 14px;
     }
+
+    .apod-button {
+      background-color: #333;
+      color: white;
+      border: none;
+      border-radius: 5px;
+      padding: 15px 30px;
+    }
+
+    #tipOfTheDayBox {
+      position: fixed;
+      bottom: 10px;
+      left: 10px;
+      background-color: #222;
+      color: white;
+      padding: 10px;
+      border-radius: 5px;
+      z-index: 100;
+    }
   </style>
 </head>
 
@@ -78,8 +97,6 @@
       <option value="">Select an object to focus on</option>
     </select>
   </div>
-  <audio id="backgroundMusic" preload="auto" playsinline></audio>
-  <script type="module" src="js/main.js"></script>
   <div id="infoWindow">
     <h1 id="infoTitle">Title</h1>
     <p id="infoContent">Content</p>
@@ -87,6 +104,13 @@
       Close
     </button>
   </div>
+  <div id="tipOfTheDayBox">
+    <p style="text-align: center">View the tip of the day by NASA!</p>
+    <button id="apodButton" class="apod-button">Get Picture</button>
+    <button id="downloadApodButton" class="apod-button">Download Picture</button>
+  </div>
+  <audio id="backgroundMusic" preload="auto" playsinline></audio>
+  <script type="module" src="js/main.js"></script>
 </body>
 
 </html>

js/main.js

@@ -187,6 +187,35 @@ const main = function () {
   player.addEventListener("ended", playNextTrack);
   playNextTrack();
 
+  // APOD
+  document.getElementById("apodButton").addEventListener("click", function () {
+    window.open("https://apod.nasa.gov/apod/astropix.html", "_blank");
+  });
+
+  document.getElementById("downloadApodButton").addEventListener("click", async function () {
+    const apiKey = process.env.NASA_API_KEY;
+    const apiUrl = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}`;
+
+    try {
+      const response = await fetch(apiUrl);
+      const data = await response.json();
+
+      if (data.media_type === "image") {
+        const a = document.createElement("a");
+        a.href = data.hdurl || data.url;
+        a.download = data.title.replace(/[^a-zA-Z0-9]/g, "_") + ".jpg";
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+      } else {
+        alert("The APOD for today is not an image.");
+      }
+    } catch (error) {
+      console.error("Failed to fetch APOD data:", error);
+      alert("Failed to download the APOD image. Please try again later.");
+    }
+  });
+
   // Animation
   let simulationSpeed = 1;