apod

reccho · Dec 15, 2024 · 6dfb05e · 6dfb05e
1 parent 2ef5ff1
commit 6dfb05e
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -5,12 +5,33 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="https://reccho.github.io/" target="_blank">
-    <title>Business website</title>
+    <title>Personal website</title>
+    <script src='./nasa-apod.js'></script>
   </head>
   <body>
     <nav>
       <a href="/index.html">Home</a>
       <a href="/wedding/wedding.html">Wedding</a>
     </nav>
+
+
+
+
+
+
+    <section id="nasaAPOD">
+      <div class="nasa nasaAPOD">
+        <img id="picAPOD" src="" alt="NASA Picture Of The Day" width="100%">
+
+        <h1>NASA Astronomy Picture Of The Day</h1>
+        <h2 id="title"></h2>
+        <h3>Date: <span id="date"></span></h3>
+        <img id="pic" src="" alt="NASA Picture Of The Day" width="100%">
+        <p id="explanation"></p>
+      </div>
+    </section>
+
+
+
   </body>
 </html>
diff --git a/nasa-apod.js b/nasa-apod.js
@@ -0,0 +1,16 @@
+var req = new XMLHttpRequest();
+var url = "https://api.nasa.gov/planetary/apod?api_key=";
+var api_key = "r2mluC3ZNeSAm9jT0Xcs009nF2JIprjTQn1cSa5e";
+
+req.open("GET", url + api_key);
+req.send();
+
+req.addEventListener("load", function(){
+	if(req.status == 200 && req.readyState == 4){
+  	var response = JSON.parse(req.responseText);
+    //document.getElementById("title").textContent = response.title;
+    //document.getElementById("date").textContent = response.date;
+    document.getElementById("picAPOD").src = response.hdurl;
+    //document.getElementById("explanation").textContent = response.explanation;
+  }
+})