Category: Projects

Open Weather Map API – Retrieving Weather Info

Today, we are going to make a small project connecting to a Open Weather API, retrieve its information depending in the state and country, show it to the user, and in the next post we will add a 5-day forecast to our project. Here is the link to their official site, so you can check their documentation, which is very important to read since it if ask ourselves how to make “X” thing.

Let’s get started

I used Netbeans to create the project, however, you can use any text editor for this, even with notepad. The technologies that will be used in this project are:

  • HTML
  • CSS
  • Javascript

First, let’s create a new project in Netbeans or in your favorite text editor as shown in the following image:

Create Project

Note: This is my project structure, you can do something similar to mine.

Project Structure

Now, let’s create a new javascript file, we will call it “mainWeather”. Remember to add Jquery. Now that you have created a JS file, let’s add it:

<!DOCTYPE html>
<html>
    <head>
        <title>Open Weather API</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <script type="text/javascript" src="resources/js/jquery.js">
        <script type="text/javascript" src="resources/js/mainWeather.js"></script>
    </body>
</html>

After doing so, let’s add one input for the city and another one for the country as well as a button to submit the information.

<!DOCTYPE html> <html> <head> <title>Open Weather API</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div id="UserArea"> <div id="stateWrapper"> <input type="text" id="cityInput" placeholder="Enter a State"/> </div> <br/> <div id="countryWrapper"> <input type="text" id="countryInput" placeholder="Enter a Country"/> </div> <br/> <div id="buttonArea"> <input type="submit" id="submitWeather"/> </div> </div> <!- USED TO SHOW RESULT --> <div id="WeatherWrapper"> </div> <script type="text/javascript" src="resources/js/mainWeather.js"> <script type="text/javascript" src="resources/js/jquery.js"></script> </body> </html> Read more...