Cacher is the code snippet organizer for pro developers

<link href="https://rawgit.com/bomholtm/fcc/master/_assets/css/bootstrap336.min.css" rel="stylesheet" />
<link href="https://rawgit.com/bomholtm/fcc/master/_assets/css/weather-icons.min.css" rel="stylesheet" />
<link href="https://rawgit.com/bomholtm/fcc/master/_assets/css/owl.carousel132.min.css" rel="stylesheet" />

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600|Roboto:300,500")

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

::selection
  background: transparent

html, body
  background-color: #eceff1
  height: 100%

a:focus, a:hover, a:visited
  text-decoration: none
  
.container
  background-color: #eceff1
  padding-top: calc(50vh - 285px)
  
.col-xs-12
  padding: 0
  
.card
  background-clip: padding-box
  border-radius: 2px 2px
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
  box-sizing: border-box
  display: block
  font-family: "Open Sans", sans-serif
  font-weight: 400
  margin: 8px auto 16px
  max-width: 520px
  
.card-current
  background-color: #009688
  color: #fff
  padding: 16px
  
  #location
    
    span
      animation-name: blink
      animation-duration: 1.4s
      animation-iteration-count: infinite
      animation-fill-mode: both
      font-size: 32px
      &:nth-child(2)
        animation-delay: 0.2s
      &:nth-child(3)
        animation-delay: 0.4s
      
  #time, #summary
    color: rgba(255,255,255,0.8)
    margin: 5px 0
    
  .temp
    display: inline-block
    padding: 10% 0
    
    #temperature
      display: inline-block
      font-size: 64px
      line-height: 56px
      vertical-align: middle
      @media (min-width: 375px)
        font-size: 72px
        line-height: 60px
      
    #unit1, #unit2
      display: inline-block
      font-size: 20px
      vertical-align: top
      
    #unit1
      font-weight: 600
      padding-left: 6px
      
    #unit2
      color: rgba(255,255,255,0.7)
      font-weight: 400
      padding-left: 4px
      &:hover
        cursor: pointer
        text-decoration: none
      
  #icon
    display: inline-block
    font-size: 96px
    padding-left: 8%
    @media (min-width: 375px)
      font-size: 112px
      padding-left: 16%
    @media (min-width: 520px)
      font-size: 120px
      padding-left: 24%
    
  .precip
    font-size: 15px
    
    .precip-icon
      display: inline-block
      font-size: 20px
      text-align: center
      vertical-align: middle
      width: 30px
      
    #precipitation
      display: inline-block
      padding-left: 16px
      
  .wind
    font-size: 15px
    
    .wind-icon
      display: inline-block
      font-size: 20px
      text-align: center
      vertical-align: middle
      width: 30px
    
    #windspeed
      display: inline-block
      padding-left: 16px
        
#daybyday
  background-color: #fff
  padding: 16px
  text-align: center
  
  #carousel
    color: #212121
    font-size: 15px
     
    div i
      color: #424242
      font-size: 20px
      
    .tempMax p
      margin: 10px 0 0 0
      display: inline-block
      
    .tempMax span
      display: inline-block
      
    .tempMin p
      color: #757575
      display: inline-block
      margin: 0
      
    .tempMin span
      color: #757575
      display: inline-block
  
#footer
  background-color: #fff
  border-top: 1px solid rgba(160, 160, 160, 0.2)
  border-radius: 0 0 2px 2px
  padding: 16px
  line-height: 20px
  text-align: center
  
  a
    color: #9e9e9e
    font-family: "Roboto", sans-serif
    font-weight: 300
    &:hover
      text-decoration: none
    
    .fa-lg
      vertical-align: text-top
      margin-right: 4px
    
  .bomholt
    font-weight: 500
    

<script src="https://rawgit.com/bomholtm/fcc/master/_assets/js/jquery311.min.js"></script>
<script src="https://rawgit.com/bomholtm/fcc/master/_assets/js/owl.carousel132.min.js"></script>

$(document).ready(function(){
  var lat, lon;
  $("#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").owlCarousel({
    items : 5,
    itemsCustom : false,
    itemsDesktop : false,
    itemsDesktopSmall : false,
    itemsTablet: false,
    itemsTabletSmall: false,
    itemsMobile : [420,4],
    singleItem : false,
    itemsScaleUp : false,
    slideSpeed : 200,
    autoPlay : false,
    navigation : false,
    pagination : false,
    responsive: true,
    responsiveRefreshRate : 200,
    responsiveBaseWidth: window,
    lazyLoad : false,
    autoHeight : false,
    jsonPath : false, 
    jsonSuccess : false,
    dragBeforeAnimFinish : true,
    mouseDrag : true,
    touchDrag : true,
    transitionStyle : false,
    addClassActive : false
  });
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPositionHTML, showPositionIP);
  }
  function showPositionHTML(position){
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    showForecast();
  }
  function showPositionIP(){
    $.getJSON("https://freegeoip.net/json/", function(data){
      lat = data.latitude;
      lon = data.longitude;
      showForecast();
    });
  }
  function showForecast(position){
    $.getJSON("https://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + lon + "&key=AIzaSyAXMXZFmmULPAuW-zEBPZLGebg3RAdft-I", function(data){
      showLocation(data.results[0]);
    });
    $.getJSON("https://api.darksky.net/forecast/74065424d2567989648101b3cd548674/" + 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 showLocation(location){
    for(i = 0; i < location.address_components.length; i++){
      if(location.address_components[i].types[0] == "locality"){
        $("#location").html(location.address_components[i].long_name);
      }
    }
  }
  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-current").css("background-color", "#4caf50");
        break;
      case "clear-night":
        $(".card-current").css("background-color", "#3f51b5");
        break;
      case "rain":
        $(".card-current").css("background-color", "#2196f3");
        break;
      case "snow":
        $(".card-current").css("background-color", "#2196f3");
        break;
      case "sleet":
        $(".card-current").css("background-color", "#2196f3");
        break;
      case "wind":
        $(".card-current").css("background-color", "#ff9800");
        break;
      case "fog":
        $(".card-current").css("background-color", "#ffc107");
        break;
      case "cloudy":
        $(".card-current").css("background-color", "#ffc107");
        break;
      case "partly-cloudy-day":
        $(".card-current").css("background-color", "#009688");
        break;
      case "partly-cloudy-night":
        $(".card-current").css("background-color", "#673ab7");
        break;
      case "hail":
        $(".card-current").css("background-color", "#f44336");
        break;
      case "thunderstorm":
        $(".card-current").css("background-color", "#f44336");
        break;
      case "tornado":
        $(".card-current").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));
  }
});

<div class="container">
  <div class="row">
    
    <div class="col-xs-12">
      <div class="card">
        <div class="card-current">
          <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>
            <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 id="daybyday">
          <div id="carousel" class="owl-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>
        </div>
        
        <div id="footer">
          <a href="https://gist.github.com/harunpehlivan" class="bomholt" target="_blank" rel="noopener noreferrer"><i class="fa fa-github-alt fa-lg"></i> harunpehlivan / fcc</a>
          <a href="https://glitch.com/@harunpehlivan" target="_blank" rel="noopener noreferrer" class="hidden-xs">(powered by HARUN PEHLİVAN)</a>
          <a href="https://darksky.net/poweredby/" target="_blank" rel="noopener noreferrer" class="visible-xs-inline">(darksky.net)</a>
        </div>
        
      </div>
    </div>
  </div>
</div>