FreeCodeCamp Local Weather App Zipline Challenge

Posted by

screenshot-codepen-io_2016-05-31_14-24-00_vk1le6

The project was assigned via FreeCodeCamp.  It’s the second zipline challenge listed under the Intermediate Front End Developments Projects section in the Front End Development Certification category of their web page. The requirements for this project was to make an app where the user obtains the weather locally, they have the option of receiving the weather in Fahrenheit or Celsius if they choose, and an icon or background image should be displayed to reflect the weather.  I learned a lot while working on this project.  I gained some experience in working with APIs, AJAX and JSON.  Also, working on this project helped me to sharpen my HTML, CSS, Bootstrap, and JavaScript skills.  However, I did have some issues come up that were also learning experiences for me.  The issues are as follow:

  •  Chrome version 50 would not allow the geolocation to be obtain from an insecure site.  The site has to have https:// instead of http:// in the URL in order to get the location coordinates. The API that we were recommended to use (Open Weather API) is an insecure site therefore, I had to find another API that is a secure site.  After researching for 30 mins.  I decided to use the Dark  Forecast API. It’s free for 1,000 calls a day.

var getWeather = function(lat, long) { //API with geolocation
	var apiCall = "https://api.forecast.io/forecast/" + "29bbab42b5f516976fdfa806e68d54d6" + "/" +
		+lat + "," + long;
	console.log(apiCall);

	$.ajax({
		url: apiCall,
		dataType: "jsonp",
		success: function(data) {
			var weatherDescrip = data.currently.summary;
			var airMoisture = data.currently.humidity;
			var farenheit = data.currently.temperature;
			var windSpeed = data.currently.windSpeed;
			var weatherIcon = data.currently.icon;
			var weatherObj = {
				weatherDescrip: weatherDescrip,
				airMoisture: airMoisture,
				farenheit: farenheit,
				windSpeed: windSpeed,
				weatherIcon: weatherIcon
			};
			displayWeather(weatherObj);
			console.log("here");
			console.log(data);
		},
		error: function(jqXHR, textStatus, errorThrown) {
			console.log("error getting weather");
			console.log(jqXHR);
			console.log(textStatus);
			console.log(errorThrown);

		}

	});

};

 

  • My next issue was that Dark Forecast’s output didn’t provide a city name for the location.  Instead, it provides the latitude and longitude coordinates.  Now, I had to go back to the drawing board.  It was either find another API on a secure site that will work with Chrome or find an API that can give me the city name with the latitude and longitude coordinates the other API provided.  After some researching,  I decided to use Google Maps Geocoding API. And it worked. I used the following code to get the city name after I received the latitude and longitude from browser geolocation.

Here is my code that addresses this issue.

var getLocationName = function(lat, long) {
	var locationCall = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + long + "&key=AIzaSyCViLYBfAt-182hIVoBJU_4uMOVWRMbTo8";
	console.log(locationCall);

	$.ajax({
		url: locationCall,
		success: function(data) {
			var city = data.results[0].address_components[2].long_name;
			var locObj = {
				city: city
			};
			console.log(city);
			displayLocation(locObj);
		},
		error: function(jqXHR, textStatus, errorThrown) {
			console.log("error getting location");
			console.log(jqXHR);
			console.log(textStatus);
			console.log(errorThrown);
		}

	});
};

  • My final issue, which I haven’t been able to find a solution for deals with my background image that changes to reflect the weather.  Unfortunately, the images will not change on mobile devices even though I wrote my code using responsive web design.  My husband and I tested the app on our phones. I tried it on my iPhone 6 Plus and my husband’s Nexus 5.   I’ve researched this issue, which is a common issue to see if there was a fix.  Unfortunately, there seems to not be one right now.  If any of you reading this has one, please contact me.  I am relieved that the images do change if the user is viewing the app via their desktop.  *Update 5/28/2016*:  I was able to get my pictures to display on both the mobile and desktop platforms last night after posting my blog entry. The problem stemmed from Imgur not displaying the images when the call was sent to their server.  I kept getting a 403 Forbidden error from their servers.  To fix the problem, I decided to host my images on Cloudinary.   The company offers a free hosting service for 75,000 images, 2 GB Managed Storage, and 5 GB Monthly Net Viewing Bandwidth.

Click the link to check out the whole project: https://codepen.io/angiemjohnson95/pen/RaEZzE

 

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