Portfolio Skills

Find Out the Weather Where You Are:

...Loading...

(If content fails to load please ensure location access is granted)

Location

20

degC

Min Temp

20

degC

Max Temp

20

degC

Wind Speed

5

m/s

Wind Direction

30 deg

Cold

Weather API Application

What?

Using the location co-ordinates built into the browser this mini-project provides information about the weather where the user is. It provides a temperature in degree celcius, wind speed and wind direction as well as an icon visually displaying current weather.

Why?

This can be applied for any geographical information required and can be used to personalize the website for users. Having a feature letting them know the weather can be useful for a lot of applications. This example can also be personalized more by adding expected rainfall, alternate units such as degF or even sunrise and sunset timings.

How?

The layout was created in HTML but the main content set not to display until the Javascript query was loaded to ensure information was accurate. Basic CSS styling and layouts were added to give a streamlined appearance. Within Javascript an API query to Open Weather Map was performed combined with location data. The required data was then extracted from the API response and formatted as needed. An arrow was also added to show wind direction that will rotate based on the current direction of the wind.