CodePen Embed - Get Weather

<div class='wrapper'>

  <search>
    <form>
      <input class='searchbar transparent' id='search' type='text' placeholder='enter city, country' />
      <input class='button transparent' id='button' type="submit" value='GO' />
    </form>
  </search>

  <div class='panel'>
    <h2 class='city' id='city'></h2>
    <div class='weather' id='weather'>
      <div class='group secondary'>
        <h3 id='dt'></h3>
        <h3 id='description'></h3>
      </div>
      <div class='group secondary'>
        <h3 id='wind'></h3>
        <h3 id='humidity'></h3>
      </div>
      <div class='temperature' id='temperature'>
        <h1 class='temp' id='temp'><i id='condition'></i> <span id='num'></span><a class='fahrenheit active' id='fahrenheit' href="#">&deg;F</a><span class='divider secondary'>|</span><a class='celsius' id='celsius' href="#">&deg;C</a></h1>
      </div>
      <div class='forecast' id='forecast'></div>
    </div>
  </div>

@import url('https://fonts.googleapis.com/css?family=Roboto:400,300,100');
@import url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.min.css');

h1,
h2,
h3,
h4 {
  color: white;
  font-family: 'Roboto';
  font-weight: 100;
  line-height: 1.1;
  letter-spacing: 0.025em;
  margin: 0; padding: 0;
}
a {
  color: white;
  opacity: 0.54;
  text-decoration: none;
}
a:hover,
.active {opacity: 1;}

.wrapper {
  width: 480px;
  margin: 0 auto;
}
.searchbar,
.button {
  height: 45px;
  margin: 1em 0 4em;
  padding: 0;
  font: 400 1rem 'Roboto';
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: white;
  border: none;
}
.searchbar {
  float: left;
  width: 380px;
  border-bottom: solid thin white;
  color: #E8E8E8;
  color: rgba(255, 255, 255, 0.7);
}

.searchbar::-webkit-input-placeholder {color: white; opacity: 0.35;}
.searchbar::-moz-placeholder {color: white; opacity: 0.35;}
.searchbar:-ms-input-placeholder {color: white; opacity: 0.35;}
.searchbar:-moz-placeholder {color: white; opacity: 0.35;}

.button:focus,
.searchbar:focus {outline: none; color: white;}
.searchbar:focus::-webkit-input-placeholder {color: white; opacity: 0.7;}
.searchbar:focus::-moz-placeholder {color: white; opacity: 0.7;}
.searchbar:focus:-ms-input-placeholder {color: white; opacity: 0.7;}
.searchbar:focus:-moz-placeholder {color: white; opacity: 0.7;}

.button {
  float: right;
  width: 100px;
}
.panel {
  width: 100%;
  display: inline-block;
}
.weather {
  width: 100%;
  margin-top: 20px;
  display: inline-block;
}
.city {
  text-align: left;
  border-bottom: solid thin white;
  text-transform: uppercase;
  color: #E8E8E8;
  color: rgba(255, 255, 255, 0.7);
}
.group {
  width: 165px;
  margin-bottom: 20px;
  text-align: right;
  float: right;
  clear: both;
}
.temp {
  font-size: 4.5em;
  font-weight: 300;
  line-height: 0.75;
}
.celsius,
.fahrenheit,
.divider {
  font-size: 1.75rem;
  vertical-align: super;
}
.divider {
  margin: 0 0.05em;
}
.forecast {
  display: table;
  text-transform: uppercase;
  width: 100%;
}
.block {
  display: table-cell;
  padding: 1.5em 0 0 0;
  text-align: center;
}
.high {
  font-weight: 300;
  margin: 0.25em 0;
}

