A Pen by Paulo Viana.

Binary-Clock.markdown

Binary Clock

Just a simple BCD binary clock.

A Pen by Paulo Viana on CodePen.

License.

index.html

<div class="container centered">
  <div class="digit hour1">
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="digit hour2">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="digit min1">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="digit min2">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="digit sec1">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="digit sec2">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

script.js

(function($) {
  $.fn.reverse = [].reverse
})(jQuery);

$(document).ready(function() {
  
  function blink(array, number) {
    array.reverse().each(function() {
      if (number % 2 == 1) $(this).addClass('on');
      else $(this).removeClass('on');
      
      number = number >> 1;
    });
  }
  
  setInterval(function() {
    var date = new Date();
    var hour = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    
    blink($('.hour1 .dot'), Math.floor(hour/10));
    blink($('.hour2 .dot'), hour % 10);
    blink($('.min1 .dot'), Math.floor(minutes/10));
    blink($('.min2 .dot'), minutes % 10);
    blink($('.sec1 .dot'), Math.floor(seconds/10));
    blink($('.sec2 .dot'), seconds % 10);
                         
  }, 1000);

});

style.scss

@import "bourbon";
$dot-color: rgba(#e9e9e9, 0.4);
$dot-margin: 8px;
$dot-size: 35px;

$container-color: #1f1f1f;
$container-height: calc(4*(#{$dot-size} + #{$dot-margin}) + #{$dot-margin});  
$container-width: calc(6*(#{$dot-size} + 2*#{$dot-margin}));

body {
  background: $container-color;
}

.centered {
  margin: auto;
  @include position(absolute, 0px 0px 0px 0px);
}

.container {
  height: $container-height;
  width: $container-width;
}

.digit {
    display: inline-block;
    float: left;
  
    &:first-child {
      margin-top: calc(2*(#{$dot-size} + #{$dot-margin}));             
    }
    
    &:nth-child(2n+3) {
      margin-top: calc(#{$dot-size} + #{$dot-margin});     }
}

.dot {
    background: $dot-color;
    border-radius: 50%;
    margin: $dot-margin;
    opacity: 0.2;
    transition: all 0.5s ease;
    @include size($dot-size);
}
.on {
    opacity: 1;        
}