Binary Clock

by Venkatesh Dematti

HTML

<html>

  <head>
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>

    <!-- HEADER -->

    <div class="header">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-12">
            <h1>BINARY CLOCK</h1>
          </div>
        </div>
      </div>
    </div>

    <!-- CLOCK -->

    <div class="clock">
      <div class="container-fluid">
        <div class="row">

          <div class="col-xs-1 col-md-3">
          </div>

          <div class="col-xs-9 col-md-6">
            <div class="container-fluid">
              <div class="row">

                <div class="col-xs-2 hour1">
                  <div class="circle inactive"></div>
                  <div class="circle inactive"></div>
                  <div class="circle active off h-1-2"></div>
                  <div class="circle active off h-1-1"></div>
                </div>
                <div class="col-xs-2 hour2">
                  <div class="circle active off h-2-8"></div>
                  <div class="circle active off h-2-4"></div>
                  <div class="circle active off h-2-2"></div>
                  <div class="circle active off h-2-1"></div>
                </div>
                <div class="col-xs-2 minute1">
                  <div class="circle inactive"></div>
                  <div class="circle active off m-1-4"></div>
                  <div class="circle active off m-1-2"></div>
                  <div class="circle active off m-1-1"></div>
                </div>
                <div class="col-xs-2 minute2">
                  <div class="circle active off m-2-8"></div>
                  <div class="circle active off m-2-4"></div>
                  <div...

CSS

body {
  background: url("http://cdn.pcwallart.com/images/gradient-wallpaper-2.jpg");
}

.header h1 {
  text-align: center;
  margin-bottom: 3%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1%;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 6vw;
}

.clock {
  width: 80%;
  margin: auto;
}

.bin {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1%;
  font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
  font-size: 0.75vw;
}

.dec {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
  font-size: 7vw;
}

.hour1 {
  padding-right: 0.75%;
}

.hour2 {
  padding-left: 0.75%;
}

.minute1 {
  padding-right: 0.75%;
}

.minute2 {
  padding-left: 0.75%;
}

.second1 {
  padding-right: 0.75%;
}

.second2 {
  padding-left: 0.75%;
}

.bin-hour1 {
  padding-right: 0.75%;
  text-align: center;
}

.bin-hour2 {
  padding-left: 0.75%;
  text-align: center;
}

.bin-minute1 {
  padding-right: 0.75%;
  text-align: center;
}

.bin-minute2 {
  padding-left: 0.75%;
  text-align: center;
}

.bin-second1 {
  padding-right: 0.75%;
  text-align: center;
}

.bin-second2 {
  padding-left: 0.75%;
  text-align: center;
}

.dec-hour1 {
  padding-right: 0.75%;
  text-align: center;
}

.dec-hour2 {
  padding-left: 0.75%;
  text-align: center;
}

.dec-minute1 {
  padding-right: 0.75%;
  text-align: center;
}

.dec-minute2 {
  padding-left: 0.75%;
  text-align: center;
}

.dec-second1 {
  padding-right: 0.75%;
  text-align: center;
}

.dec-second2 {
  padding-left: 0.75%;
  text-align: center;
}

.modal-body {
  font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
  font-size: 14px;
}

.modal-content {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 5%;
  padding-bottom: 5%;
  color: black;
}

.modal-content h1 {
  text-align: center;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
}

.circle {
  border-radius: 50%;
  width: 100%;
  padding-top: 100%;
 ...

JavaScript

var main = function() {
  $(document).keydown(function(event) {
    if (event.which == 72) {
      $("#Modal").modal("toggle");
    } else if (event.which == 84) {
      $(".header").toggleClass("disapear");
    } else if (event.which == 66) {
      $(".bin").toggleClass("disapear");
    } else if (event.which == 67) {
      $(".dec").toggleClass("disapear");
    }
  });

  window.setInterval(function() {
    clock();
  }, 1000);

  var lighting = function(n, t) {
    if (n == 1) {
      $("." + t + "-1")
        .addClass("on")
        .removeClass("off");
      $("." + t + "-2")
        .addClass("off")
        .removeClass("on");
      $("." + t + "-4")
        .addClass("off")
        .removeClass("on");
      $("." + t + "-8")
        .addClass("off")
        .removeClass("on");

      $(".bin-" + t + "-1").text("1");
      $(".bin-" + t + "-2").text("0");
      $(".bin-" + t + "-4").text("0");
      $(".bin-" + t + "-8").text("0");
    } else if (n == 2) {
      $("." + t + "-1")
        .addClass("off")
        .removeClass("on");
      $("." + t + "-2")
        .addClass("on")
        .removeClass("off");
      $("." + t + "-4")
        .addClass("off")
        .removeClass("on");
      $("." + t + "-8")
        .addClass("off")
        .removeClass("on");

      $(".bin-" + t + "-1").text("0");
      $(".bin-" + t + "-2").text("2");
      $(".bin-" + t + "-4").text("0");
      $(".bin-" + t + "-8").text("0");
    } else if (n == 3) {
      $("." + t + "-1")
        .addClass("on")
        .removeClass("off");
      $("." + t + "-2")
        .addClass("on")
        .removeClass("off");
      $("." + t + "-4")
        .addClass("off")
        .removeClass("on");
      $("." + t + "-8")
        .addClass("off")
        .removeClass("on");

      $(".bin-" + t + "-1").text("1");
      $(".bin-" + t + "-2").text("2");
      $(".bin-" + t + "-4").text("0");
      $(".bin-" + t + "-8").text("0");
    } else if (n == 4) {
      $("." + t + "-1")
       ...