cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              
<body>

  <div class="container">

    <div class="row">
      <div class="col-md-12">
        <h1>Your Local Weather</h1>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <h2 id="city">Bratislava</h2>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <i id="iconT" class='wi wi-time-3'></i>
      </div>
      <div id="time" class="col-md-6">
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <h2 id="mainW">weather</h2>
      </div>
      <div class="col-md-6">
        <h2 id="descW">weather</h2>
      </div>
    </div>

    <div id="wBackground" class="row">
      <div class="col-md-6">
        <i id="icon1" class='wi wi-day-sunny'></i>
      </div>
      <div id="temp" class="col-md-6">
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <i id="icon2" class="wi wi-day-sunny"></i>
      </div>
      <div id="wind" class="col-md-6">

      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <i id="icon3" class="wi wi-humidity"></i>
      </div>
      <div id="humidity" class="col-md-6">

      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div id="fc" class="btn btn-lg btn-primary"><span>Fahrenheit/Celsius</span> </div>
      </div>
    </div>

  </div>


</body>


            
          
!
            
              /*
* {
  outline: 1px solid black;
}
*/
body,
html {
  margin : 0 auto;

}

body {
font-family: 'Indie Flower', cursive;
text-shadow: 2px 2px grey;
  width: 100%;
  height: 100%;
background: url("https://github.com/atre7/Weather/blob/master/Sun2heightUp.jpg?raw=true") no-repeat  center center  ;

}
.container {
max-width:960px !important;
}
.row {
  margin: 15px ;
  padding: 15px;
  text-align: center;
  border: 3px solid white;
  border-radius: 10px;
  background-color: rgba(255, 77, 255, 0.5);
}
h1 {
  font-size: 3em;
  font-family: 'Indie Flower', cursive;

}
#time {
  font-size: 30px;
}
#temp,#wind,#humidity {
  font-size: 50px;
}
#city {
  font-size: 40px;
}
#descW {
  letter-spacing: 10px;
}
i {
  font-size: 70px;
}
#wBackgroundX {

  background: url("https://github.com/atre7/Weather/blob/master/sunCloudsRes.jpg?raw=true") no-repeat center center;
}
#fx {
  display: block;
    margin: auto;
    width: 100%;
  opacity: 0.6;
  font-size: 2em ;
  letter-spacing: 3px;
}
#fc:hover , #fc:focus {
  opacity: 1;
}
            
          
!
            
              $(function() { // jQuery
  var showTime = 0;
  /*  var showClock = setInterval(function() {
      $('#iconT').removeClass();
      $('#iconT').addClass("wi wi-time-" + showTime);
      showTime++;
    }, 100);

    if (showTime > 12) {
      getLocation();
      clearInterval(showClock);

    }
  */

  var units = "metric";
  // position IP
  //locationIP();

  // c = (f-32) *5/9
  // f = c* 9/5 +32
  function locationIP() {

    $.get("http://ipinfo.io", function(location) {

      console.log("IP pos " + location.loc);
      console.log(location.city);
      console.log(location.country);

      weatherByPos(location.loc, " IP position", units);
    }, "json");


  }
  // position navigator
  getLocation();

  function getLocation() {
    console.log("units " + units);
    if (navigator.geolocation) {
      //  navigator.geolocation.watchPosition(showPosition, showError); getCurrentPosition
      navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
      $('#city').text("Geolocation is not supported by this browser.");
    }
  }

  function showPosition(position) {
    $('#city').text("Latitude: " + position.coords.latitude +
      "  Longitude: " + position.coords.longitude);
    console.log("gpsPosition");
    weatherByPos(position.coords.latitude + "," + position.coords.longitude, " GPS position", units);
  }

  function showError(error) {
    switch (error.code) {
      case error.PERMISSION_DENIED:
        $('#city').text("User denied the request for Geolocation. Position IP is used.");
        locationIP();
        break;
      case error.POSITION_UNAVAILABLE:
        $('#city').text("Location information is unavailable.");
        locationIP();
        break;
      case error.TIMEOUT:
        $('#city').text("The request to get user location timed out.");
        locationIP();
        break;
      case error.UNKNOWN_ERROR:
        $('#city').text("An unknown error occurred.");
        locationIP();
        break;
    }
  }

  var options3 = {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    ur12: false
  }

  function localDate(d) {
    var dateobj = new Date(d);
    function pad(n) {
      return n < 10 ? "0" + n : n;
    }

    var result = pad(dateobj.getDate()) + "/" + pad(dateobj.getMonth() + 1) + "/" + dateobj.getFullYear();
    return result;
  }
  // weather lat lon

  //  weatherByPos();
  function weatherByPos(pos, status, units) {

    var lat = 48;
    var lon = 17;
    var latlon = pos.split(",");
    lat = latlon[0];
    lon = latlon[1];

    //  var units = "metric";
    var url = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&units=" + units + "&APPID=37c56062e5723ab31907e1f5fa58f823";
    $.getJSON(url, function(w) {
      var windDeg = w.wind.deg ;

      console.log(w);
      console.log("icon id : " + w.weather[0].icon);
      console.log("id : " + w.weather[0].id);

      console.log("wind deg " + w.wind.deg + " speed " + w.wind.speed);
      console.log(status + " " + w.name);
      console.log(status + " " + w.main.temp);
      $('#iconT').removeClass();
      var t12 = new Date().getHours();
      if (new Date().getHours() > 12) {
        t12 = new Date().getHours() - 12;
      }
      console.log(new Date().getHours());
      console.log("t12 " + t12);

      $('#iconT').addClass("wi wi-time-" + t12);
      $('#time').text(new Date(w.dt * 1000).toLocaleDateString("sk-sk", options)); // milisec to sec

      $('#temp').text(w.main.temp);
      if (units === "metric") {
        $('#temp').append("<i class='wi wi-celsius'></i>");
      } else {
        $('#temp').append("<i class='wi wi-fahrenheit'></i>");
      }
      $('#city').text(w.name);

      $('#mainW').text(w.weather[0].main);
      console.log("main " + w.weather[0].main);
      $('#descW').text(w.weather[0].description);

      if (w.weather[0].main === "Rain") {
        $('#wBackground').css("background", "url('https://github.com/atre7/Weather/blob/master/RainRes.jpg?raw=true') no-repeat center center");
      } else if (w.weather[0].main === "Clouds") {
        $('#wBackground').css("background", "url('https://github.com/atre7/Weather/blob/master/sunCloudsRes.jpg?raw=true') no-repeat center center");
      } else {
        $('#wBackground').css("background", "url('https://github.com/atre7/Weather/blob/master/Sun2Res.jpg?raw=true') no-repeat center center");
      }

      $('#icon1').removeClass();
      $('#icon1').addClass(getIcon(w.weather[0].id));
      // wind
      $('#icon2').removeClass();
      $('#icon2').addClass("wi wi-wind towards-" + windDeg + "-deg fi-fw");
      $('#wind').text(w.wind.speed + " m/s");
      // humidity
      $('#humidity').text(w.main.humidity + " %");

    });
  }
  // time
  var options = {
    weekday: 'long',

    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',

    ur12: false
  };



  function getIcon(id) {
    switch (id) {
      case 800 : console.log("800");
        return 'wi wi-day-sunny';
        break;
      case 801 : console.log("801");
        return 'wi wi-day-cloudy';
        break;
      case 802 : console.log("802");
        return 'wi wi-cloudy';
        break;
      case 803 : console.log("803");
        return 'wi wi-cloudy-gusts';
        break;
      case 804 : console.log("803");
        return 'wi wi-cloudy-gusts';
        break;
      case 521 : console.log("521");
        return 'wi wi-showers';
        break;
      case 500 :
        return 'wi wi-rain';
        break;
      case 501 :
        return 'wi wi-rain';
        break;
      case 502 :
        return 'wi wi-rain';
        break;
      case 503 :
        return 'wi wi-rain';
        break;
      case 504 :
        return 'wi wi-rain';
        break;
      case 211 :
        return 'wi wi-thunderstorm';
        break;
      case 601 :
        return 'wi wi-snow';
        break;
      case 701 :
        return 'wi wi-fog';
        break;
      default : return 'wi wi-day-fog';
    }
  }

  // farenhait to celsius convert or reverse
  $('#fc').click(function() {
    console.log("1" + units);
    if (units === "metric") {
      units = "imperial";
      getLocation();
      console.log("2" + units);
    } else {
      units = "metric";
      getLocation();
      console.log("2" + units);
    }
  })
}) // jQuery end

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console