diedVIPs

html knowhow

Wettervorhersage











Wettervorhersage

So sieht´s aus

Die Vorhersage in Fahrenheit

Quellcode
<html> 
<head>

<style type="text/css"> 
* {box-sizing: border-box;margin: 0;color: #666;font-family: 'Oxygen', san-serif;}
h2 {font-size: 0.9em;margin-bottom: 1em;}
h3 {padding: 0.3em 0;}
p, h3 {font-size: 0.8em;}
.cloud-image {position: absolute;top: 60px; left: 1em;width: 200px; height:145px; background-image:url(http://webdesignertroy.com/dump/blank-200.jpg);}
.weather-description {text-align: left; margin-left: 220px;}
.section {position: relative; margin: 1em 10px 1em 0; padding: 1em 1em 2em 1em; display: inline-block; width: 370px; height: auto; background: #FCFAFA; overflow: hidden;}
.wrapper {width: 100%;}
.container {margin: 20px auto;max-width: 980px; text-align: center;}
.results {font-size: 2em;margin-top: 1em;}
.date {font-size: 1.4em;}
.button {background: #AA6339;color: #fff; outline: none; padding: 10px 20px; margin: 0 8px; border: none; cursor: pointer; transition: 0.5s all;}
.button:hover {background: #803D15;}
input[type=text] {border: solid 2px #AA6339;min-width: 220px; padding: 8px 10px; margin-bottom: 1em; outline: none; transition: 0.7s all;}
input[type=text]:focus {border: solid 2px #803D15;}
.clearfix::after {content: " "; display: table; clear: both;}
.fixed {position: fixed; font-size: 2em; top: 45vh; display: block; width: 100%; left: 0;}
input::-webkit-input-placeholder {font-style: normal;font-weight: 300; text-align: left; font-size: 12px; color: #A6A6A6;}
input::-moz-placeholder {font-style: normal; font-weight: 300; text-align: left; font-size: 12px; color: #A6A6A6;}
input:-moz-placeholder {font-style: normal; font-weight: 300; text-align: left; font-size: 12px; color: #A6A6A6;}
input:-ms-input-placeholder {font-style: normal; font-weight: 300; text-align: left; font-size: 12px; color: #A6A6A6;}


</style>
</head>

<body>
<center>
<div class="wrapper">
<div class="container">
<form>
<input type="text" name="city-name" class="textbox" id="city-name" placeholder="Type city (i.e., 'London')">
<input type="submit" name="button" class="button" id="getWeather" value="7 Tage Vorhersage">
</form>
<h2 id="results" class="results">
<div class="initial">Die Vorhersage</div>
</div></h2>
<div class="clearfix"></div>
</div>
</div>

<script id="weather-spot" type="text/x-handlebars-template">
<div class="section">
<h2 class="date">{{now}}</h2>
<div class="weather-description">
<div id="weather-info">
<h2>Durchschnitt: {{average}}&deg;</h2>
<h3>Höchstwert: {{high}}&deg;</h3>
<h3>Tiefstwert: {{low}}&deg;</h3>
<h3>Morgens: {{morning}}&deg;</h3>
<h3>Nachts: {{nighttime}}&deg;</h3>
<img class="cloud-image" src="https://troyrowthampro.com/dump/clouds/cloud-{{cloudInfo}}.jpg" alt="{{cloudInfoText}}" title="{{cloudInfoText}}">
</div>
</div>
</div>
</script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>

<script>
'use strict';
var getFutureDate = function (day) {
var someDate = new Date();
var numberOfDaysToAdd = day;
someDate.setDate(someDate.getDate() + numberOfDaysToAdd);
var dd = someDate.getDate();
var mm = someDate.getMonth();
var y = someDate.getFullYear();
var d = someDate.getDay();
var month = new Array();
month[0] = 'Januar';
month[1] = 'Februar';
month[2] = 'März';
month[3] = 'April';
month[4] = 'Mai';
month[5] = 'Juni';
month[6] = 'Juli';
month[7] = 'August';
month[8] = 'September';
month[9] = 'Oktober';
month[10] = 'November';
month[11] = 'Dezember';
var day = new Array();
day[1] = 'Montag';
day[2] = 'Dienstag';
day[3] = 'Mittwoch';
day[4] = 'Donnerstag';
day[5] = 'Freitag';
day[6] = 'Samstag';
day[0] = 'Sonntag';
var futureMonth = month[mm];
var futureDay = day[d];
var someFormattedDate = futureDay + ", der " + dd + '. '+ futureMonth + ' '+ y;
return someFormattedDate;
}
var getClouds = function(clouds) {
if ( 100 < clouds && clouds < 90 ) {
// return Cloudy Object
var condition = {
cloudNumber: 6,
cloudText: 'Cloudy'
};
return condition;
} else if ( 89 < clouds && clouds < 60 ) {
var condition = {
cloudNumber: 5,
cloudText: 'Mostly Cloudy'
};
return condition;
} else if ( 59 < clouds && clouds < 30 ) {
var condition = {
cloudNumber: 4,
cloudText:'Partly Cloudy'
};
} else if (29 < clouds && clouds > 20) {
var condition = {
cloudNumber: 3,
cloudText: 'Mostly Sunny'
};
return condition;
} else if ( 19 > clouds && clouds > 10 ) {
var condition = {
cloudNumber: 2,
cloudText: 'Sunny to Mostly Sunny'
};
return condition;
} else {
var condition = {
cloudNumber: 1,
cloudText: 'Sunny'
};
return condition;
}
}
var getWeather = function(theForecast) {
$('#results').html(theForecast.city.name);
var source = $('#weather-spot').html();
var template = Handlebars.compile(source);
for (var i = 1 ; i < theForecast.list.length; i++) {
var futureDate = getFutureDate(i);
var cloudsCondition = getClouds(theForecast.list[i].clouds);
var weatherData = {
now: futureDate,
average: Math.round(theForecast.list[i].temp.day),
high: Math.round(theForecast.list[i].temp.max),
low: Math.round(theForecast.list[i].temp.min),
morning: Math.round(theForecast.list[i].temp.morn),
nighttime: Math.round(theForecast.list[i].temp.night),
cloudInfo: cloudsCondition.cloudNumber,
cloudInfoText: cloudsCondition.cloudText
}
var fullText = template(weatherData);
$('.container').append(fullText);
}
};
var APICall = function(theCity) {
var weatherUrl = "//api.openweathermap.org/data/2.5/forecast/daily?q=" + theCity;
var apiKey = "b0b34e0501286ae903bab8dde901b6ae";
var unitType = "imperial";
var daysTotal = 8;
$.get({
url: weatherUrl + "&APPID=" + apiKey + "&units=" + unitType + "&cnt=" + daysTotal,
success: function(objectFromOWM){
getWeather(objectFromOWM);
},
error: function(){
console.log("error");
}
});
};
$('#getWeather').on('click', function(e){
e.preventDefault();
if( $('#city-name').val().trim() === "" || $('#city-name').val().trim() === null ) {
return;
} else {
$('.section').remove();
var cityName = $('#city-name').val().trim();
$('#city-name').val("");
APICall(cityName);
}
});
</script>
</center>
</body>

</html>










Kontakt    Datenschutz    Impressum