<div class="box">
  <header>
    <h1 class="text">
                    <i class="fa fa-thermometer-full" aria-hidden="true">
                        <div class="dropdown">
                            
                                <input type="checkbox" id="checkbox-id">
                                <label for="checkbox-id" class="temp">
                                    <div class="celsius">°C</div>
                                    <div class="fahrenheit">°F</div>
                                </label>
                            
                        </div>
                    </i>
                    <span id="location-name"></span>
                    <form>
                        <input id="find-location" class="search-field" type="text" name="location" placeholder="FIND YOUR CITY ...">
                    </form>
                    
                    <i id="search-btn" class="fa fa-search" aria-hidden="true"></i></h1>
  </header>

  <div class="main">

    <p class="data">
      <i id="pic" class="wi"></i>
      <span id="temp" class="temperature"></span>
    </p>
  </div>

  <div class="othr">
    <p class="weather-text"></p>
  </div>


</div>

 html,
 body {
   height: 100%;
 }
 
 body {
   margin: 0;
   background-color: #E5E5E5;
   background-size: cover;
 }
 
 .box {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 440px;
   height: 400px;
   border-radius: 6px;
   background-color: white;
 }
 
 header {
   position: absolute;
   top: 0;
   height: 67.5px;
   width: inherit;
 }
 
 h1 {
   font-family: 'Raleway', sans-serif;
   font-size: 25px;
   text-transform: uppercase;
   letter-spacing: 1.3px;
   text-align: center;
   margin-top: 2em;
 }
 
 .search-field {
   display: none;
   width: 220px;
   height: 25px;
   padding-top: 5px;
   padding-bottom: 5px;
   border: 1.7px solid #AAAAAA;
   border-radius: 7px;
   /*box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.2);*/
   color: #AAAAAA;
   font-family: 'Raleway', sans-serif;
   font-size: 18px;
   text-transform: uppercase;
   letter-spacing: 1.3px;
   text-align: center;
   position: absolute;
   left: 110px;
   bottom: -12.5px;
 }
 
 .fa {
   color: #AAAAAA;
   cursor: pointer;
   position: absolute;
 }
 
 .fa:hover {
   color: #3DB3E3;
 }
 
 .fa-clicked {
   color: #3DB3E3;
 }
 
 .fa-search {
   top: 2em;
   right: 1.5em;
 }
 
 .fa-thermometer-full {
   top: 2em;
   left: 1.5em;
 }
 
 .dropdown {
   display: none;
   position: absolute;
   perspective: 800px;
 }
 
 .fa-thermometer-full:hover .dropdown {
   display: block;
 }
 
 .temp {
   display: block;
   position: relative;
   height: 38px;
   width: 38px;
   border-radius: 3px;
   margin-left: -0.5em;
   margin-top: 0.25em;
   margin-bottom: 0;
   border-color: transparent;
   color: #3DB3E3;
   background-color: white;
   border: 1.7px solid #3DB3E3;
   transition: all 0.4s;
   transform-style: preserve-3d;
   cursor: pointer;
 }
 
 input[type="checkbox"] {
   display: none;
 }
 
 input:checked + label {
   transform: rotateY(180deg);
   -webkit-transform: rotateY(180deg);
 }
 
 .celsius,
 .fahrenheit {
   position: absolute;
   top: 0;
   left: 0;
   height: inherit;
   width: inherit;
   border-radius: 3px;
   font-family: 'Raleway', sans-serif;
   font-size: 23px;
   text-align: center;
   font-weight: bold;
   line-height: 38px;
   vertical-align: middle;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
 }
 
 .celsius {
   z-index: 2;
   transform: rotateY(0deg);
   -webkit-transform: rotateY(0deg);
 }
 
 .fahrenheit {
   transform: rotateY(180deg);
   -webkit-transform: rotateY(180deg);
 }
 
 .main {
   position: absolute;
   top: 140px;
   height: 150px;
   width: inherit;
   font-size: 80px;
   text-align: center;
 }
 
 .data {
   display: inline-block;
   width: 360px;
   height: 90px;
   border-radius: 3px;
   padding-top: 30px;
   padding-bottom: 30px;
   margin-top: -10px;
   background-color: #3DB3E3;
   color: white;
   transition: all 0.6s linear;
 }
 
 .temperature {
   font-family: 'Varela Round', sans-serif;
   position: absolute;
   right: 75px;
 }
 
 #pic {
   position: absolute;
   left: 75px;
   transition: all 0.6s linear;
 }
 
 .othr {
   position: absolute;
   top: 290px;
   width: inherit;
   text-transform: uppercase;
   letter-spacing: 1.3px;
   text-align: center;
   font-weight: bold;
 }
 
 .weather-text {
   font-family: 'Raleway', sans-serif;
   font-size: 20px;
 }
 
 #condition {
   color: #3DB3E3;
   cursor: default;
 }

