Responsive Minimalistic Bar Clock



Responsive Minimalistic Bar Clock




 <div class="container">
  <div id="hour"></div>
  <div id="minutes"></div>
  <div id="seconds"></div>
  <h1 id="date"></h1>
</div>                    
                  
                



   /* Imports */
@import url(https://fonts.googleapis.com/css?family=Poiret+One);

/* Breakpoints */
$small: 640px;
$medium: 920px;
$large: 1280px;

* {
  box-sizing: border-box;
}

.container {
  animation: fadeIn 2s 0.5s ease-in both;
  margin: 0 auto;
  max-width: 1080px;
  padding: 100px 18px 0;
  position: relative;
  width: 100%;
  
  div {
    height: 36px;
    margin-bottom: 18px;
    
    @media screen and (min-width: $medium) {
      height: 48px;
    }
    
    &:before {
      animation: fadeIn 2s 2s ease-in both;
      background: rgba(0,0,0,0.2);
      content: " ";
      height: 36px;
      left: 18px;
      position: absolute;
      right: 18px;
      
      @media screen and (min-width: $medium) {
        height: 48px;
      }
    }
  }
}

body {
  background: darkslategray;
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
}

h1 {
  font-family: "Poiret One", sans-serif;
  font-size: 40px;
  font-weight: 100;
  
  @media screen and (min-width: $small) {
    font-size: 56px;
  }
  
  @media screen and (min-width: $medium) {
    font-size: 72px;
  }
  
  @media screen and (min-width: $large) {
    font-size: 90px;
  }
}

/* Animations */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}                
              



var months = [
  "JAN", "FED", "MAR", "APR",
  "MAY", "JUN", "JUL", "AUG", 
  "SEPT", "OCT", "NOV", "DEC"
];

(function() {
  var getTime = function() {
    var now = new Date();
    return {
      seconds: ('0' + now.getSeconds()).slice(-2),
      minutes: ('0' + now.getMinutes()).slice(-2),
      hours: now.getHours(),
      day: now.getDate(),
      month: now.getMonth(),
      year: now.getFullYear()
    };
  }
  var updateTime = function(time) {
    var hourBar = document.getElementById("hour");
    var hourRatio = (time.hours / 24);
    var minutesBar = document.getElementById("minutes");
    var minutesRatio = (time.minutes / 60);
    var secondsBar = document.getElementById("seconds");
    var secondsRatio = (time.seconds / 60);
    document.getElementById("date").innerHTML = 
      months[time.month] + " " + 
      time.day + ", " + time.year + 
      " " + time.hours + ":" +
      time.minutes + ":" + time.seconds;
    hourBar.style.width = hourRatio * 100 + "%";
    hourBar.style.backgroundColor = "hsl(" + ((1 - hourRatio) * 100) + ",50%,50%)";
    minutesBar.style.width = minutesRatio * 100 + "%";
    minutesBar.style.backgroundColor = "hsl(" + ((1 - minutesRatio) * 100) + ",50%,50%)";
    secondsBar.style.width = secondsRatio * 100 + "%";
    secondsBar.style.backgroundColor = "hsl(" + ((1 - secondsRatio) * 100) + ",50%,50%)";
  }
  
  setInterval(function() {
    return updateTime(getTime());
  }, 1000);
})();