Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<div id="container">
  
 	<div class="row">

 		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 well text-center">

				<p id="city"> <span class="glyphicon glyphicon-map-marker"> </span> </p>

				<p class="celsius">  </p> <p style="display: none" class="fahrenheit">  </p> 
				<button class="btn btn-info " id="unit" type="submit"> °C / °F</button></br>


			
				<img src="https://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Sunrise.png" class="sunrise"><span class="glyphicon glyphicon-arrow-up" id="sunrise"></span>
				<img src="https://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/256x256/Sunrise.png" class="sunset"><span class="glyphicon glyphicon-arrow-down" id="sunset"></span><br>
				
				<button class="btn btn-info" id="refresh" type="submit"><span class="glyphicon glyphicon-refresh"> </span> </button> <p id="time"></p>
 		</div>
	
	</div>

</div>

              
            
!

CSS

              
                

#container{
  background: url(http://images02.wetter.tv/shutterstock_105012008.jpg/articlecoverimage/2.836.384);
  background-size: cover;
  position:absolute;
  padding:60px 50px 50px 40px;
  width:100%;
 /* height:100%;*/
}

.well{
 background-color: lightblue;
  border: 2px solid black;
  border-radius: 10px;
  color: black;
  font-family: helvetica;
  font-size: 24px;
  opacity: 0.8;
  position:relative;
  width: 25em;
  margin: 0 auto; 
  padding:40px 50px 50px 40px;
}

p{
	text-decoration: none;
	color: black;
}
/*.celsius:hover{
	font-size:  40px;
}
.fahrenheit:hover{
	font-size:  40px;
}*/
.sunrise{
  width: 50px;
  height: 50px;
}

.sunset{
  width: 50px;
  height: 50px;
}
#time{
float: right;
 
}
#refresh{

}
              
            
!

JS

              
                

//var key = 838a8b80f1966761a12b925105ea00f1;

/*  NEWURL:url ="https://fcc-weather-api.glitch.me/api/current?lon="+lon +"&lat="+lat;
*/
/*
	The geolocation API allows the user to provide their location to web application,for privacy reasons the user is asked for
  permission
	geolocation.getCurrentPosition is used to get the current position of the device	
	if the geCurrentPosition method is successful it returns the coordinates
	NOTE: geolocation does not work in chrome! 
  
 API: Aplication Programming Interface
An API enables you to acces a website's data
JSON(JavaScript object notation: key: attribute about an object; value: value of an object i.e(main.temp: 23°C)) is common data format used by API's
in this case the url which is initialized with the fccWeather api represents a javascript Object which holds all the relevant informations 'bout the weather (with the coordinates form geolocation)
the getJSON function loads JSON data from the server using HTTP GET request
if the request doesnt return an error, you handle the received data(weatherType temperature, city.....)



used parameters:
coordinates: coord.lon: city geolocation longitude
			       coord.lat: city geolocation latitude
weather(more info Weather condition codes): 

			    weather.description: weather condition (clear sky...)	
			    weather.icon: weather icon id
main:		  main.temp: temperature default unit kelvin	
sys:      sys.country: countrycode(US,DE..)
			    sys.sunrise: sunrisetime unix UTC	
			    sys.sunset: sunsettime unix UTC	
name: 	  city name
	*/
