Natac's Weather Application

index.html

<header>
  <h1>Your Local Forecast</h1>
  <h3>By Natac</h3>
</header>

<div class="weather">
  <div class="description"></div>
  <div id="temp"></div>
  <button type="button" id="units" class="flag">&#8451; / &#8457;</button>
  <div class="icon"></div>
  <div class="wind-dir"></div>
</div>

<p class="location"></p>

Natac's Weather Application.markdown

Natac's Weather Application

A Pen by Sean Campbell on CodePen.

License.

script.js

$(document).ready(function() {
  var $weatherdiv = $('.weather');
  var $description = $('.description');
  var $temp = $('#temp');
  var $icon = $('.icon');
  var $wind_dir = $('.wind-dir');
  var $location = $('p.location');
  var $units = $('#units');

  
  
  if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(success, fail);
  } else {
    alert("Sorry, but your browser is not down with this action.");   
  }

      function setWindDirection(degrees) {
      if (degrees <= 22.5 || degrees >= 337.5) { // input will be larger than zero less than 360
        return "N";
      }
      if (degrees > 22.5 && degrees < 67.5) {
        return "NE";
      }
      if (degrees >= 67.5 && degrees <= 112.5) {
        return "E";
      }
      if (degrees > 112.5 && degrees < 157.5) {
        return "SE";
      }
      if (degrees >= 157.5 && degrees <= 202.5) {
        return "S";
      }
      if (degrees > 202.5 && degrees < 247.5) {
        return "SW";
      }
      if (degrees >= 247.5 && degrees <= 292.5) {
        return "W";
      }
      if (degrees > 292.5 && degrees < 337.5) {
        return "NW";
      }
    }

    function setSpeed(meter_sec) {
      return +(meter_sec*1.94384).toFixed(2);
    }

    function setTemp(kelvin) {
      var celsius = +(kelvin - 273.15).toFixed(1);
      var fah = +(celsius*(9/5) + 32).toFixed(2);
      return fah;
    }

    function capFirst(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    }
    
    function getWeatherInfo(api) {
      $.getJSON(api, function(data_obj) {
        var group = data_obj.weather[0].main;
        var icon = "<img src='http://openweathermap.org/img/w/" + data_obj.weather[0].icon + ".png' width=100px height=100px>";
        var temp = setTemp(data_obj.main.temp);
        var wspeed = setSpeed(data_obj.wind.speed);
        var wdir = setWindDirection(data_obj.wind.deg);
        var des = capFirst(data_obj.weather[0].description) + " with a temperature of: ";
        var city = data_obj.name;
        var country;
      
        $location.html("City: " + "<strong>" + city + "</strong>");
        $description.html(des);
        $temp.html(temp + " &#8457;");
        $icon.html(icon);
        $wind_dir.html("<p>" + wdir + " &commat; " + wspeed + " knots</p>");
      });
     }
  
  
  function success(position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
    var weatherAPI = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long;

    getWeatherInfo(weatherAPI);

  }
  
   function fail(err) {
     /* Prompt section
     var city = prompt("Please enter the name a city");
     var country = "";
     var x = true
     while(country.length !== 2) { 
       var country = prompt("Enter 2 chars country code. ex - us,uk,cd"); 
     }
     var weatherAPI = "http://api.openweathermap.org/data/2.5/weather?q=" + city + "," + country;
     */
     var ip, lati, longi, weatherAPI;
     $.getJSON("http://www.telize.com/geoip?", function(json) {

    		ip = json.ip;
    		lati = json.latitude;
	    	longi = json.longitude;
        weatherAPI = "http://api.openweathermap.org/data/2.5/weather?lat=" + lati + "&lon=" + longi;
       getWeatherInfo(weatherAPI);
		});
   }
  
  
   $('#units').click(function() {
    $(this).toggleClass('flag');
    var num = parseFloat($temp.text());
    if($temp.hasClass('cel')) {
      $temp.toggleClass('cel');
      var fah = +(num*(9/5) + 32).toFixed(2);
      $temp.html(fah + " &#8457;");
    } else {
      $temp.toggleClass('cel');
      var cel = +((5/9) * (num-32)).toFixed(2);
      $temp.html(cel + " &#8451;");
    }
    });
  
});

scripts

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

style.css

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: url(http://www.hdwallpapersos.com/wp-content/uploads/2015/04/Weather-is-Not-Fine-Still-Sunlight-is-Pouring-in-Boats-Enjoys-the-Highest-Level-of-Safety-on-Peaceful-Sea-HD-Natural-Scenery-Wallpaper.jpg) no-repeat;
  background-size: cover;
}

body {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  text-align: center;
  font-size: 1.5em;
  color: #FFA375;
}

h1, h3 {
  padding: 0;
  margin: 0;
  text-shadow: 3px -3px 2px #330A00;
}

.weather {
  border-radius: 5px;
  color: #A31919;
  background-color: rgba(255, 223, 184, 0.23);
  margin-right: auto;
  margin-left: auto;
  width: 40%;
  margin-top: 50px;

}

.description {
  margin-left: 25px;
}

.temp {
  margin-right: 25px;
  font-weight: bold;
}

.icon {
  margin: 20px;
  padding: 0;
}
.description, .temp {
  display: inline-block;
  font-size: 1em;
  padding: 0;
  text-shadow: 1px -2px 3px #332D25;
}

.wind-dir {
  font-size: .9em;
  margin: ;
  padding-bottom: 5px;
  text-shadow: 1px -2px 3px #332D25;
  
}

#units {
  border-radius: 13px;
  padding: 5px 13px 5px 13px;
  margin: 0;
  color: #1F1F2E;
  font-size: .65em;
  font-family: "Lucida Console", Monaco, monospace;
  box-shadow: 3px -3px 5px #32324B;
  font-weight: bold;
}

button.flag {
  background: linear-gradient(to right, red, white, red);
}

button {
  background: linear-gradient(150deg, white, blue, white, red, white, red);
}