This weather app tutorial will use HTML geolocation to auto-detect the user’s latitude and longitude and then will use those coordinates to determine the weather using the Dark Sky API. Before we start, you must sign up for your API key over at Dark Sky. Once you sign up and reach to your console, take note of your API key. Just for your information, this API is free for up to 1,000 requests/day.
Now that we have our API key, we can create our files:
index.html - for our markup
style.css - for styling
app.js - for the function(s), API
As you probably saw in the preview above, we’re going to be displaying the current temperature, a short summary, and the coordinates based on the user’s location. That’s why we’ll need three divs in addition to adding the jQuery CDN (for the API request) and linking our style.css and app.js files.
I encourage you to try to explore more with the world of APIs. You can build a Quote Generator that uses a quote API, or you could even further advance this project by adding more weather details from the Dark Sky API!