Photo (c) Osman Rana

Weather Forecast Using Open Weather API

Free Code Camp has another intermediate front end development project. And that is called, “Show the Local Weather”.

The user stories that we have to follow are the following:

  1. I can see the weather in my current location.
  2. I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.
  3. I can push a button to toggle between Fahrenheit and Celsius.

They recommended Open Weather Map API. And that’s what I’ll be using.

This is an example of what I will be doing.

HTML Markup

Based on the design I thought, Bootstrap will be a huge help to achieve it.

Using its grid system, I give 4 to the description name and 8 to the data itself for small devices. While for large screens, I give 5 to description name and 7 to the data.


<div class="container">
<h1 class="text-center">Weather Forecast</h1>

<div class="weather-icon">
<!-- <i class="weather-icon"></i> -->
</div>

<div class="row">
<div class="col-sm-4 col-md-5">
<p>Location</p>
</div>
<div class="col-sm-8 col-md-7">
<p class="place"><span class="city"></span>, <span class="country"></span></p>
</div>
</div>

<div class="row">
<div class="col-sm-4 col-md-5">
<p>Temperature</p>
</div>
<div class="col-sm-8 col-md-7">
<button class="temperature"></button>
<button class="fahrenheit"></button>
<p><small>Click the button to toggle between Fahrenheit and Celsius.</small></p>
</div>
</div>

<div class="row">
<div class="col-sm-4 col-md-5">
<p>Weather</p>
</div>
<div class="col-sm-8 col-md-7">
<p class="main-weather"></p>
</div>
</div>
</div>

To accomplish user story #3, I put the two buttons for celsius and fahrenheit.

Style your content.

These are the basics styles that I used.


body {
padding-top: 40px;
background-color: #000;
color: #fff;
}

.row {
margin-top: 10px;
padding: 15px;
border-bottom: 1px solid #fff;
}

p {
font-size: 18px;
}

.fahrenheit {
display: none;
}

button {
background: transparent;
color: #fff;
border: 2px solid #fff;
padding: 5px 10px;
margin-bottom: 10px;
transition: 0.3s;
}

button:hover {
background-color: #fff;
color: #000;
letter-spacing: 1px;
}

.row div:first-of-type p {
font-weight: bold;
letter-spacing: 2px;
/* text-transform: uppercase; */
}

.wi {
padding: 20px 0;
text-align: center;
margin: 0 auto;
width: 100%;
font-size: 60px;
}

To toggle the two buttons, I have to hide one button using CSS and then toggle it using jQuery.

The Functionalities

Don’t forget your jQuery.

The goal here is to get the local weather. And in order to get that, we need to identify the current location.

To sum up, :

  1. Get current location.
  2. Get weather data.

We can use the Navigator.Geolocation Web API to return the latitude and longitude of the current location. However, I’ve experienced that it’s not always returning the values.

So I use ipinfo.io. I see that it’s working.

There are various ways to use Open Weather Map API. You can use the coordinates of the current location or the city and the country.

In this project, I used the city and the country.

Get city and country information.

Using the link, http://ipinfo.io/json, will return our needed information.


function getLocation() {
$.getJSON('http://ipinfo.io/json', function(data){
$(".city").text(data.city);
$(".country").text(data.country);
getWeather(data.city, data.country);
});
}

In order to get the data that we need, we will use getJSON method. The link will return an object and it will be placed into the variable named, data.

Using this object, we can access its properties like the city and the country.

After we get the information needed, we will pass these as arguments into a function called, getWeather().

Identify the weather.


function getWeather(city, country) {
var api = "http://api.openweathermap.org/data/2.5/weather?q=";
api+= city + "," + country;
api += "&units=metric";
api += "&APPID=5fc45619bd9b391525f467e208a20b7c";

$.getJSON(api, function(data) {
temperature = data.main.temp;
fahrenheit = convertToF(temperature);
$(".fahrenheit").text(fahrenheit + " degrees Fahrenheit");
$(".temperature").text(data.main.temp + " degrees Celsius");
$(".main-weather").text(data.weather[0].main);
var weatherIcon = data.weather[0].main;
getWeatherIcon(weatherIcon);
});
}

The first thing this function will do is to form the api to be passed into getJSON method. Using the values that are passed, we can now form the api.

Then, this api will return an object and place it into our data variable.

Remember to set your variables, temperature and fahrenheit.

We can get the temperature in Celsius and convert it, we now have our temperature in Fahrenheit. So just don’t forget to store them in your variables. Even if your fahrenheit is hidden, you can still set it.


function convertToF(celsius) {
var fahrenheit;

fahrenheit = celsius * 9 / 5 + 32;

return fahrenheit;
}

We can tell the weather by accessing the main property of the first element of the weather property. So if you don’t get it, just look into my code and that will explain.

Set the weather icon.

Using the main weather property, we can decide which weather icon to use. And this is up to you now. I passed the value of the main property to the function, getWeatherIcon().


function getWeatherIcon(weather) {
if (weather.toLowerCase().indexOf("clouds") >= 0){
$(".weather-icon").addClass("wi wi-cloudy");
} else if (weather.toLowerCase().indexOf("rain") >= 0) {
$(".weather-icon").addClass("wi wi-rain");
} else if (weather.toLowerCase().indexOf("snow") >= 0) {
$(".weather-icon").addClass("wi wi-snow");
} else if (weather.toLowerCase().indexOf("sun") >= 0) {
$(".weather-icon").addClass("wi wi-day-sunny");
} else if (weather.toLowerCase().indexOf("thunder") >= 0) {
$(".weather-icon").addClass("wi wi-thunderstorm");
} else {
$(".weather-icon").html("<p>Sorry. Not enough icons.</p>");
}
}

You can also decide based on the weather description.

If you’re looking for weather icons, you can use this CDN.

https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css

It’s very easy to use.

I’m not sure with the values that Open Weather API will return. That’s why I’ll just assume and set basic weather descriptions.

I have to make sure the weather variable are all lowercase so I can get accurate results using indexOf method.

Toggle the temperature.

Okay, this is a simple one. Make sure your buttons are marked up consecutively. And the other one is hidden.


$("button").click(function() {
$("button").toggle();
});

Run your script.

Call the getLocation() method to run the script to be processed.


getLocation();

You can see the full code here.

 

And that’s it. That’s how you can get the current weather in your current location.

I hope that you can understand it.

Still, I recommend customizing and experimenting it to achieve your desired result.

Good luck!

 

Love,
Eirin

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s