Weather APP by Andre Machado

index.html

<div class="container" id="mainWrapper">
  <div id="content">
    <div class="row">
      <div class="col-md-12">
        <h1 id="location"><i class="fa fa-map-marker"></i> </h1>
      </div>
    <div class="row">
      <div class="col-md-12">
        <h1 id="icon"></h1>
        <h1 id="temperature"></h1>
      </div>
    <div class="row">
      <div class="col-md-6">
        <i class="fa fa-comments-o fa-2x"></i>
        <h1 id="description"></h1>
      </div>
      <div class="col-md-6">
        <i class="fa fa-flag fa-2x"></i>
        <h1 id="wind"></h1>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <i class="fa fa-eyedropper fa-2x"></i>
        <h1 id="humidity"></h1>
      </div>
      <div class="col-md-6">
        <i class="fa fa-cloud fa-2x"></i>
        <h1 id="cloudiness"></h1>
      </div>
    </div>
  </div>
</div>

script.js

$( document ).ready(function(){  

function getLocation(){
  if(navigator.geolocation){    
    navigator.geolocation.getCurrentPosition(getPosition);
  }
  else {
    alert("Geolocation is not supported by this browser.");
  }
  
  function getPosition(pos){
    lat = pos.coords.latitude;
    lon = pos.coords.longitude;
    
    var weatherApiUrl = "http://api.openweathermap.org/data/2.5/weather?lat="+ lat +"&lon="+ lon + "&units=metric";
    
    function getMainWeather(weather) {
      
      var bgAttributes = "no-repeat center center fixed"
      
      switch(weather) {
      case "Thunderstorm":
          document.body.style.background = "url(http://i.imgur.com/unoYUk6.jpg) " + bgAttributes;
          document.body.style.backgroundSize = "cover";
          break;
      case "Drizzle":
          document.body.style.background = "url(http://i.imgur.com/GobcB8K.jpg) " + bgAttributes;
          document.body.style.backgroundSize = "cover";
          break;
      case "Rain":
          document.body.style.background = "url(http://i.imgur.com/2UfgOvv.jpg) " + bgAttributes;
          document.body.style.backgroundSize = "cover";
          break;
      case "Snow":
          document.body.style.background = "url(http://i.imgur.com/aO98rSH.jpg) " + bgAttributes;
          document.body.style.backgroundSize = "cover";
          break;
      case "Clouds":
          document.body.style.background = "url(http://i.imgur.com/4QxsEy0.jpg) " + bgAttributes;
          document.body.style.backgroundSize = "cover";
          break;
      default:
          document.body.style.background = "url(http://i.imgur.com/9U0CHW0.jpg) " + bgAttributes;
          document.body.style.backgroundSize = "cover";
     }
   }
    
    console.log(weatherApiUrl);
    
    $.get(weatherApiUrl, function(weather) {
     var cityName = weather.name;
     var countryName = weather.sys.country;
     var temperature = weather.main.temp;
     var humidity = weather.main.humidity;
     var windSpeed = weather.wind.speed;
     var cloudiness = weather.clouds.all;
     var description = weather.weather[0].description;
     var icon = weather.weather[0].icon;
     var weatherMain = weather.weather[0].main;
      
     getMainWeather(weatherMain);
     
     temperature = Math.floor(temperature);
     console.log(weather);
      
     $('#location').append(cityName + ', ' + countryName);
     $('#description').append(description);
     $('#temperature').append(temperature + "ºC");
     $('#wind').append(windSpeed + 'km/h');
     $('#humidity').append(humidity + '%');
     $('#cloudiness').append(cloudiness + '%');
     $('#icon').append("<img src='http://openweathermap.org/img/w/" + icon + ".png'>")
     
  },"jsonp");
};
 
}
  getLocation();
  
});

scripts

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

style.css

#temperature {
  font-size: 6em;
  font-family: Arial, sans-serif;
  font-weight: bold;
  margin-top: -30px;  
}

#description, #wind, #humidity, #cloudiness {
  font-size: 1.5em;
  padding-bottom: 20px;
}

#content {
color: white;
background-color: rgba(0,0,0,0.8);
padding-top: 10px;
text-align: center;
width: 50%;
margin: 20px auto;
-webkit-box-shadow: 2px 1px 3px 0px rgba(0, 0, 0, 1);
-moz-box-shadow:    2px 1px 3px 0px rgba(0, 0, 0, 1);
box-shadow:         2px 1px 3px 0px rgba(0, 0, 0, 1);
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

Weather APP by Andre Machado.markdown

Weather APP by Andre Machado

A Pen by Andre Machado on CodePen.

License.