neue-wetterapi-dutch-ip-adressen-finden.php
Quell Code
<link rel="stylesheets" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheets" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css">
<link rel="stylesheets" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons-wind.min.css">
<link rel="stylesheets" href="https://codepen.io/username/pen/aBcDef">
<style>
@charset "UTF-8";
input:focus {
outline: none;
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
body {
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 0;
background-image: linear-gradient(45deg, #fff, #924da3);
background-repeat: no-repeat;
background-size: cover;
padding: 1em 0;
height: 100vh;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
h1 {
font-family: "Montserrat", sans-serif;
color: #fff;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.6);
margin: 0 0 0.4em;
}
.main {
width: 90%;
padding: 1.5em;
max-width: 350px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 0 12px 15px rgba(0, 0, 0, 0.1);
}
.timeBlock {
margin-bottom: 1em;
}
form {
position: relative;
margin-bottom: 0.5em;
}
.location {
text-align: center;
font: 1.1em/1em "Open Sans", sans-serif;
font-weight: bold;
width: 100%;
padding: 2px;
border-radius: 5px;
border-color: #924da3;
}
.location-search {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 4em;
height: 99%;
background: transparent;
border: 0;
border-radius: 0 5px 5px 0;
cursor: pointer;
transition: background-color 0.5s;
}
.location-search:hover {
background-color: #924da3;
}
.location-search:hover:before {
color: #fff;
}
.location-search:before {
content: "?";
font-family: "FontAwesome";
font-size: 1.6em;
}
.forecast-temp {
font-size: 3em;
line-height: 1em;
font-weight: bold;
cursor: pointer;
}
.forecast-status .wi {
font-size: 4em;
color: #924da3;
padding-top: 0.4em;
}
.forecast-status .status {
font-size: 1.5em;
margin-top: 0.5em;
}
section {
display: flex;
flex-wrap: wrap;
margin: 1em auto;
}
section div {
width: 50%;
padding-left: 25px;
}
section div .wi {
font-size: 1.5em;
color: #924da3;
}
.copy {
font: 0.8em/1.25em "Open Sans", sans-serif;
color: #fff;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.6);
margin: 1em;
}
.copy a {
color: inherit;
}
.copy i {
text-shadow: 0 0 5px #fff;
}
.beforeText {
margin-right: 8px;
cursor: pointer;
}
.checkbox {
vertical-align: top;
margin: 0 3px 0 0;
width: 17px;
height: 17px;
}
.checkbox + label {
cursor: pointer;
}
.checkbox:not(checked) {
position: absolute;
opacity: 0;
}
.checkbox:not(checked) + label {
position: relative;
padding: 0 0 0 60px;
}
.checkbox:not(checked) + label:before {
content: "";
position: absolute;
top: -4px;
left: 0;
width: 50px;
height: 26px;
border-radius: 13px;
background: #CDD1DA;
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.checkbox:not(checked) + label:after {
content: "";
position: absolute;
top: -2px;
left: 2px;
width: 22px;
height: 22px;
border-radius: 10px;
background: #FFF;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: all 0.2s;
}
.checkbox:checked + label:before {
background: #9FD468;
}
.checkbox:checked + label:after {
left: 26px;
}
.alert {
display: none;
position: fixed;
z-index: 999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75%;
max-width: 450px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
.alert-close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
<h1>FreeC<i class="wi wi-night-sleet"></i>deCamp<br> Weather App</h1>
<div class="main">
<div class="timeBlock">
<span id="date"></span> | <span id="time"></span>
</div>
<form>
<input type="text" id="location" class="location" value="" />
<button type="submit" class="location-search"></button>
</form>
<div class="forecast-temp">
<span id="temperature"></span><span id="unit">°C</span>
</div>
<div class="forecast-status">
<div class="wi"></div>
<div id="status" class="status"></div>
</div>
<section>
<div>
<span class="wi wi-sandstorm"></span>
<span class="windSpeed"></span> <span class="windSpeedUnit">km/h</span>
</div>
<div>
<span class="wi wi-barometer"></span>
<span class="pressure"></span>
</div>
<div>
<span class="wi wi-wind towards-0-deg"></span>
<span class="windDirection"></span>
</div>
<div>
<span class="wi wi-humidity"></span>
<span class="humidity"></span>
</div>
</section>
<div class="switch">
<span class="beforeText">Imperial</span>
<input id="convertSystem" type="checkbox" class="checkbox">
<label for="convertSystem">Metric</label>
</div>
</div>
<div class="copy">made with <i class="fa fa-heart"></i> by <a href="https://www.linkedin.com/in/andreidushkou/" target="_blank">@burn1ng</a></div>
<!-- <div class="alert">
<i class="alert-close fa fa-close"></i>
<span>Please, use http:// in URL adress <a href="https://codepen.io/burn1ng/full/MmmLQy" target="_blank">https://codepen.io/burn1ng/full/MmmLQy</a> in order for OpenWeatherMap to work</span>
</div> -->
</div>
<script>
/* you can use only http:// protocol because OpenStreetMap works only via http for free */
/* that's why i use https://cors-anywhere.herokuapp.com/ */
var unit = "C"; //set flag for Default value
$(".checkbox").prop("checked", "checked"); //set Metric by Default
function getLocation() {
$.get("https://ipapi.co/json", function(data) {
getWeather(data.city);
});
}
function getWeather(city) {
var api = "https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?q=";
var units = "&units=metric";
var appid = "&APPID=061f24cf3cde2f60644a8240302983f2";
var $http = api + city + units + appid;
$.getJSON($http, function(data) {
console.log(data);
temp = data.main.temp.toFixed(0);
status = data.weather[0].description;
iconId = data.weather[0].id;
pressure = data.main.pressure ? Math.round(data.main.pressure) : "N/A ";
humidity = data.main.humidity ? Math.round(data.main.humidity) : "N/A ";
windSpeed = data.wind.speed ? (data.wind.speed * 3.6).toFixed(0) : "N/A ";
windDirection = data.wind.deg ? data.wind.deg.toFixed(0) : "N/A ";
city = data.name;
country = data.sys.country;
var hours = new Date().getHours();
var dayOrNight = hours > 6 && hours < 22 ? "day" : "night";
inputTextValue = city + ", " + country; // change global var
$("#location").val(inputTextValue); //and insert new Location in field
$(".forecast-status")
.find(".wi")
.addClass("wi-owm-" + dayOrNight + "-" + iconId);
$("#temperature").text(temp);
$("#status").text(status[0].toUpperCase() + status.slice(1));
$(".pressure").text(pressure + " hPa");
$(".humidity").text(humidity + " %");
$(".windSpeed").text(windSpeed);
$(".windDirection").text(
windDirection + "deg " + degToCompass(windDirection)
);
$(".wi-wind").addClass("towards-" + windDirection + "-deg");
changeBackground(iconId);
});
}
function degToCompass(num) {
var val = Math.floor(num / 22.5 + 0.5);
var arr = [
"(N)",
"(NNE)",
"(NE)",
"(ENE)",
"(E)",
"(ESE)",
"(SE)",
"(SSE)",
"(S)",
"(SSW)",
"(SW)",
"(WSW)",
"(W)",
"(WNW)",
"(NW)",
"(NNW)"
];
return arr[val % 16] || "";
}
function convertSystem() {
if (unit == "F") { //Convert to C and km/h
unit = "C";
windSpeedUnit = "km/h";
temp = Math.round((temp - 32) * 5 / 9 * 10 / 10);
windSpeed = Math.round(windSpeed * 1.609344 * 10 / 10);
} else if (unit == "C") { //Convert to F and mph
unit = "F";
windSpeedUnit = "mph";
temp = Math.round((temp * (9 / 5) + 32) * 10 / 10);
windSpeed = Math.round(windSpeed * 0.62137119223733 * 10 / 10);
}
$("#temperature").text(temp);
$("#unit").text("°" + unit);
$(".windSpeed").text(windSpeed);
$(".windSpeedUnit").text(windSpeedUnit);
}
function getDate() {
var d = new Date();
var date = d.toLocaleDateString();
$("#date").html(date);
}
function getClock() {
var d = new Date(), h = d.getHours(), m = d.getMinutes(), s = d.getSeconds();
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
$("#time").text(h + ":" + m + ":" + s);
var t = setTimeout(getClock, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;// add zero in front of numbers < 10
}
return i;
}
getDate();
getClock();
getLocation(); // send requests for location, after success - for weather
window.onkeyup = keyup;
var inputTextValue;
function keyup(e) {
//setting your input text to the global Javascript Variable for every key press
inputTextValue = e.target.value;
if (e.keyCode == 13) {
console.log(inputTextValue);
if(~inputTextValue.indexOf(",")) inputTextValue = ""; //prevent repeat sending
getWeather(inputTextValue);
}
}
function changeBackground(iconId) {
var bckimg = "";
switch (iconId) {
case 200:
case 201:
case 230:
case 231:
bckimg = "https://s20.postimg.org/ml612c8dp/lightning_962789_1920.jpg";
break;
case 210:
case 211:
bckimg = "https://s20.postimg.org/42sy9zsrx/thunderstorm_50428.jpg";
break;
case 202:
case 212:
case 221:
case 232:
bckimg = "https://s20.postimg.org/h1ppfw771/norman_79860.jpg";
break;
case 300:
case 301:
case 302:
case 310:
bckimg = "https://s20.postimg.org/zbx8c4z8t/drip_8763_1920.jpg";
break;
case 311:
case 312:
case 313:
case 314:
case 321:
bckimg = "https://s20.postimg.org/vng9krn1p/rain_645797_1920.jpg";
break;
case 500:
case 501:
bckimg = "https://s20.postimg.org/5rse77crx/japan_1160738_1920.jpg";
break;
case 502:
bckimg = "https://s20.postimg.org/b4h8lc0od/flower_315445.jpg";
break;
case 503:
bckimg = "https://s20.postimg.org/eqn1xz71p/rain_462828.jpg";
break;
case 504:
bckimg = "https://s20.postimg.org/rkur26g6l/thunderstorm_408720.jpg";
break;
case 511:
bckimg = "https://s20.postimg.org/bqxrrw419/ice_658423_1920.jpg";
break;
case 520:
case 521:
bckimg = "https://s20.postimg.org/nzp883fxp/its_raining_422539_1920.jpg";
break;
case 522:
case 531:
bckimg = "https://s20.postimg.org/6dqjusmlp/water_815271_1920.jpg";
break;
case 600:
case 601:
case 602:
bckimg = "https://s20.postimg.org/ovqb1aezx/girl_926020_1920.jpg";
break;
case 602:
bckimg = "https://s20.postimg.org/7y9nyez59/bicycles_1176560_1920.jpg";
break;
case 611:
case 612:
bckimg = "https://s20.postimg.org/v3bccb6gd/ice_591137_1920.jpg";
break;
case 615:
case 616:
bckimg = "https://s20.postimg.org/tah5w3j3h/tree_550633_1920.jpg";
break;
case 621:
case 622:
bckimg = "https://s20.postimg.org/z72nty6p9/hut_1025006_1920.jpg";
break;
case 701:
bckimg = "https://s20.postimg.org/5gahb2fe5/italy_634155.jpg";
break;
case 711:
bckimg = "https://s20.postimg.org/kmqmw8i25/kairo_918804_1920.jpg";
break;
case 721:
bckimg = "https://s20.postimg.org/60ukavey5/forest_54555_1920.jpg";
break;
case 731:
case 741:
case 751:
case 761:
bckimg = "https://s20.postimg.org/ej92cbrsd/monument_valley_482726_1920.jpg";
break;
case 771:
bckimg = "https://s20.postimg.org/x84fli5wt/coast_520504_1920.jpg";
break;
case 781:
bckimg = "https://s20.postimg.org/wi2t6suwd/tornado_541911.jpg";
break;
case 800: //clear sky
bckimg = "https://s20.postimg.org/uddurz3vx/blue_sky_299764_1920.jpg";
break;
case 801: //few clouds
bckimg = "https://s20.postimg.org/j6num7cz1/rhodes_89585_1920.jpg";
break;
case 802: //scattered clouds
bckimg = "https://s20.postimg.org/ii0rent65/pier_569314_1920.jpg";
break;
case 803: //broken clouds
bckimg = "https://s20.postimg.org/5w4l6fbsd/sky_264778.jpg";
break;
case 804: //overcast clouds
bckimg = "https://s20.postimg.org/tpnubdfn1/grove_of_trees_977412_1920.jpg";
break;
case 900: //tornado
bckimg = "https://s20.postimg.org/wi2t6suwd/tornado_541911.jpg";
break;
case 901: //tropical storm
bckimg = "https://s20.postimg.org/n1vu2ilil/stormy_240926_1920.jpg";
break;
case 902: //hurricane
case 962:
bckimg = "https://s20.postimg.org/5ubtanzhp/beach_768587.jpg";
break;
case 903: //cold
bckimg = "https://s20.postimg.org/3y2im68od/robin_675262.jpg";
break;
case 904: //hot
bckimg = "https://s20.postimg.org/wst5shjzh/maldives_666118_1920.jpg";
break;
case 905: //windy
bckimg = "https://s20.postimg.org/x84fli5wt/coast_520504_1920.jpg";
break;
case 906: //hail
bckimg = "https://s20.postimg.org/n20fg9awd/hail_844337_1920.jpg";
break;
case 951:
bckimg="https://s20.postimg.org/7e9qzjcdp/hot_air_balloons_1253229.jpg";
break;
case 952:
case 953:
bckimg="https://s20.postimg.org/6o34b97jh/grasses_419891_1920.jpg";
break;
case 954:
case 955:
case 956:
bckimg="https://s20.postimg.org/fx5aldgfh/seabreeze.png";
break;
case 957:
bckimg="https://s20.postimg.org/4l1fbp5kd/breakwater_379252_1920.jpg";
break;
case 958:
case 959:
bckimg="https://s20.postimg.org/5ubtanzhp/beach_768587.jpg";
break;
case 960:
bckimg = "https://s20.postimg.org/pg4vklral/storm_691286_1920.jpg";
break;
case 961: //violent storm
bckimg = "https://s20.postimg.org/uuid04j1p/storm_clouds_1081942_1920.jpg";
break;
default:
break;
}
$("body").css("backgroundImage", "url(" + bckimg + ")");
$("body").css("height", "auto"); //fix
}
$(document).ready(function() {
// if (window.location.protocol != "http:") {
// $(".alert").fadeIn();
// } else {
// $(".alert").hide();
// }
// $(".alert-close").on("click", function() {
// $(".alert").fadeOut();
// });
$("#location").on("click", function() {
$(this).val("");
inputTextValue = ""; //clean global var
});
$('form').submit(function () {
if(~inputTextValue.indexOf(",")) inputTextValue = ""; //prevent repeat sending
getWeather(inputTextValue);
return false; // don't refresh
});
$("#convertSystem").on("change", function() {
convertSystem();
});
$(".beforeText, .forecast-temp").on("click", function() {
$(".checkbox").prop("checked", function(idx, oldProp) {
return !oldProp;
});
convertSystem();
});
});
</script>