WEATHER APP

In this example below you will see how to do a WEATHER APP with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by divi-The-Great, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright divi-The-Great ©
  • HTML
  • CSS
  • JavaScript
    <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 DIVI</h6>
	</div>
</div> <!-- END FOOTER -->

/*Downloaded from https://www.codeseek.co/divi-The-Great/weather-app-BZqpQL */
    body {
	font-family: 'Raleway', sans-serif;
	letter-spacing: 2px;
  background: white;
  opacity: 0;
}
.fill {
	height: 100vh;
	margin-bottom: 0;
	 }
.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%; }
}


/*Downloaded from https://www.codeseek.co/divi-The-Great/weather-app-BZqpQL */
    
$(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
});


Comments