FCC Weather App

FCC Weather App.markdown

FCC Weather App

A Pen by db on CodePen.

License.

index.html

<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

<h1>Free Code Camp<br>
  Weather App</h1>

<div class="container">
  <div id="temperature"></div>
  <div id="description"></div>
  <div id="weatherIcon"></div>
  
  <button id="tempUnitToggle" onclick="changeUnits()">Temp in &deg;F</button>

</div>

script.js

var currentUnit = "C";

$(document).ready(function() {

  navigator.geolocation.getCurrentPosition(function(position) {
    lat = position.coords.latitude;
    long = position.coords.longitude;
    

    weatherCall = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long + "&APPID=2dece6437b9269efec3f645327f480d2&units=metric";
    
    // Location API
    // http://ipinfo.io/?callback=callback

    $.getJSON(weatherCall, function(json) {
      tempInC = Math.round(json.main.temp) + "°C";
      tempInF = celsiusToFahrenheit(json.main.temp) + "°F";
      description = json.weather[0].description;
      
      wIcon = '<img src="http://openweathermap.org/img/w/' + json.weather[0].icon + '.png" />';
      $("#temperature").html(tempInC);       
      $("#description").html(description);
      $("#weatherIcon").html(wIcon);
      
      getBackground(description);
      
    });
  });
});

function celsiusToFahrenheit(num) {
  return Math.round((num * 9.0 / 5.0) + 32);
};

function changeUnits() {
  if (currentUnit == "C") {
    currentUnit = "F";
    $("#tempUnitToggle").html("Temp in &deg;C");
    $("#temperature").html(tempInF);
  } else {
    currentUnit = "C";
    $("#tempUnitToggle").html("Temp in &deg;F");
    $("#temperature").html(tempInC);
  }
}

function getBackground(e) {
  var backgroundImg = "";
  switch(e) {
    case "clear sky":
      backgroundImg = "http://goo.gl/Y7v9nn";
      break;
    case "few clouds":
      backgroundImg = "http://goo.gl/rJwXkW";
      break;
    case "scattered clouds":
      backgroundImg = "http://goo.gl/rJwXkW";
      break;
    case "broken clouds":
      backgroundImg = "http://goo.gl/88H3pK";
      break;
    case "shower rain":
      backgroundImg = "http://goo.gl/AHhbcI";
      break;
    case "rain":
      backgroundImg = "http://goo.gl/pLmGJD";
      break;
    case "thunderstorm":
      backgroundImg = "http://goo.gl/vSnVej";
      break;
    case "snow":
      backgroundImg = "http://goo.gl/dRKluA";
      break;
    case "mist":
      backgroundImg = "http://goo.gl/eBvjeY";
      break;
  }
  document.body.style.backgroundImage = "url(" + backgroundImg+ ")";  
}

scripts

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

style.css

html {
  font-family: 'Raleway', sans-serif;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  color: #fff;

}

body {
    background-size: 100%;
}

.container {
  margin: 150px auto;
  background-color: #666;
  color: #fff;
  width: 250px;
  height: 225px;
  border-radius: 10px;
  padding: 20px;
  text-align: left;
}

#description {
  text-transform: capitalize;
}

button {
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  width: auto;
  height: 30px;
  border: 2px solid #fff;
  background-color: #666;
  border-radius: 5px;
  color: #fff;
  margin-top: 15px;
}