$(document).ready(function(){


	var long;
	var lat;
  var celsius;
  var fahrenheit;


		navigator.geolocation.getCurrentPosition(function(position){

			long = position.coords.longitude;
			lat = position.coords.latitude; 


	/*	var url = 'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&lang=de'+'&appid=838a8b80f1966761a12b925105ea00f1';
	*/
   var url ="https://fcc-weather-api.glitch.me/api/current?lon="+long +"&lat="+lat;
	$.getJSON(url, function(data){
		var weatherType = data.weather[0].description;	
		var windSpeed = data.wind.speed;
		var icon = data.weather[0].icon;
		var city = data.name;	 
		var country = data.sys.country;
		var sunrise = data.sys.sunrise;
		var sunset = data.sys.sunset;
		var description = data.weather[0].description;  
    var celsius = data.main.temp;
		fahrenheit = celsius + 9/5 +32;
      
		var iconUrl = 'https://cdn.glitch.com/'+icon+'.png';

    weatherType += "<img src="+icon+">";

/*----------------------------Verschiedende Hintergünde-----------------------------*/
/* change the background deoending on the weathercondition*/
		switch(description){
			/*sonnig*/
			case 'clear sky':
			$('#container').css('background', 'url(http://bilder1.n-tv.de/img/bild_des_tages/crop905864/4904992889-cImg_16_9-w680/Die-Sonne-scheint-vom-strahlend-blauen-Himmel-uber-Frankfurt-am-Main-durch-eine-Margeritenblute-in-einem-Vorgarten.jpg)');
			$('#container').css('background-size', 'cover');
			break;
			/*klarer Himmel*/
			case 'clear sky':
			$('#container').css('background', 'url(http://www.20min.ch/diashow/144421/890D68DE9E14925A5441F3BA0AE2B618.jpg)');
			$('#container').css('background-size', 'cover');
			/*leicht bewölkt*/
			case 'few clouds':
			$('#container').css('background', 'url(http://images02.wetter.tv/shutterstock_105012008.jpg/articlecoverimage/2.836.384)');
			$('#container').css('background-size', 'cover');
			break;
						
			case 'few clouds':
			$('#container').css('background', 'url(http://footage.framepool.com/shotimg/qf/630972876-full-moon-moving-clouds-night-sky.jpg)');
			$('#container').css('background-size', 'cover');
			break;
			/*vereinzelte Wolken*/
			case 'scattered clouds':
			$('#container').css('background', 'url(https://s-media-cache-ak0.pinimg.com/736x/d3/64/35/d364350adc8946730df82c91da64b1ff.jpg)');
			$('#container').css('background-size', 'cover');
			break;
			case 'scattered clouds':
			$('#container').css('background', 'url(http://www.chainimage.com/images/bilder-nacht-b%C3%A4ume-wolken-mond-wolf-hintergrundbilder-fotos.jpg)');
			$('#container').css('background-size', 'cover');
			break;
			/*überwiegen bewölkt*/
			case 'broken clouds':
			$('#container').css('background', 'url(http://www.oldskoolman.de/bilder/plog-content/images/hintergrundbilder/1280x800/wallpaper-wolken-duester.jpg)');
			$('#container').css('background-size', 'cover');
			break;
			/*regenschauer*/
			case 'shower rain':
			$('#container').css('background', 'url(http://hd.wallpaperswide.com/thumbs/rain_drops_over_umbrella-t2.jpg)');
			$('#container').css('background-size', 'cover');
			break;
			/*Regen*/
			case 'rain':  
			$('#container').css('background', 'url(http://www.hdbilder.eu/pictures/2012/0817/1/nature-rain-leaves-frogs-water-drops-macro-depth-of-field-redeyed-tree-frog-amphibians-1920x1080-wallpaper-487328.jpg)');
			$('#container').css('background-size', 'cover');
			break;
			/*gewitter*/
			case 'thunderstorm':   
			$('#container').css('background', 'url(http://img.fotocommunity.com/gewitter-die-dunkle-seite-der-macht-ccd49e57-d583-4475-bfa6-c03733939eff.jpg?width=1000)');
			$('#container').css('background-size', 'cover');
			break;

			case 'snow':  
			$('#container').css('background', 'url(https://1.bp.blogspot.com/-g8IsKj97BCM/Ur1bRveNdRI/AAAAAAAAU0U/VHcCYsco6sc/s1600/hintergrundbilder-einer-schone-winterlandschaft-mit-viel-schnee-ein-fluss-mit-baumen-entlang-der-seite-des-wassers-und-ein-sonnenuntergang.jpg)');
			$('#container').css('background-size', 'cover');
			break;
		}

		$('#city').append("" + city +", " +country+  "<br> ");


		$('.celsius').html(celsius+ "°C <br>"+weatherType);
		$('.fahrenheit').html(fahrenheit+ "°F <br>" +weatherType);
		$('#unit').click(function(){
			$('.fahrenheit').toggle();
			$('.celsius').toggle();
		});
/*---------------------Zeit umrechenen-------------------------------------------*/
/*!!REMOVE THIS RETUNDANT SHIT AND CREATE ONE GETDATE-FUNCTION!!!!*/
		var date = new Date(sunrise * 1000);
// Hours part from the timestamp
		var hours = "0" + date.getHours();
// Minutes part from the timestamp
		var minutes = "0" + date.getMinutes();
// Seconds part from the timestamp
		var seconds = "0" + date.getSeconds();

		var sunrise = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
		$('#sunrise').append(sunrise);

		var date = new Date(sunset * 1000);
// Hours part from the timestamp
		var hours = date.getHours();
// Minutes part from the timestamp
		var minutes = "0" + date.getMinutes();
// Seconds part from the timestamp
		var seconds = "0" + date.getSeconds();
		
		var sunset = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
		$('#sunset').append(sunset);

/*------------------------Aktuelle Uhrzeit--------------------------------------*/
			var date = new Date();
			var hours = date.getHours();
			var minutes = "0" + date.getMinutes();
			var seconds = "0" + date.getSeconds(); 
			var date = date.getDate();
			var month = "0" + (date.getMonth()+1);
			var year = date.getFullYear();

			var zeit = date+'/'+month+'/'+year +' '+hours+':'+minutes.substr(-2)+':'+seconds.substr(-2);
			$('#time').append(zeit);

/*-------------------------------Neuladen--------------------------------------*/
	
		$('#refresh').click(function(){
			location.reload(true);

		});
			
		
		console.log(city);	
		console.log(url);	
		console.log(sunrise);
		console.log(icon);

 		});
					
	});


});	

              
            
!
999px

Console