WeatherApi

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

Thumbnail
This awesome code was written by KiuShin, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright KiuShin ©
  • HTML
  • CSS
  • JavaScript
    <!--- background as a chart of the current weather animated maybe with sound ----->
<h1>FREE CODE CAMP ZIPLINE</h1>

<div id = 'todayweather'>
  <h1 id = 'current'>Today</h1>
  <p> <span id = 'loc'></span>, <span id = 'state'></span></p>
  <p><span id = 'temp'>temp</span> <span id = 'convert'>F</span></p>
  <p id = 'weather'>type</p>
  <p id = 'wind'></p>
</div>
<!--- add a weekly fuction to the app --->
 <!--- <div class = 'row'>
<div class = 'col-lg-1.5 weeklyforcast' >
  <h1 id = 'current'>Today</h1>
</div>

<div class = 'col-lg-1.5 weeklyforcast'>
  <h1 id = 'day1'>Today</h1>
</div>

<div class = 'col-lg-1.5 weeklyforcast'>
  <h1 id = 'day2'>Today</h1>
</div>

<div class = 'col-lg-1.5 weeklyforcast'>
  <h1 id = 'day3'>Today</h1>
</div>

<div class = 'col-lg-1.5 weeklyforcast'>
  <h1 id = 'day4'>Today</h1>
 
</div>

<div class = 'col-lg-1.5 weeklyforcast'>
  <h1 id = 'day5'>Today</h1>
</div>
    <div class = 'col-lg-1.5 weeklyforcast'>
  <h1 id = 'day6'>Today</h1>
</div> ---->
 
  
  
</div>

/*Downloaded from https://www.codeseek.co/KiuShin/weatherapi-gRrRrp */
    /*font-family: 'Bowlby One', cursive;
font-family: 'Alfa Slab One', cursive;*/
html{
  height:100%;
}
body{
background-image:;
  repeat: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

h1 {
  margin:0 auto;
  text-align:center;
}

p {
  padding:10px; 
  color:white;
  font-size: 24px;
}

#todayweather {
  background-color:rgba(0, 0, 0, 0.20);
  opacity: 1;
  display: block;
  margin:0 auto;
  width: 500px;
  text-align: center;
  font-family:Alfa Slab One ;
 margin-bottom: 50px;
 Margin-top: 100px;   
}

#todayweather h1 {
  padding: 10px;
  color:white;
  font-size: 40px;
}
/* for F and C convert*/
#convert { 
  color:#f06000;
}








/*
body{
background-image: ;
  repeat: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.weeklyforcast {
    background-color: white;
    display: inline-block;
    margin: auto; 
    padding: 0px;
}

*/


/*Downloaded from https://www.codeseek.co/KiuShin/weatherapi-gRrRrp */
    
$(document).ready(function() {
    // find location
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
   var long = position.coords.longitude;
    var lat = position.coords.latitude;
    var api = "https://crossorigin.me/https://api.darksky.net/forecast/e6fe7bb7bcac17e848e4d88ff7aab20d/" +lat +"," +long;
var apiGoo = "https://crossorigin.me/https://maps.googleapis.com/maps/api/geocode/json?latlng=" +lat + "," +long +"&sensor=true&key=AIzaSyD2VKTFmc4pfYpDY1v22eXZKoWBg0bOfeo";
     
    $.getJSON(api, function(data){
      console.log(data);
      var weatherType = data.currently.summary;
      var F = Math.round(data.currently.temperature);
       var wind = (data.currently.windSpeed).toFixed(1) +' MPH';     
       var C = Math.round((F -32) * 5 / 9);
      var tempSwap = true;

      //$('#loc').html(city);
      $('#weather').html(weatherType);
      $('#temp').html(F + '&#176');
      $('#wind').html(wind);
      $('#convert').click(function(){
    
        
        if(tempSwap===false){
          $('#temp').html(F + '&#176');
          $('#convert').html('F')
          tempSwap = true;
        } else {
          $('#temp').html(C + '&#176');
          $('#convert').html('C')
          tempSwap = false;
        }
      });
      
      
    // background weather  need to create an array instead and make a for loop
      if ( weatherType === 'Clear' ) {
           $('body').css('background-image', 'url(https://balancebox.files.wordpress.com/2012/04/dsc_0494-edit.jpg)');
         } else if (weatherType === 'rain') {
           $('body').css('background-image', 'url(https://skymetweather.com/content/wp-content/uploads/2015/03/healthy-tips-for-a-rainy-day-2.jpg)');
         } else if (weatherType === 'Snow') {
           $('body').css('background-image', 'url(http://www.ourventurablvd.com/wp-content/uploads/2016/11/how-snow-forms.jpg.653x0_q80_crop-smart.jpg');
         } else if (weatherType === 'ThunderStorm') {
           $('body').css('background-image', 'url(http://img2.ph.126.net/LmSnwrLxdYsvbhu-KKHc5Q==/121597190039238290.jpg)');
         } else if (weatherType === 'Partly Cloudy') {
           $('body').css('background-image', 'url(https://static1.squarespace.com/static/57523357c2ea515ccf6c1adb/58dcea75bebafb06e997da9c/58dcece61e5b6cf38585d46b/1490873606398/mostly+cloudy.jpg)');
         } else if (weatherType === 'cloudy') {
           $('body').css('background-image', 'url(https://c1.staticflickr.com/7/6023/5975465375_9c089b6085_b.jpg)');
         } else if (weatherType === 'Hurricane') {
           $('body').css('background-image', 'url(http://www.criticalpower.com/custom/uploads/2015/10/Hurricane_Isabel_from_ISS.jpg)');
         } else if (weatherType === 'tornado') {
           $('body').css('background-image', 'url(http://media.cmgdigital.com/shared/img/photos/2014/03/08/27/16/161135620_1.jpg)');
         } else if (weatherType === 'Hail') {
           $('body').css('background-image', 'url(https://s-media-cache-ak0.pinimg.com/236x/7c/60/3d/7c603d9183ff32c92330780a2ebdcfca.jpg)');
         } else if (weatherType === 'sleet') {
           $('body').css('background-image', 'url(http://whyfiles.org/wp-content/uploads/2011/11/feature_sleet.jpg)');
         } else if(weatherType === 'fog') {
           $('body').css('background-image', 'url(http://img07.deviantart.net/3959/i/2011/335/2/7/foggy_road_1_by_zedlord89-d4htzuw.jpg)');
         }
      
     });
   
    // find city and state
    $.getJSON(apiGoo).done(function(location) {
                $('#state').html(location.results[0].address_components[6].short_name);
                $('#loc').html(location.results[0].address_components[3].long_name);
     
            });
    
     });
    }
  
  // find day of the week
var d = new Date();
var weekday = new Array(7);
weekday[0] =  "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

var n = weekday[d.getDay()];
  var w = weekday[d.getDay(1)];
  

/*$('#current').html(n)
$('#day1').html(w)
$('#day2').html(n + 2)
$('#day3').html(n + 3)
$('#day4').html(n + 4)
$('#day5').html(n + 5)
 $('#day6').html(n + 6) */
  
                 
  
  
                 });
  
     
     

Comments