weather app free code camp http://codepen.io/Iqlaas/full/ZLPQmr/

index.html

<div class="container">
  <div class="row text-center">
    <h2>Local Weather App</h2>
  </div>
  <div class="row">
    <div class="col-md-3 text-center">
      <h3>You are in:
      <div id="address"></div></h3>
    </div>
        <div class="col-md-3 text-center">
          <h3>Your weather is:
          <div id="weather"></div></h3>
        </div>
        <div class="col-md-3 text-center">
          <h3>Icon:
            <div id="icon"></div>
          </h3>
        </div>
        <div class="col-md-3 text-center">
          <h3>Temperature:
            <div id="temperature"></div>
            <button id="farenheit" class="btn btn-primary">F</button>
            <button id="celcius" class="btn btn-primary">C</button>
          </h3>
        </div>
  </div>

  <div class="row text-center">
    <div class="col-xs-12">
      <button id="getWeather" class="btn btn-primary">Get Local Weather</button>
    </div>
  </div>
</div>

script.js

$(document).ready(function(){
  $("#getWeather").on("click", function(){
//     get location
    $.ajax({
      url: 'http://ipinfo.io',
      type: 'GET',
      dataType: 'json',
      success: function(location) {
        var address = location.city + ', ' + location.region + ', ' + location.country;
        $("#address").html(address);
        var lat = location.loc.split(",")[0];
        var lon = location.loc.split(",")[1];
        
//         get weather using api
      $.ajax({
        url: 'http://api.openweathermap.org/data/2.5/weather?lat='+ lat + '&lon=' + lon + '&APPID=3fd50c72da7a24821ab7b24dfb4cd21c',
        jsonp: 'callback',
        dataType: 'jsonp',
        success: function(data) {
          // weather
          var weather = data.weather[0].main;
          $("#weather").html(weather);
          
          // icon
          var icon = data.weather[0].icon;
          var url = "http://openweathermap.org/img/w/" + icon + ".png"; 
          $("#icon").html("<img class = 'newIcon' src=" + url + ">");
          
          // temperature
          var temperature = data.main.temp;
          var celcius = Math.round(temperature - 273.15);
          var farenheit = Math.round(temperature * 9/5 - 459.67);
          
          // default
          $("#temperature").html(celcius + " °C");
          
          $("#farenheit").on("click", function(){
            $("#temperature").html(farenheit + " °F");
          });
          
          $("#celcius").on("click", function(){
            $("#temperature").html(celcius + " °C");
          });

        }
      });
      }
    });
  });
});

scripts

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

style.css

.newIcon {
  width: 60px;
  margin: 0;
  padding: 0;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.min.css" rel="stylesheet" />

weather.markdown

weather

A Pen by Kamal Iqlaas on CodePen.

License.