Get Weather

get-weather.markdown

Get Weather

Search for your city and find the weather in your location. Created as a freecodecamp project.

A Pen by rbatc on CodePen.

License.

index.html

<div class="container-fluid">
  <div class="row heading">
    <h1 id="city-name" class="toFade">Get the Weather</h1>
    <p id="lat-long" class="toFade">Just search for a city.</p>
      <div class="row simple-form">
      <div class="col-xs-4 col-sm-5 no-pad">
        <p class="instruct">Enter city name:</p>
      </div>
      <div class="col-xs-4 col-sm-2 no-pad">
        <input id="city-name-input" type="text" class="form-control">
      </div>
      <div class="col-xs-4 col-sm-5 no-pad">
        <button id="submit-city" type="button" class="btn" value="Submit">Submit</button>
      </div>
    </div>
  </div>
  
  <div id="info-holder" class="holder">
    <div class="row">
      <div class="div-weather">
        <p id="weather-info" class="toFade">What's the weather?</p>
      </div>
    </div>
    <div class="row">
      <div id="weather-icon" class="toFade">
        <p><i class="fa fa-sun-o"></i></p>
      </div>
    </div>
  </div>
    
</div>

script.js

function roundExtra(num,places) {
  return Math.round(num*Math.pow(10,places))/Math.pow(10,places);
}

function dealWithJSON(json) {
  var outStr = "<span id='temp'>"+roundExtra((json.main.temp - 273.15),1) + "</span>&#176 C";
  var latLong = "Latitude: "+json.coord.lat+" Longitude: "+json.coord.lon;
  switch (Math.floor( (json.weather[0].id)/100) ) {
    case 2:
      var bckColor = "#3d3d5c"; //Thunderstorm
      var iconName = "bolt animated tada"; 
      break;
    case 3:
      var bckColor = "#7599bd"; //Drizzle
      var iconName = "tint animated fadeInDown";
      break;
    case 5:
      var bckColor = "#24598f"; //Rain
      var iconName = "tint animated fadeInDown";
      break;
    case 6:
      var bckColor = "#eff6f6"; //Snow
      var iconName = "star-o animated fadeInDown";
      break;
    case 7:
      var bckColor = "#dacbe7"; //Various Weather
      var iconName = "star-o animated pulse infinite";
      break;
    case 8:
      //Clear/clouds 
      if (json.weather[0].id == 800) {
        var bckColor = "#80d4ff";
        var iconName = "sun-o animated rotateIn";
      }
      else {
        var bckColor = "#aebec4";
        var iconName = "cloud animated fadeInLeft";
      }
      break;
    default:
      var bckColor = "#FFFFFF";
      var iconName = "question animated shake";
  };
  var iconStr = "<i id='icon' class='fa fa-" + iconName + "'></i> <br> <p>Current weather is " +json.weather[0].description+ "</p>";
  
  return [outStr,iconStr,bckColor,latLong];
}

function getWeatherJSON(city) {
  // Hide everything
  $(".toFade").addClass("animated fadeOut");
   
  setTimeout(function(){
     // get api info 
    var appid = "8fbbc7d2616222d7b40da6610aeafcaf";
    var callStr = "http://api.openweathermap.org/data/2.5/weather?q=" + city + "&APPID=" + appid;
    $.getJSON(callStr, function(json) {
      var neatInf = dealWithJSON(json);
      $("#weather-info").html(neatInf[0]);
      $("#weather-icon").css("visibility","hidden");
      $("body").css("background-color",neatInf[2]);
      $("#lat-long").html(neatInf[3]);
      $("#city-name").html(json.name + ", " + json.sys.country);
      //$("#city-name").css("color",neatInf[2]);
      $("#submit-city").css("color",neatInf[2]);
      if (json.sys.country == "US") {
        toggleDegrees();
      }
      
      setTimeout(function() {
        $("#weather-icon").css("visibility","visible");
        $("#weather-icon").html(neatInf[1]);
      },1000)
      
    }); //ends getJSON
  },1000); //ends timeout
  
  //reshow everything
  setTimeout(function() {
    $(".toFade").removeClass("fadeOut");
    $(".toFade").addClass("fadeIn");
  },2000);
  //get rid of extra classes
  setTimeout(function() {
    $(".toFade").removeClass("animated fadeIn");
  },3000);
  
}

function toggleDegrees() {
  var curText = $("#weather-info").html();
  var curSymbol = curText[curText.length - 1];
  var curTemp = Number($("#temp").html());
  if (curSymbol == "C") {
    var newTemp = roundExtra(curTemp*1.8 + 32,1);
    var newSymbol = "F";
    var newText = "<span id='temp'>"+ newTemp + "</span>&#176 " + newSymbol;
  }
  else if (curSymbol == "F") {
    var newTemp = roundExtra((curTemp-32)/1.8,1);
    var newSymbol = "C";
    var newText = "<span id='temp'>"+ newTemp + "</span>&#176 " + newSymbol;
  }
  else {
    //do nothing
    var newText = curText;
  }
  $("#weather-info").html(newText);
}

$(document).ready(function() {
  $("#submit-city").on("click", function(){
    getWeatherJSON($("#city-name-input").val());
  })
  
  $("#weather-info").on("click", function(){
    toggleDegrees();
  });
  
    //Vertically center box
  var topMargin = Math.floor(($(document).height() -
                              $("#info-holder").height()) / 2) - $(".row.heading").height();
  $("#info-holder").css("margin-top", topMargin.toString() + "px");
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

style.css

body {
  background-color: #303039;
  text-align: center;
  transition: background 0.5s linear;
  font-family: 'Muli', sans-serif;
}

h1 {
  margin: 10px 0px 10px 0px;
  font-weight: bold;
  color: #FFFFFF;
}

#lat-long {
  font-size: 80%;
  line-height: 50%;
  margin-bottom: 20px;
}

#submit-city  {
  float: left;
  color: #505059;
}

#submit-city:hover {
  background-color: #C0C0C9;
}

#city-name-input {
  font-family: sans-serif;
}

#city-name-input:focus {
  border-color: white;
}

.simple-form {
  margin: 5px;
}

.instruct {
  float: right;
  font-weight: bold;
  margin-top: 5px;
}

.heading {
  color: white;
}

.holder {
  margin: 0 auto;
  background-color: #FFFFFF;
  max-width: 500px;
  border-radius: 20px;
  padding: 50px;
}

.div-weather {
  font-size: 300%;
}

.fa {
  font-size: 400%;
  margin: 5px 0px;
}

.no-pad {
  margin: 0px;
  padding: 1px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />