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>