Sunrise and Sunset
ScienceIntroduction
In this blog post, we will be exploring the Sunrise-Sunset API, a publicly available API that provides information on the sunrise and sunset times for a given location. We will be using JavaScript to make API requests and display the results.
Getting Started
To start using the Sunrise-Sunset API, we need to sign up for an API key at https://sunrise-sunset.org/api. Once we have our API key, we can make requests to the API by appending our key to the API endpoint URL. The API endpoint URL is:
https://api.sunrise-sunset.org/json
Example Code
Let's start by creating a simple HTML document that will contain our JavaScript code.
<!DOCTYPE html>
<html>
<head>
<title>Sunrise-Sunset API Example</title>
</head>
<body>
<div>
<h1>Sunrise-Sunset API Example</h1>
</div>
<script src="script.js"></script>
</body>
</html>
In our HTML file, we have included a script.js file. This is where we will be writing our JavaScript code.
Making a Request
In our script.js file, we can make a request to the Sunrise-Sunset API by using the fetch() method. We will append our API key to the API endpoint URL as a query parameter.
const apikey = 'your-api-key';
const url = `https://api.sunrise-sunset.org/json?lat=36.7201600&lng=-4.4203400&date=today&formatted=0&apikey=${apikey}`;
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
});
In this example code, we are making a request to the API for the sunrise and sunset times for a location with latitude 36.7201600 and longitude -4.4203400. We are also specifying that we want the results for today and in an unformatted JSON format.
Once we receive the response from the API, we are logging the response to the console.
Displaying Results
Now let's display the sunrise and sunset times on our HTML page.
const apikey = 'your-api-key';
const url = `https://api.sunrise-sunset.org/json?lat=36.7201600&lng=-4.4203400&date=today&formatted=0&apikey=${apikey}`;
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(data) {
const sunrise = data.results.sunrise;
const sunset = data.results.sunset;
const sunriseEl = document.createElement('p');
sunriseEl.textContent = `Sunrise: ${sunrise}`;
const sunsetEl = document.createElement('p');
sunsetEl.textContent = `Sunset: ${sunset}`;
document.body.appendChild(sunriseEl);
document.body.appendChild(sunsetEl);
});
In this example code, we are creating two p elements to display the sunrise and sunset times. We are getting the sunrise and sunset times from the response data, and setting the textContent of the elements to include the times.
Finally, we are appending the elements to the HTML body.
Conclusion
We have learned how to make API requests to the Sunrise-Sunset API using JavaScript and display the results on an HTML page. The Sunrise-Sunset API provides a simple and accessible way to get sunrise and sunset times for any location.
