LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

        VERY Specific Weather
      
      
			
      
    

    
      

VERY Specific Weather

F / C

LOADING!!!!!!!!
CSS
html {
  margin: 0;
  padding: 0;
}

body {
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
	background-color: #000;
  font-size: 24px;
  cursor: default;
  font-family: "Press Start 2P";
  line-height: 250%;
  color: #fff;
}

h1 {
  text-align: center;
}

div {
  text-align: center;
}

span {
  cursor: pointer;
}

p {
	color: #000;
}
JS
$(document).ready(function() {
	$( "#loading" ).animate({
    fontSize: "75px"
  }, 5000, function() {
    // Animation complete.
  });
//Get location
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
		var geolookup = "https://api.darksky.net/forecast/1d44419492a5ee9d34dfe49fc56bfc10/" + latitude + "," + longitude + "?exclude=minutely,hourly,alerts,flags";
		console.log(geolookup);
    $.getJSON(geolookup, function(json) {
			$("p").css("color", "#fff");
			$("#loading").remove();
			console.log("api up & running");
      var weatherType = json.currently.summary;
      var temperatureF = json.currently.temperature.toFixed(10);
      var temperatureC = ((temperatureF - 32) / 1.8).toFixed(10);
			console.log(temperatureF + " " + temperatureC)
      $("#temperature").html(temperatureF);
      $("#weather-main").html(weatherType);
      
      //convert from F to C
      $("#f").click(function() {
        $("#f").html('F');
        $("#c").html('C');
        $("#temperature").text(temperatureF);
      });
      $("#c").click(function() {
        $("#f").html('F');
        $("#c").html('C');
        $("#temperature").text(temperatureC);
      });
      
      //whether the time is before or after sunset
      var now = json.currently.time;
      console.log(now);
      var sunset = json.daily.data[0].sunsetTime;
			console.log(sunset);
      // gif background determination
      weatherType = weatherType.toLowerCase();
			
			//switch this to a switch 
			var clearDay = weatherType.indexOf("clear") !== -1 && now < sunset;
			var clearNight = weatherType.indexOf("clear") !== -1 && now > sunset;
			var rain = weatherType.indexOf("rain") !== -1;
			var snow = weatherType.indexOf("snow") !== -1;
			var cloudyDay = weatherType.indexOf("cloudy") !== -1 && now < sunset;
			var cloudyNight = weatherType.indexOf("cloudy") !== -1 && now > sunset;
			var storm = weatherType.indexOf("storm") !== -1;
			console.log(clearNight);
      
      switch (true) {
				case clearDay:
					$("body").css('background-image', 'url("https://media.giphy.com/media/ivcVZnZAEqhs4/giphy.gif")');
					$("body").css('color', "#000");
					break;
				case clearNight:
					$("body").css('background-image', 'url("https://media.giphy.com/media/VjJUzwAJ8iIJq/giphy.gif")'); 
					break;
				case rain:
					$("body").css('background-image', 'url("https://media.giphy.com/media/uQN6bqGE66H2E/giphy.gif")'); 
					break;
				case snow:
					$("body").css('background-image', 'url("https://media.giphy.com/media/xTcnTehwgRcbgymhTW/giphy.gif")');     
					break;
				case cloudyDay:
					$("body").css('background-image', 'url("https://media.giphy.com/media/LDlY014tgkONq/giphy.gif")');   
					$("body").css("color", "#000");
					break;
				case cloudyNight:
					$("body").css('background-image', 'url("https://media.giphy.com/media/3o7rc6sa2RvKo8K5EI/giphy.gif")');     
					break;
				case storm:
					$("body").css('background-image', 'url("https://media.giphy.com/media/pbhw4D4n2Vcwo/giphy.gif")');     
					break;
				default:
					$("body").css('background-image', 'url("https://media.giphy.com/media/VxbvpfaTTo3le/giphy.gif")');
					$("body").css('color', '#000');
			};
		
    $.getJSON("https://ipapi.co/json/", function(json) {
      $("#city-name").html(json.city + ", " + json.region_code);
    });
  });
  });
} else {
  $('#body').html("Location services need to be enables to use this website");
}

});
Term
Wed, 12/27/2017 - 07:05

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv