Local Weather App

index.html

<div class="container">
	<div class="panel panel-default fill grad">
		
		<!-- BUTTON TOGGLE - UTILIZES BOOTSTRAP TOGGLE - http://www.bootstraptoggle.com/ -->
		<div class="row">
			<div class="col-xs-12 text-right pad-toggle">
				<input id="unit-convert" type="checkbox" data-toggle="toggle" data-off="F°" data-on="C°" data-size="mini">
			</div>
		</div> <!-- END BUTTON TOGGLE ROW -->
		
		<!-- CITY & STATE HEADER -->
		<div class="row">
			<div class="col-xs-12 text-center pad-me">
				<p><i class="fa fa-map-marker"></i> <span id="city-state"></span></p>
			</div>
		</div> <!-- END CITY & STATE HEADER ROW -->
		
		<!-- COUNTRY HEADER -->
		<div class="row">
			<div class="col-xs-12 text-center">
				<p id="country"></p>
			</div>
		</div> <!-- END COUNTRY HEADER ROW -->
		
		<!-- INSERT WEATHER 'SKYCON' - BY DARKSKY - https://darkskyapp.github.io/skycons/ -->
		<div class="row">
			<div class="col-xs-12 text-center">
				<canvas id="icon1" width="500px" height="500px"></canvas>
			</div>
		</div> <!-- END SKYCON ROW -->

		<!-- LARGE TEMPERATURE READING -->
		<div class="row">
			<div class="col-xs-12 text-center">
				<p id="temperature"></p>
			</div>
		</div> <!-- END TEMPERATURE READING ROW -->
		
		<!-- WEATHER CONDITION DESCRIPTION -->
		<div class="row">
			<div class="col-xs-12 text-center">
				<p id="condition"></p>
			</div>
		</div> <!-- END WEATHER DESCRIPTION ROW -->
		
	</div>
</div>

<!-- CREDITS FOOTER - OUTSIDE OF CONTAINER -->
<div class="footer text-center">
	<div class="container">
		<h6 id="credits">BY <a id="my-name" target="_blank" href="https://codepen.io/jescobedo/full/vyWPrW/">JONERIC ESCOBEDO</a>. INSPIRED (BIG-TIME) BY <a target="_blank" href="https://codepen.io/thelittleblacksmith/">EINA O</a>. POWERED BY <a id="dark-sky" target="_blank" href="https://darksky.net/dev/">DARK SKY</a> AND <a id="geo-coord" target="_blank" href="http://ipinfo.io/">IPINFO.IO</a></h6>
	</div>
</div> <!-- END FOOTER -->

local-weather-app.markdown

Local Weather App

"Local Weather App" is a project as assigned by www.freecodecamp.com. The app pulls your geo-coordinates based on your IP address, and then it makes an API call to DarkSky for the weather in your area. This utilizes Bootstrap for responsive design, a lot of CSS for styling, and JavaScript/jQuery for handling the API call.

Edit: So happy to see many free-code-campers liking the project. I'm a huge fan of freecodecamp and the community there. Keep coding everyone!

A Pen by Jon Eric Escobedo on CodePen.

License.

script.js

/**
 * Title: Local Weather App (www.freecodecamp.com)
 * Author: Joneric Escobedo**
 * Description: This is a local weather application that pulls your geo-coordinates
 * based on your IP address and calls on the Dark Sky API for local weather.
 *
 * **Big thanks to Eina O. @ https://codepen.io/thelittleblacksmith/. Her JavaScript
 * code was well written and commented very well which in turn helped me learn a TON.
 */

