Simple Weather Widget Design using WeatherJS API

by Posted on

Simple Weather Widget Design using WeatherJS API
It is the best choice for its spotless look and awesome ease of use. This will include a widget that can be indicated anyplace in the site, and is effectively adaptable to suit any topic and won’t make any deficiency to your site whatsoever. It has API key, you can pick a nation, you can pick a city, various showcase and shading mode, shows temperature in Celsius and fahrenheit, store time, yield CSS, credit link, shows wind speed and much speed. Also you can see the weekly updates of the weather to stay ready for whatever weather brings out.

Simple Weather Widget Design using WeatherJS

HTML

<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>


CSS

@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;}


JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
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();
  });
 
});
</script>

See live demo and download source code.
|

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by socrates. Visit their official repository for more information and follow for future updates.

Published by admin