Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main class="d-flex align-items-center">
  <div class="container d-flex justify-content-center">
    <div class="card shadow border-0">
      <div class="card-header">
        <h2 id="location">Loading data <span>.</span><span>.</span><span>.</span></h2>
        <h4 id="time">Day 0, Time</h4>
        <h4 id="summary">Summary</h4>
        <div class="temp">
          <div id="temperature">0</div>
          <div id="unit1">°C</div>
          <p>/</p>
          <a id="unit2">°F</a>
        </div>
        <i id="icon" class="wi wi-na"></i>
        <div class="precip">
          <div class="precip-icon">
            <i class="wi wi-raindrop"></i>
          </div>
          <div id="precipitation">0%</div>
        </div>
        <div class="wind">
          <div class="wind-icon">
            <i class="wi wi-strong-wind"></i>
          </div>
          <div id="windspeed">0 mph</div>
        </div>
      </div>
      <div class="card-body text-center">
        <div id="carousel">
          <div>
            <p id="day-0">Day 0</p>
            <i id="icon-day-0" class="wi wi-na"></i>
            <div class="tempMax">
              <p id="tempMax-day-0">0</p><span>°</span>
            </div>
            <div class="tempMin">
              <p id="tempMin-day-0">0</p><span>°</span>
            </div>
          </div>
          <div>
            <p id="day-1">Day 1</p>
            <i id="icon-day-1" class="wi wi-na"></i>
            <div class="tempMax">
              <p id="tempMax-day-1">0</p><span>°</span>
            </div>
            <div class="tempMin">
              <p id="tempMin-day-1">0</p><span>°</span>
            </div>
          </div>
          <div>
            <p id="day-2">Day 2</p>
            <i id="icon-day-2" class="wi wi-na"></i>
            <div class="tempMax">
              <p id="tempMax-day-2">0</p><span>°</span>
            </div>
            <div class="tempMin">
              <p id="tempMin-day-2">0</p><span>°</span>
            </div>
          </div>
          <div>
            <p id="day-3">Day 3</p>
            <i id="icon-day-3" class="wi wi-na"></i>
            <div class="tempMax">
              <p id="tempMax-day-3">0</p><span>°</span>
            </div>
            <div class="tempMin">
              <p id="tempMin-day-3">0</p><span>°</span>
            </div>
          </div>
          <div>
            <p id="day-4">Day 4</p>
            <i id="icon-day-4" class="wi wi-na"></i>
            <div class="tempMax">
              <p id="tempMax-day-4">0</p><span>°</span>
            </div>
            <div class="tempMin">
              <p id="tempMin-day-4">0</p><span>°</span>
            </div>
          </div>
          <div>
            <p id="day-5">Day 5</p>
            <i id="icon-day-5" class="wi wi-na"></i>
            <div class="tempMax">
              <p id="tempMax-day-5">0</p><span>°</span>
            </div>
            <div class="tempMin">
              <p id="tempMin-day-5">0</p><span>°</span>
            </div>
          </div>
          <div>
            <p id="day-6">Day 6</p>
            <i id="icon-day-6" class="wi wi-na"></i>
            <div class="tempMax">
              <p id="tempMax-day-6">0</p><span>°</span>
            </div>
            <div class="tempMin">
              <p id="tempMin-day-6">0</p><span>°</span>
            </div>
          </div>
          <div>
            <p id="day-7">Day 7</p>
            <i id="icon-day-7" class="wi wi-na"></i>
            <div class="tempMax">
              <p id="tempMax-day-7">0</p><span>°</span>
            </div>
            <div class="tempMin">
              <p id="tempMin-day-7">0</p><span>°</span>
            </div>
          </div>
        </div>
        <a href="https://darksky.net/poweredby/" target="_blank" rel="noopener noreferrer" class="card-link">Powered by Dark Sky</a>
      </div>
    </div>
  </div>
