Todays Weather

index.jade

main.animated.fadeIn
  section
    span#weatherIcon.animated I need to know where you are
  section#weather
    span 
    //img(src="http://userpages.umbc.edu/~ka12/codePen_Assets/meteocons-icons/SVG/43.svg")
  section#location
    span 
    //img(src="http://userpages.umbc.edu/~ka12/codePen_Assets/meteocons-icons/SVG/44.svg")
  section#temp
    span#f
      //img(src="http://userpages.umbc.edu/~ka12/codePen_Assets/meteocons-icons/SVG/47.svg")
    span#c
      //img(src="http://userpages.umbc.edu/~ka12/codePen_Assets/meteocons-icons/SVG/46.svg")
    div#log

script.js

if (navigator.geolocation) {
  var weatherAPI = "5dc14da09b480287c9f94e439eceff61";
  var lat, lon, url;
  navigator.geolocation.getCurrentPosition(function(position) {
    //console.log("latitude: " + position.coords.latitude + "longitude: " + position.coords.longitude);
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    url = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&cluster=yes&format=json&APPID=" + weatherAPI;
    //console.log(url);
    $.getJSON(url, function(json) {
      //console.log(JSON.stringify(json));
      var k = json.main.temp;
      var f = 1.8 * (k - 273) + 32;
      var c = k - 273;

      // output tempature to users
      //console.log('Temp F: ' + f);
      $('#temp #f').html(f.toFixed(2) + ' °F <br>');
      //console.log('Temp C: ' + c);
      $('#temp #c').html(c.toFixed(2) + ' °C');
      // output users location
      var location = json.name + ', ' + json.sys.country;
      $('#location').html(location);
      // output look of weather
      var weather = json.weather[0].description;
      var weatherIcon = 'http://openweathermap.org/img/w/' + json.weather[0].icon + '.png';
      $('#weather').html(weather);
      console.log(weatherIcon)
        // Change look of page based on "weather"
        //$('div').css('background-image','url(http://userpages.umbc.edu/~ka12/codePen_Assets/weather-icons-set.png)');
      $('#weatherIcon').replaceWith('<img src=' + weatherIcon + '>');
    });
  });
}

$(document).on("mousemove", function(e) {
  var pageY = e.pageY;
  var pageX = e.pageX;
  console.log(pageY);

  function colorChange() {
    $('main').css('background-image', 'linear-gradient(#' + pageX + ' ,#' + pageY + ')');
  };
  setTimeout(colorChange, 220);

  //$( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.sass

$g1: rgb(random(255),random(255),random(255))
$g2: rgb(random(255),random(255),random(255))

body
  color: white
  font-family: verdana
  text-transform: uppercase
  font-size: 2em
  
main
  position: absolute
  top: 0
  bottom: 0
  left: 0
  right: 0
  width: 100%
  background-color: blue
  background-image: linear-gradient($g1 , $g2)
  padding-top: 10%
img
  width: 100%
  
body
  //width: 960px
  //margin: 0 auto
  
body > *
  margin: auto
  //width: 500px
  //border: 1px solid blue
  //display: block
  overflow: auto

section
  margin-top: 5%
  overflow: hidden
  text-align: center
  
#weatherIcon
  height: 50px
  width: 50px
  padding: 0px
  margin: 0px
  
img
  height: 50px
  width: 50px

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />

todays-weather.markdown

Todays Weather

FREE CODE CAMP PEN! Learned lots.

A Pen by Kameron Robinson on CodePen.

License.