DEV Community

Cover image for NASA APOD API
saxena uditanshu
saxena uditanshu

Posted on

NASA APOD API

ASTRONOMY PICTURE OF THE DAY

Alt Text

Nasa has many cool set of API's to explore, check them out Here. Some of them are -

  1. Astronomy Picture of the Day API
  2. InSight: Mars Weather Service API
  3. Mars Rover Photos

So today we are exploring APOD API. Check what I made from it Here

(You need a basic understanding of HTML CSS & JS for this)

How To

  1. Get your API key from Here
  2. Fire up you PC, let's code (don't put it on fireπŸ˜…)
  3. Open VsCode or another text editor.
  4. Create a file named index.html and put this code.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="Uditanshu saxena" />
    <meta name="theme-color" content="#faebd7" />
    <title>NASA APOD API</title>
    <link rel="stylesheet" href="style.css">
    <script src="apodapi.js"></script>
  </head>
  <body>
     <main>
      <h1 class="title">ASTRONOMY PICTURE OF THE DAY</h1>
      <img src="" id="bg"></img>
      <br />
      <p id="title"></p>
      <p id="date"></p>
      <h4 id="ale">A little explanation -</h4>
      <p id="exp"></p>
      <center>
       <button>
        <a id="dwnld" href="#">Download HD Image</a>
       </button>
      </center>
    </main>
  </body>
</html>
  1. Now lets create style.css
body {
        margin: 0px;
        padding: 0px;
        font-family: monospace;
        background-color: antiquewhite;
        padding-bottom: 10px;
      }
      #bg {
        height: 100%;
        width: 100%;
      }
      .title {
        text-align: center;
      }

      #title {
        text-align: center;
        font-weight: 700;
        font-size: large;
        color: gray;
      }

      #date {
        font-weight: 500;
        color: brown;
      }

      #exp {
        font-weight: 500;
        font-size: 16px;
      }
      #ale{
        font-size: 18px;
        padding: 5px 15px 0px 15px;
        margin: 2px;
      }
      #title,
      #date,
      #exp{
        margin: 2px;
        padding: 5px 15px 5px 15px;
      }

      button, a{
          border : 0px;
          background-color:burlywood;
          color:white;
          padding:10px 12px 10px 12px;
          text-decoration: none;
      }
  1. Now create a file apodapi.js
  2. Put your api key after ?api_key= here . This is the code which is doing all the main stuff of fetching data and displaying it.
async function getImg() {
//fetching data
          "https://api.nasa.gov/planetary/apod?api_key=<put your api key here>";
        const response = await fetch(base_url);
        const data = await response.json(); //converting to JSON
        console.log(data);
//display data on frontend
        document.getElementById("date").textContent = "Date: " + data.date;
        document.getElementById("exp").textContent = data.explanation;
        document.getElementById("title").textContent = data.title;
        document.getElementById('bg').src = data.url;
        document.getElementById('dwnld').href = data.hdurl;
      }

      getImg();

Now save every file and click on your index.html to check how it works.

Yehe you have successfully implemented Nasa Apod API.

Fork the Code from my GITHUB

GitHub logo saxenaudit / Nasa_APOD_API

Simpe WebApp implementation of NASA APOD API

NASA ASTRONOMY PICTURE OF THE DAY API

Simpe WebApp implementation of NASA APOD API

#How to
step 1 - GET API KEY

  1. Visit -> https://api.nasa.gov/
  2. Register for an API Key
  3. You can check several API's from Browse API tab

Now go to index.html and place your API KEY after ?api_key= in the URL

ALL set, host this website on any platform or open in local browser!

DEMO

ASTRONOMY PICTURE OF THE DAY

Top comments (0)