</main>
<footer class="text-center">
  <a href="https://github.com/b0mh0lt" target="_blank" rel="noopener noreferrer">
    <i class="fab fa-github-alt fa-lg"></i> M. Bomholt
  </a>
</footer>
              
            
!

CSS

              
                @keyframes blink
  0%
    opacity: 0.6
  20%
    opacity: 1
  100%
    opacity: 0.6

::selection
  background: transparent

html, body
  background-color: #eceff1
  height: 100%
  
body
  display: flex
  flex-direction: column
  
main
  flex: 1 0 auto
  margin: 15px 0
  
h2
  font-size: 2.25rem
  
a:focus, a:hover, a:visited
  text-decoration: none
  
.slick-slide
  outline: none
  
.card
  font-family: "Open Sans", sans-serif
  width: 630px
  
  .card-header
    background-color: #009688
    color: #fff
    padding: 1.25rem
    border-radius: .25rem .25rem 0 0
    
    #location span
      animation-name: blink
      animation-duration: 1.4s
      animation-iteration-count: infinite
      animation-fill-mode: both
      font-size: 2.25rem
      &:nth-child(2)
        animation-delay: 0.2s
      &:nth-child(3)
        animation-delay: 0.4s
      
    #time, #summary
      color: rgba(255,255,255,0.75)
      margin: 5px 0
      
    .temp
      display: inline-block
      padding: 4rem 0
      @media (min-width: 375px)
        padding: 4.5rem 0
      
      #temperature
        display: inline-block
        font-size: 4rem
        line-height: 0.9
        margin-right: 5px
        vertical-align: middle
        @media (min-width: 375px)
          font-size: 4.5rem
          
      #unit1, p, #unit2
        display: inline-block
        font-size: 1.25rem
        vertical-align: top
        @media (min-width: 375px)
          font-size: 1.375rem
        
      #unit1
        font-weight: 600
      
      p
        color: rgba(255,255,255,0.5)
        font-weight: 400
        margin: 0 5px
        
      #unit2
        color: rgba(255,255,255,0.5)
        font-weight: 400
        &:hover
          cursor: pointer
          text-decoration: none
          
    #icon
      display: inline-block
      font-size: 96px
      float: right
      margin: 0
      @media (min-width: 375px)
        font-size: 112px
        margin-right: 15px
      @media (min-width: 438px)
        font-size: 128px
        margin: -15px 30px 0 0
      @media (min-width: 510px)
        font-size: 144px
        margin-right: 45px
      @media (min-width: 768px)
        font-size: 160px
        margin: -30px 90px 0 0
          
    .precip
        
      .precip-icon
        display: inline-block
        font-size: 1.25rem
        text-align: center
        vertical-align: middle
        width: 30px
          
      #precipitation
        display: inline-block
        margin-left: 15px
          
    .wind
        
      .wind-icon
        display: inline-block
        font-size: 1.25rem
        text-align: center
        vertical-align: middle
        width: 30px
          
      #windspeed
        display: inline-block
        margin-left: 15px
        
  .card-body #carousel
    font-size: .9375rem
    padding: 5px 0 15px 0
    
    div p
      color: #616161
      margin: 0
    
    div i
      color: #424242
      font-size: 20px
      padding: 15px 0 10px
      
    .tempMax p, .tempMax span
      color: #616161
      display: inline-block
      margin: 0
      
    .tempMin p, .tempMin span
      color: #9e9e9e
      display: inline-block
      margin: 0
    
  .card-link
    color: #9e9e9e
    font-size: .75rem
      
footer
  background-color: #e1e5e9
  font-family: "Roboto", sans-serif
  font-weight: 500
  height: 42px
  width: 100%
  
  a
    color: #708396
    font-size: .875rem
    line-height: 42px
    position: relative
    top: 2px
    &:focus,&:hover, &:visited
      color: #708396
    
    svg
      margin-right: .3125rem
      vertical-align: text-bottom!important

              
            
!

