Return to Answer

Added disclaimer

Source Link

edited Nov 28, 2018 at 9:40

Dimitri Mestdagh

1.7k
1
9
12

_{Disclaimer: I cannot be held responsible for any lost time caused by watching the stacks slowly fill up.}

Source Link

answered Nov 28, 2018 at 9:32

Dimitri Mestdagh

1.7k
1
9
12

Here's a clock that will never overflow, the Stack Overflow Binary Clock™:

This is basically a binary clock based on the Stack Overflow logo. This clock is ideal for all programmers, because (a) we speak binary and (b) it uses the Stack Overflow logo.

I wrote the code myself using RxJS, since reactive programming is hot nowadays. The snippet can be found below:

const { from, interval } = rxjs;
const { map, switchMap } = rxjs.operators;

const extract = {
  hour: date => date.format('HH'),
  minute: date => date.format('mm'),
  second: date => date.format('ss')
};

interval(1000)
  .pipe(
    map(_ => moment()),
    switchMap(getDigits),
    switchMap(getDigit),
    map(getBinary),
    switchMap(getBinaryDigits))
  .subscribe(showBar);


function getDigits(date) {
  return from(Object.entries(extract)).pipe(
    map(([type, digits]) => ({type, value: digits(date)}))
  );
}

function getDigit({type, value}) {
  return from(value.split('')).pipe(
    map((digit, index) => ({type, index, digit}))
  );
}

function getBinary({type, index, digit}) {
  const binary = parseInt(digit).toString(2);
  return {type, index, binary: '0000'.substr(binary.length) + binary};
}

function getBinaryDigits({type, index, binary}) {
  return from(binary.split('')).pipe(
    map((digit, binaryIndex) => ({type, index, digit, binaryIndex}))
  );
}

function showBar({type, index, binaryIndex, digit}) {
  const classList = document
    .getElementById(type)
    .querySelectorAll('.stack')
    .item(index)
    .querySelectorAll('.bar')
    .item(binaryIndex)
    .classList;
  digit == '0' ? classList.remove('active') : classList.add('active');
}

.part {
  padding-bottom: 28px;
  position: relative;
  display: inline-block;
}
.part > h1 {
  position: absolute;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.stack {
  position: relative;
  width: 40px;
  box-sizing: border-box;
  list-style-type: none;
  margin: 0;
  padding: 7px;
  display: inline-block;
}
.stack::after {
  content: '';
  border: solid 4px #BCBBBB;
  border-top: none;
  display: block;
  position: absolute;
  height: 10px;
  bottom: 0;
  left: 0;
  right: 0;
}
.stack > .bar {
  background-color: #BCBBBB;
  width: 100%;
  margin-top: 3px;
  height: 4px;
}
.stack > .bar.active {
  background-color: #F48023;
}

<div id="clock">
  <div class="part" id="hour">
    <h1>Hour</h1>
    <ul class="stack">
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
    </ul>
    <ul class="stack">
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
    </ul>
  </div>
  <div class="part" id="minute">
    <h1>Minute</h1>
    <ul class="stack">
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
    </ul>
    <ul class="stack">
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
    </ul>
  </div>
  <div class="part" id="second">
    <h1>Second</h1>
    <ul class="stack">
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
    </ul>
    <ul class="stack">
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
      <li class="bar"></li>
    </ul>
  </div>
</div>

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.3.3/rxjs.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

I originally wrote this on Codepen, where I used SCSS in stead of regular CSS. If you're interested in that stuff, you can find it here.