var $title = $("#location-name");
var $searchField = $("#find-location");
var $searchBtn = $("#search-btn");
var $temp = $("#temp");
var $tempToggle = $("input[type='checkbox']");
var $picture = $("#pic");
var $weatherWindow = $(".data");
var $text = $(".weather-text");
var $input = $("#find-location");

$(document).ready(function() {

  var getLocation = $.getJSON("https://freegeoip.net/json/");
  getLocation.done(function() {
    var location = getLocation.responseJSON.city + "," + getLocation.responseJSON.country_code;
    getWeather(location);
  });
  getLocation.fail(function() {
    $title.text("ERROR");
    $picture.removeClass().addClass("wi").addClass("wi-cloud-refresh");
    $picture.css("left", "175px");
    $weatherWindow.css("width", "170px");
    $temp.hide();
    $text.html("Couldn't load weather? </br> Invalid location? <span style='color:#2980b9'>Try again</span>");
    $searchBtn.click();
  });

  $searchBtn.on("click", function() {
    $title.toggle(50);
    $searchField.toggle(50);
    $searchBtn.toggleClass("fa-clicked");

    $searchBtn.on("click", function() {
      var newLocation = $input.val();
      if (newLocation == "") {
        return false;
      } else {
        getWeather(newLocation);
        $input.val("");
      }
    });

    $searchField.keydown(function(e) {
      if (e.which == 13) {
        $searchBtn.click();
        return false;
      }
    });
  });

  function getWeather(myLocation) {
    $picture.css("left", "75px");
    $weatherWindow.css("width", "360px");
    $temp.show();

    var url = "http://api.openweathermap.org/data/2.5/weather?q=" + myLocation + "&appid=b1cc0ead659679e5009fe3300f5d1206";
    var requestWeather = $.getJSON(url);
    requestWeather.done(function() {
      $title.text(requestWeather.responseJSON.name + ", " + requestWeather.responseJSON.sys.country);

      var fahrenheit = ((requestWeather.responseJSON.main.temp * 9 / 5) - 459.67).toFixed(0);
      var celsius = ((fahrenheit - 32.0) / 1.8).toFixed(0);
      $temp.text(celsius + "°");
      $tempToggle.on("click", function() {
        if ($(this).is(":checked")) {
          $temp.text(fahrenheit + "°");
        } else {
          $temp.text(celsius + "°");
        }
      });

      var description = requestWeather.responseJSON.weather[0].description;
      var icon = "wi-";
      if (description == "clear sky") {
        $text.html("It's <span id='condition'>clear</span> outside");
        icon += "day-sunny";
      } else if (description == "mist") {
        $text.html("It's <span id='condition'>misty</span> outside");
        icon += "fog";
      } else if (description.indexOf("thunderstorm") !== -1) {
        $text.html("It's <span id='condition'>stormy</span> outside");;
        icon += "storm-showers";
      } else if (description.indexOf("snow") !== -1 || description.indexOf("sleet") !== -1) {
        $text.html("It's <span id='condition'>snowing</span> outside");
        icon += "snow";
      } else if (description.indexOf("clouds") !== -1) {
        $text.html("It's <span id='condition'>cloudy</span> outside");
        icon += "cloudy";
      } else if (description.indexOf("rain") !== -1 || description.indexOf("drizzle") !== -1) {
        $text.html("It's <span id='condition'>rainy</span> outside");
        icon += "sprinkle";
      } else {
        $text.html("It's <span id='condition'>strange</span> outside");
        icon += "alien";
      }

      $picture.removeClass().addClass("wi").addClass(icon);
    });

    requestWeather.fail(function() {
      $title.text("ERROR");
      $picture.removeClass().addClass("wi").addClass("wi-cloud-refresh");
      $picture.css("left", "175px");
      $weatherWindow.css("width", "170px");
      $temp.hide();
      $text.html("Couldn't load weather? </br> Invalid location? <span style='color:#2980b9'>Try again</span>");
      $searchBtn.click();
    })
  };
});