FCC Local Weather App with HTML5 Geolocation and FCC Weather API

My FCC Local Weather App

I just finished my FreeCodeCamp Local Weather App yesterday. As a developer, I find it important to document my works. Because whenever I learn or study someone else’s work, I go straight to its documentation.

There are three user stories to complete the challenge:

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

A Brief Look: Design

In creating an app, I frequently create the design first. Whether I sketch it in a notepad, create it on a design and prototyping tool like Figma or Adobe XD. I conceptualize on how the weather app will be used. I also looked for inspiration on google, dribbble and other’s works.

Simplicity was in my mind in creating the design. I decided on Montserrat for the font. You can also look up and use Google Fonts for your app. Then decided on a color palette.

Now for my resources, I decided on Bootstrap 4 and jQuery which I am most familiar with. I’ve also used Erik Flowers’ Weather Icons.

Logic: First, look at what is given

The FreeCodeCamp gave a useful advice in doing this challenge:

1. Many internet browsers now require an HTTP Secure (https://) connection to obtain a user's locale via HTML5 Geolocation.
2. We recommend using HTML5 Geolocation to get user location and then use the freeCodeCamp Weather API https://fcc-weather-api.glitch.me which uses an HTTP Secure connection for the weather. Also, be sure to connect to CodePen.io via https://

It is important to take note of the 1st one, because CodePen is Going HTTPS by March 2017. I was wondering for hours why my JavaScript code doesn’t work to only realize I’ve been attempting to load content over http:// instead of https:// .

Now the second one is a generous help, I just need to understand the HTML5 Geolocation then use a Weather API.

HTML5 Geolocation

For the Weather API, it needs two inputs — the latitude and the longitude of the user’s location. That is why this Geolocation API is important.

This is an example from w3schools.

var x = document.getElementById(“demo”);
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = “Geolocation is not supported by this browser.”;
  }
}
function showPosition(position) {
  x.innerHTML = “Latitude: “ + position.coords.latitude + 
 “<br>Longitude: “ + position.coords.longitude; 
}

I just tweaked it a little. Since I want it to load as soon as the app is opened, I didn’t use a function. I just need these:

if (navigator.geolocation) { 
  navigator.geolocation.getCurrentPosition(showPosition);
} else {
  alert(‘Geolocation is not supported in your browser’);
}
\\ Going to edit this function
function showPosition(position) {
  \\ Latitude - position.coords.latitude
  \\ Longitude - position.coords.longitude
}

Well, it depends on how you want your app to work.

FCC Weather API

Now I have my longitude and latitude in which I need for the FCC Weather API. An example of making a request is this: https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139

Combining the Geolocation API and FCC Weather API, my code became like this:

function showPosition(position) {
  var api = “https://fcc-weather-api.glitch.me/api/current?lat=" + position.coords.latitude + “&lon=” + position.coords.longitude;
  $.getJSON(api, function(data){
    // Getting Weather Details
    $("#place").html(data.name + ", " + data.sys.country);
  }
}

In getting data, you can either use the dot (ex: data.main.temp),bracket notation or a combination of it (ex. data.weather[0].icon).

Example FCC Weather API Request

Weather Icons

Because the icon provided in the FCC Weather API didn’t fit the design I had envisioned my app to have, I went to look for another.

I came across with Erik Flowers’ Weather Icon. But I don’t plan on downloading it, I just want to use a link tag. That’s where CDN comes in. I just used a link in https://cdnjs.com/libraries/weather-icons. Then I used it like how I used font awesome icons:

<i class=’wi wi-day-cloudy’ style=’font-size: 7em’></i>

Lastly, I used an if-else statement to select the appropriate icon for the weather. As for the condition for the statement, I look up in the Weather Conditions description for it.

if(data.weather[0].description.indexOf("clouds")!== -1){
  $("#weather-icon").html("<i class='wi wi-day-cloudy' style='font-size: 7em'></i>");   
}
else if(data.weather[0].description.indexOf("clear sky")!== -1){
  $("#weather-icon").html("<i class='wi wi-day-sunny' style='font-size: 7em'></i>");
}
else if(data.weather[0].description.indexOf("rain")!== -1){
  $("#weather-icon").html("<i class='wi wi-rain-wind' style='font-size: 7em'></i>");
}

Thanks for reading!

There are many approaches in tackling a problem. With practice and perseverance, we’ll become a better developer than yesterday. Happy Coding!

Here the link to my Weather App.

Hey, I’ve decided to move to Dev.to. Check out my blog posts here.