.secondary {opacity: 0.7;}
.transparent {background: transparent;}
.hot {background: #FF5722;}
.warm {background: #FF6F00;}
.cool {background: #2196F3;}
.cold {background: #3F51B5;}
.color404 {background: #161616;}
.button-hot {background: #BF360C;}
.button-warm {background: #B34E00;}
.button-cool {background: #0D47A1;}
.button-cold {background: #1A237E;}
.button404 {background: black;}

function titleCase(str) {
  return str.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.substring(1);
  }).join(' ');
}

function fullDay(str) {
  switch (str) {
    case 'Tue':
      return 'Tuesday';
    case 'Wed':
      return 'Wednesday';
    case 'Thu':
      return 'Thursday';
    case 'Sat':
      return 'Saturday';
    default:
      return str + 'day';
  }
}

$(function() {
  
  var $wrapper = $('.wrapper'),
    $panel = $wrapper.find('.panel'),
    $city = $panel.find('#city'),
    $weather = $panel.find('.weather'),
    $group = $panel.find('.group'),
    $dt = $group.find('#dt'),
    $description = $group.find('#description'),
    $wind = $group.find('#wind'),
    $humidity = $group.find('#humidity'),
    $temperature = $weather.find('#temperature'),
    $temp = $temperature.find('#temp'),
    $icon = $temp.find('#condition'),
    $tempNumber = $temp.find('#num'),
    $celsius = $temp.find('#celsius'),
    $fahrenheit = $temp.find('#fahrenheit'),
    $forecast = $weather.find('#forecast'),
    $search = $wrapper.find('search'),
    $form = $search.find('form'),
    $button = $form.find('#button');

  $.ajax({
      dataType: 'json',
      url: '//ipapi.co/8.8.8.8/json/'
    })
    .then(function(data) {
      var yourLocation = data.city + ',' + data.postal + ',' + data.country;
      getWeather(yourLocation);
    });

  function getWeather(input) {

    var appid = '58b6f7c78582bffab3936dac99c31b25';
    var requestWeather = $.ajax({
      dataType: 'json',
      url: '//api.openweathermap.org/data/2.5/weather',
      data: {
        q: input,
        units: 'imperial',
        appid: appid
      }
    });
    var requestForecast = $.ajax({
      dataType: 'json',
      url: '//api.openweathermap.org/data/2.5/forecast/daily',
      data: {
        q: input,
        units: 'imperial',
        cnt: '6',
        appid: appid
      }
    });

    $fahrenheit.addClass('active').removeAttr('href');
    $celsius.removeClass('active').attr("href", '#');
    $icon.removeClass();
    $button.removeClass().addClass('button transparent');

    requestWeather.done(function(data) {

      var weather = document.getElementById('weather');
      if (data.cod === '404') {
        $city.html('city not found');
        setBackground('color404', 'button404');
        weather.style.display = 'none';
      } else weather.style.display = '';

      var dt = new Date(data.dt * 1000).toString().split(' ');

      var title = data.sys.country
        ? data.name + ', ' + data.sys.country
        : data.name;

      $city.html(title);
      $tempNumber.html(Math.round(data.main.temp));
      $description.html(titleCase(data.weather[0].description));
      $wind.html('Wind: ' + data.wind.speed + ' mph');
      $humidity.html('Humidity ' + data.main.humidity + '%');
      $dt.html(fullDay(dt[0]) + ' ' + dt[4].substring(0, 5));

      $celsius.on('click', toCelsius);
      $fahrenheit.on('click', toFahrenheit);

      function toCelsius() {
        $(this).addClass('active').removeAttr('href');
        $fahrenheit.removeClass('active').attr('href', '#');
        $tempNumber.html(Math.round((data.main.temp - 32) * (5 / 9)));
      }

      function toFahrenheit() {
        $(this).addClass('active').removeAttr('href');
        $celsius.removeClass('active').attr("href", '#');
        $tempNumber.html(Math.round(data.main.temp));
      }

      function setBackground(background, button) {
        $('body').removeClass().addClass(background);
        $button.off().hover(function() {
          $(this).removeClass('transparent').addClass(button);
        }, function() {
          $(this).removeClass().addClass('button transparent');
        });
      }

      if (data.main.temp >= 80) setBackground('hot', 'button-hot');
      else if (data.main.temp >= 70) setBackground('warm', 'button-warm');
      else if (data.main.temp >= 60) setBackground('cool', 'button-cool');
      else setBackground('cold', 'button-cold');

      switch (data.weather[0].icon) {
        case '01d':
          $icon.addClass('wi wi-day-sunny');
          break;
        case '02d':
          $icon.addClass('wi wi-day-sunny-overcast');
          break;
        case '01n':
          $icon.addClass('wi wi-night-clear');
          break;
        case '02n':
          $icon.addClass('wi wi-night-partly-cloudy');
          break;
      }

      switch (data.weather[0].icon.substr(0, 2)) {
        case '03':
          $icon.addClass('wi wi-cloud');
          break;
        case '04':
          $icon.addClass('wi wi-cloudy');
          break;
        case '09':
          $icon.addClass('wi wi-showers');
          break;
        case '10':
          $icon.addClass('wi wi-rain');
          break;
        case '11':
          $icon.addClass('wi wi-thunderstorm');
          break;
        case '13':
          $icon.addClass('wi wi-snow');
          break;
        case '50':
          $icon.addClass('wi wi-fog');
          break;
      }
    });

    requestForecast.done(function(data) {

      $celsius.on('click', toCelsius);
      $fahrenheit.on('click', toFahrenheit);

      var forecast = [];
      var length = data.list.length;
      for (var i = 1; i < length; i++) {
        forecast.push({
          date: new Date(data.list[i].dt * 1000).toString().split(' ')[0],
          fahrenheit: {
            high: Math.round(data.list[i].temp.max),
            low: Math.round(data.list[i].temp.min),
          },
          celsius: {
            high: Math.round((data.list[i].temp.max - 32) * (5 / 9)),
            low: Math.round((data.list[i].temp.min - 32) * (5 / 9))
          }
        });
      }

      function toCelsius() {
        doForecast('celsius');
      }

      function toFahrenheit() {
        doForecast('fahrenheit');
      }

      function doForecast(unit) {
        var arr = [];
        var length = forecast.length;
        for (var i = 0; i < length; i++) {
          arr[i] = ("<div class='block'><h3 class='secondary'>" + forecast[i].date + "</h3><h2 class='high'>" + forecast[i][unit].high + "</h2><h4 class='secondary'>" + forecast[i][unit].low + "</h4></div>");
        }
        $forecast.html(arr.join(''));
      }

      doForecast('fahrenheit');
    });
  }

  $form.submit(function(event) {
    var input = document.getElementById('search').value;
    var inputLength = input.length;
    if (inputLength) getWeather(input);
    event.preventDefault();
  });

});

This Pen is owned by Socrates Nguyen on CodePen.

See more by @socrates on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js