ASTRONOMY PICTURE OF THE DAY
Nasa has many cool set of API's to explore, check them out Here. Some of them are -
- Astronomy Picture of the Day API
- InSight: Mars Weather Service API
- 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
- Get your API key from Here
- Fire up you PC, let's code (don't put it on fire😅)
- Open VsCode or another text editor.
- Create a file named
index.htmland 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>
- 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;
}
- Now create a file
apodapi.js - 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
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
- Visit -> https://api.nasa.gov/
- Register for an API Key
- 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
Top comments (0)