Clock

by mattslay

HTML

<div class="main" id="main">

  <h1>Parker's Clock</h1>

  <div class="color-bar">
    <div class="colors red"></div>
    <div class="colors blue"></div>
    <div class="colors green"></div>
    <div class="colors yellow"></div>
    <div class="colors white"></div>
    <div style="clear:both">&nbsp;</div>
  </div>

  <div class="face">

    <div class="digit">
      <div style="float:left;">
        <div class="segment"></div>
        <div class="segment"></div>
      </div>
    </div>

    <div class="digit">
      <div style="float:left;">
        <div class="segment"></div>
        <div class="segment"></div>
      </div>

      <div style="float:left;">
        <div class="segment hor-top"></div>
        <div class="segment hor-mid"></div>
        <div class="segment hor-btm"></div>
      </div>
      <div style="float:left;">
        <div class="segment"></div>
        <div class="segment"></div>
      </div>
    </div>
    <div class="digit">
      <div style="float:left;">
        <div class="segment colon"></div>
        <div class="segment colon" style="margin-top: 60px;"></div>
      </div>

    </div>
    <div class="digit">
      <div style="float:left;">
        <div class="segment"></div>
        <div class="segment"></div>
      </div>

      <div style="float:left;">
        <div class="segment hor-top"></div>
        <div class="segment hor-mid"></div>
        <div class="segment hor-btm"></div>
      </div>
      <div style="float:left;">
        <div class="segment"></div>
        <div class="segment"></div>
      </div>
    </div>

    <div class="digit">
      <div style="float:left;">
        <div class="segment"></div>
        <div class="segment"></div>
      </div>

      <div style="float:left;">
        <div class="segment hor-top"></div>
        <div class="segment hor-mid"></div>
        <div class="segment hor-btm"></div>
      </div>
      <div style="float:left;">
        <div class="segment"></div>
        <div...

CSS

.main {
  background-color: #000000;
  height: 1200px;
  min-height: 800px;
  width: 100%;
  padding-top: 10px;
}

.face {
  width: 630px;
  margin: 0px auto;
}

h1 {
  color: red;
  font-size: 35px;
  margin-bottom: 15px;
  text-align: center;
}

.color-bar {
  width: 300px;
  margin: 0px auto;
  margin-bottom: 10px;
}

.colors {
  height: 50px;
  width: 50px;
  float: left;
  margin-right: 10px;
}

.ampm {
  float: left;
  margin-left: 20px;
  margin-top: 160px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.white {
  background-color: white;
}

.segment {
  width: 20px;
  height: 100px;
  background-color: #101010;
  border: 1px solid;
  border-radius: 7px;
  border-color: #202020;
}

.segment.on {
  background-color: red;
}

.hor-top,
.hor-mid,
.hor-btm {
  width: 80px;
  height: 20px;
  margin-top: -7px;
}

.hor-mid,
.hor-btm {
  margin-top: 77px;
  margin-left: -2px;
  width: 84px;
  margin-right: -4px;
}

.digit {
  padding: 10px;
  float: left;
}

.colon {
  margin-top: 40px;
  height: 30px;
}

JavaScript

$(".segment").click(function() {
    $(this).toggleClass("on");
    if ($(this).hasClass("on")) {
        $(this).css('background-color', $('body').data('color'));
    }
    else {
        $(this).css('background-color', '');
    }
        $("#main").click();
});

$(".colors").click(function() {
    var color = $(this).css('background-color');
    $(".segment.on").css('background-color', color);
    $("#ampm").css('color', color);
    $('body').data('color', color);
});