$(document).ready(function() {
	$("body").delay(1000).animate({ opacity: 1 }, 700); // Make the app fade-in
	
  // Get geo-coordinates
  $.ajax({
    type: "GET",
    url: "https://ipinfo.io/json/",
    success: coordinates
  });

  // coordinates callback function
  function coordinates(data) {
    var coords = data.loc;
    var city = data.city;
    var region = data.region;
    var country = data.country;

    // Dark Sky API
    var darkSkyAPI = "https://api.darksky.net/forecast/c1c79c93374cb0e0b5e2439d84fd12f5/" + coords + "?exclude=minutely,hourly,daily";

    // Pass city, region, and country to displayLocation
    displayLocation(city, region, country);

    // Pass API url to getWeather
    getWeather(darkSkyAPI);
    
  } // end of coordinates callback

  // displayLocation (pass city, region, and country arguments)
  function displayLocation(city, region, country) {

    // Turn country code into full country name
    $.ajax({
      type: "GET",
      url: "https://restcountries.eu/rest/v1/alpha?codes=" + country,
      success: function(data) {

        // Print to html
        $("#city-state").text((city + ", " + region).toUpperCase());
        $("#country").text((data[0].name).toUpperCase());
      }
    });
  } // end of displayLocation

  // getWeather (pass API URL argument)
  function getWeather(darkSkyAPI) {
    $.ajax({
      type: "GET",
      url: darkSkyAPI,
      dataType: "jsonp",
      success: weather
    });

    // weather function to get darksky JSON data
    function weather(data) {
      var temp = Math.round(data.currently.temperature);
      var icon = data.currently.icon;
      var summary = data.currently.summary;
      //console.log(temp, icon, summary);

      displayWeather(icon, temp, summary);
    } // end of weather

    // displayWeather (pass icon, temp, summary as arguments)
    function displayWeather(icon, temp, summary) {
      //console.log(temp, icon, summary);

      // Using the colored Skycons - https://github.com/maxdow/skycons
      var skycons = new Skycons({"monochrome": false,
                "colors": {
                      "main": "#333333",
                      "moon": "#78586F",
                      "fog": "#78586F",
                      "fogbank": "#B4ADA3",
                      "cloud": "#B4ADA3",
                      "snow": "#7B9EA8",
                      "leaf":"#7B9EA8",
                      "rain": "#7B9EA8",
                      "sun": "#FF8C42"
                    } });

      var tempC = Math.round((temp - 32) * 5/9);
    	$("#temperature").text(temp + "°");

      // Engage 'Bootstrap Toggle'
    	$(function() {
        $('#unit-convert').change(function() {
          if ($(this).prop('checked')){
    				$('#temperature').html(tempC + "° ");
    			} else {
    				$('#temperature').html(temp + "° ");
    			}

        })
      }) // End of 'Bootstrap Toggle'

      $("#condition").text(summary.toUpperCase());

      // Add Skycon based on weather condition
			skycons.add('icon1', icon);
			skycons.play();
    } // end of displayWeather

  } // end getWeather
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/maxdow/skycons/master/skycons.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

style.css

body {
	font-family: 'Raleway', sans-serif;
	letter-spacing: 2px;
	opacity: 0; }
.fill {
	height: 100vh;
	margin-bottom: 0;
	box-shadow: 0 30px 50px rgba(0,0,0,0.3); }
.grad {
  background: white; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #F7D6E0, #E6C79C); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #F7D6E0, #E6C79C); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #F7D6E0, #E6C79C); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to bottom right, #F7D6E0, #E6C79C); /* Standard syntax */ }
.pad-toggle {
	margin-top: 10px;
	padding-right: 25px; }
#city-state {
	font-weight: 700;
	margin-top: 1.5em; }
#country {
	letter-spacing: 3px;
	opacity: 0.8; }
#icon1 {
	max-width: 50%; }
#temperature {
	font-size: 8em;
	font-family: 'Montserrat', sans-serif; }
#condition {
	opacity: 0.8; }
#credits {
	position: relative;
	bottom: 0px; }

/* Re-adjusts the Skycon - this makes the skycon somewhat responsive */
@media only screen and (min-width: 640px) {
    #icon1 {
        width: 25%; }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway:400,500" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet" />