Weather App

index.html

<main>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
    <div class="jumbotron">
      <div class="media center-block">
        <div class="media-left media-middle">
          <img id="weather-icon" class="media-object" src="" alt="...">
        </div>        
        <div class="media-body">
          <h2 id="area" class="media-heading"></h2>
          <h3 id="weather" class="media-heading"></h3>
          <p><span id="temperature"></span><span id="temp-symbol"></span></p>
          <div class="btn-group btn-group-xs" role="group" aria-label="...">
            <button type="button" class="btn btn-default" onclick="toggleCelsius();">Celsius</button>
            <button type="button" class="btn btn-default" onclick="toggleFahrenheit();">Fahrenheit</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  </div>
</main>

script.js

$(document).ready(function() {
  getWeatherForLocation();
});

function getWeatherForLocation() {
  if (!navigator.geolocation) {
    $("#output").html("<p>Geolocation is not supported by your browser.</p>");
    return;
  }

  function success(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    $.ajax({
      type: "GET",
      crossDomain: true,
      url: "http://api.openweathermap.org/data/2.5/weather",
      data: {
        lat: lat,
        lon: lon,
        units: "metric",
        lang: "en",
      }
    }).done(function(data){
      $("#area").html(data.name + ", " + data.sys.country);
      $("#weather").html(data.weather[0].description);
      $("#temperature").html(Math.round(data.main.temp));
      $("#temp-symbol").html("°C");
      $("#weather-icon").attr("src", getWeatherIconUrl(data.weather[0].icon));
      $("body").css("background", "url("+getBackgroundUrl(data.weather[0].icon)+")no-repeat center center fixed");
      $("body").css("background-size", "cover");
      console.log(getWeatherIconUrl(data.weather[0].icon));
      console.log(getBackgroundUrl(data.weather[0].icon));
    });
  }

  function error() {
    $("#output").html("<p>Unable to retrieve location.</p>");
  }

  $("#output").html("<p>Locating...</p>");

  navigator.geolocation.getCurrentPosition(success, error);
}

function getWeatherIconUrl(weatherId){
  var iconUrl;
  switch (weatherId) {
    case "01d":
      iconUrl = "http://i.imgur.com/Pg2d3PS.png";
      break;

    case "02d":
      iconUrl = "http://i.imgur.com/SB10Mag.png";
      break;

    case "03d":
      iconUrl = "http://i.imgur.com/SB10Mag.png";
      break;

    case "04d":
      iconUrl = "http://i.imgur.com/pkpA135.png";
      break;

    case "09d":
      iconUrl = "http://i.imgur.com/JjrwOdz.png";
      break;

    case "10d":
      iconUrl = "http://i.imgur.com/8GUWLxo.png";
      break;

    case "11d":
      iconUrl = "http://i.imgur.com/fnIfXDW.png";
      break;

    case "13d":
      iconUrl = "http://i.imgur.com/rUlOm1d.png";
      break;

    default:
      iconUrl = null;
  }
  return iconUrl;
}

function getBackgroundUrl(weatherId){
  var backgroundUrl;
  switch (weatherId) {
    case "01d":
      backgroundUrl = "http://i.imgur.com/WbuaYaA.jpg";
      break;

    case "02d":
      backgroundUrl = "http://i.imgur.com/GeeuhNL.jpg";
      break;

    case "03d":
      backgroundUrl = "http://i.imgur.com/E3gN3we.jpg";
      break;

    case "04d":
      backgroundUrl = "http://i.imgur.com/agw6MxH.jpg";
      break;

    case "09d":
      backgroundUrl = "http://i.imgur.com/qwsRMt6.jpg";
      break;

    case "10d":
      backgroundUrl = "http://i.imgur.com/BREJoaQ.jpg";
      break;

    case "11d":
      backgroundUrl = "http://i.imgur.com/6IhXlLB.jpg";
      break;

    case "13d":
      backgroundUrl = "http://i.imgur.com/PobolaK.jpg";
      break;

    default:
      backgroundUrl = null;
  }
  return backgroundUrl;
}

function toggleCelsius(){
  tempSymbol = $("#temp-symbol").html();
  if(tempSymbol === '°F'){
    var fahrenheit = $("#temperature").html();
    var celsius = (fahrenheit - 32) * 5/9;
    $("#temperature").html(celsius);
    $("#temp-symbol").html('°C');
  }
}


function toggleFahrenheit(){
  tempSymbol = $("#temp-symbol").html();
  console.log(tempSymbol);
  if(tempSymbol === '°C'){
    var celsius = $("#temperature").html();
    var fahrenheit = celsius * 9/5 + 32;
    $("#temperature").html(fahrenheit);
    $("#temp-symbol").html('°F');
  }
}

scripts

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

style.css

main {
  padding-top: 200px;
}

.jumbotron {
  background-color: hsla(50, 33%, 25%, 0.50);
  color: white;
}

#weather-icon {
  height: 150px;
  width: 150px;
}

#weather {
  text-transform: capitalize;
}

styles

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

Weather App.markdown

Weather App

A Pen by Odysseas Samaras on CodePen.

License.