JS

              
                $(document).ready(function(){
  var lat, lon;
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPositionHTML, showPositionIP);
  }
  $('#unit2').on('click', function(){
    var temp = $('#temperature').text();
    if($('#unit2').text() == '°F'){
      $('#temperature').html(Math.round((temp * 9 / 5) + 32));
      $('#unit1').html('°F');
      $('#unit2').html('°C');
      for(i = 0; i <= 7; i++){
        var tempMax = $('#tempMax-day-'+i).text();
        var tempMin = $('#tempMin-day-'+i).text();
        $('#tempMax-day-'+i).html(Math.round((tempMax * 9 / 5) + 32));
        $('#tempMin-day-'+i).html(Math.round((tempMin * 9 / 5) + 32));
      }
    }else if($('#unit2').text() == '°C'){
      $('#temperature').html(Math.round((temp - 32) * 5 / 9));
      $('#unit1').html('°C');
      $('#unit2').html('°F');
      for(i = 0; i <= 7; i++){
        var tempMax = $('#tempMax-day-'+i).text();
        var tempMin = $('#tempMin-day-'+i).text();
        $('#tempMax-day-'+i).html(Math.round((tempMax - 32) * 5 / 9));
        $('#tempMin-day-'+i).html(Math.round((tempMin - 32) * 5 / 9));
      }
    }
  });
  $('#carousel').slick({
    arrows: false,
    infinite: false,
    slidesToShow: 8,
    responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 7
      }
    }, {
      breakpoint: 510,
      settings: {
        slidesToShow: 6
      }
    }, {
      breakpoint: 438,
      settings: {
        slidesToShow: 5
      }
    }, {
      breakpoint: 375,
      settings: {
        slidesToShow: 4
      }
    }]
  });
  function showPositionHTML(position){
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    showForecast();
  }
  function showPositionIP(){
    $.getJSON('https://ipinfo.io?token=2d6b2f67a491b5', function(data){
      var loc = data.loc.split(",");
      lat = loc[0];
      lon = loc[1];
      showForecast();
    });
  }
  function showForecast(position){
    $.getJSON('https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=' + lat + '&lon=' + lon + '&zoom=10', function(data){
      $('#location').html(data.name);
    });
    $.getJSON('https://api.darksky.net/forecast/5f2d44b65720731062108b79b32b6063/' + lat + ',' + lon + '?units=auto&callback=?', function(data){
      showTime(data.currently.time);
      $('#summary').html(data.currently.summary);
      $('#temperature').html(Math.round(data.currently.temperature));
      showUnits(data.flags.units);
      showIcon(data.currently.icon, '#icon');
      showBackground(data.currently.icon);
      $('#precipitation').html(Math.round(data.currently.precipProbability * 100) + '%');
      showWindSpeed(data.flags.units, data.currently.windSpeed);
      showDayByDayForecast(data.daily);
    });
  }
  function showTime(time){
    var dayArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    var day = dayArr[new Date(time*1000).getDay()];
    var hoursArr = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09'];
    var hours;
    var minutesArr = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09'];
    var minutes;
    if(new Date(time*1000).getHours() < 10){
      hours = hoursArr[new Date(time*1000).getHours()];
    }else{
      hours = new Date(time*1000).getHours();
    }
    if(new Date(time*1000).getMinutes() < 10){
      minutes = minutesArr[new Date(time*1000).getMinutes()];
    }else{
      minutes = new Date(time*1000).getMinutes();
    }
    $('#time').html(day + ', ' + hours + ':' + minutes);
  }
  function showUnits(unit){
    if(unit == 'us'){
      $('#unit1').html('°F');
      $('#unit2').html('°C');
    }else{
      $('#unit1').html('°C');
      $('#unit2').html('°F');
    }
  }
  function showWindSpeed(units, windSpeed){
    switch(units){
      case 'us':
        $('#windspeed').html(Math.round(windSpeed) + ' mph');
        break;
      case 'si':
        $('#windspeed').html(Math.round(windSpeed * 3.6) + ' km/h');
        break;
      case 'ca':
        $('#windspeed').html(Math.round(windSpeed) + ' km/h');
        break;
      case 'uk2':
        $('#windspeed').html(Math.round(windSpeed) + ' mph');
        break;
    }
  }
  function showBackground(icon){
    switch(icon){
      case 'clear-day':
        $('.card-header').css('background-color', '#4caf50');
        break;
      case 'clear-night':
        $('.card-header').css('background-color', '#3f51b5');
        break;
      case 'rain':
        $('.card-header').css('background-color', '#2196f3');
        break;
      case 'snow':
        $('.card-header').css('background-color', '#2196f3');
        break;
      case 'sleet':
        $('.card-header').css('background-color', '#2196f3');
        break;
      case 'wind':
        $('.card-header').css('background-color', '#ff9800');
        break;
      case 'fog':
        $('.card-header').css('background-color', '#ffc107');
        break;
      case 'cloudy':
        $('.card-header').css('background-color', '#ffc107');
        break;
      case 'partly-cloudy-day':
        $('.card-header').css('background-color', '#009688');
        break;
      case 'partly-cloudy-night':
        $('.card-header').css('background-color', '#673ab7');
        break;
      case 'hail':
        $('.card-header').css('background-color', '#f44336');
        break;
      case 'thunderstorm':
        $('.card-header').css('background-color', '#f44336');
        break;
      case 'tornado':
        $('.card-header').css('background-color', '#f44336');
        break;
    }
  }
  function showDayByDayForecast(daily){
    for(i = 0; i <= 7; i++){
      showDay(daily.data[i].time, '#day-' + i);
      showIcon(daily.data[i].icon, '#icon-day-' + i);
      showTempMax(daily.data[i].temperatureMax, '#tempMax-day-' + i);
      showTempMin(daily.data[i].temperatureMin, '#tempMin-day-' + i);
    }
  }
  function showDay(time, id){
    var dayArr = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    var day = dayArr[new Date(time*1000).getDay()];
    $(id).html(day);
  }
  function showIcon(icon, id){
    switch(icon){
      case 'clear-day':
        $(id).removeClass();
        $(id).addClass('wi wi-forecast-io-clear-day');
        break;
      case 'clear-night':
        $(id).removeClass();
        $(id).addClass('wi wi-forecast-io-clear-night');
        break;
      case 'rain':
        $(id).removeClass();
        $(id).addClass('wi wi-forecast-io-rain');
        break;
      case 'snow':
        $(id).removeClass();
        $(id).addClass('wi wi-forecast-io-snow');
        break;
      case 'sleet':
        $(id).removeClass();
        $(id).addClass('wi wi-forecast-io-sleet');
        break;
      case 'wind':
        $(id).removeClass();
        $(id).addClass('wi wi-forecast-io-wind');
        break;
      case 'fog':
        $(id).removeClass();
        $(id).addClass('wi wi-forecast-io-fog');
        break;
      case 'cloudy':
        $(id).removeClass();
        $(id).addClass('wi wi-forecast-io-cloudy');
        break;
      case 'partly-cloudy-day':
        $(id).removeClass();
        $(id).addClass('wi wi-forecast-io-partly-cloudy-day');
        break;
      case 'partly-cloudy-night':
        $(id).removeClass();
        $(id).addClass('wi wi-forecast-io-partly-cloudy-night');
        break;
      case 'hail':
        $(id).removeClass();
        $(id).addClass('wi wi-forecast-io-hail');
        break;
      case 'thunderstorm':
        $(id).removeClass();
        $(id).addClass('wi wi-forecast-io-thunderstorm');
        break;
      case 'tornado':
        $(id).removeClass();
        $(id).addClass('wi wi-forecast-io-tornado');
        break;
      default:
        $(id).removeClass();
        $(id).addClass('wi wi-na');
    }
  }
  function showTempMax(temp, id){
    $(id).html(Math.round(temp));
  }
  function showTempMin(temp, id){
    $(id).html(Math.round(temp));
  }
});

              
            
!
999px

Console