start

by Nic Fontaine

HTML

<link rel="stylesheet" href="https://rawgit.com/ngpfontaine/bonkr/master/src/bonkr.css">
<section class="center-container">

  <div class="inner">
  
    <div id="time-h" class="time left noselect">00</div>
    
    <div id="links" class="links flx-spc-2 flx-children-spc-2" tabindex="-1">
      <a href="https://example.com" target="_blank">1</a>
      <a href="https://example.com" target="_blank">2</a>
      <a href="https://example.com" target="_blank">3</a>
      <a href="https://example.com" target="_blank">4</a>
      <a href="https://example.com" target="_blank">5</a>
      <a href="https://example.com" target="_blank">6</a>
      <a href="https://example.com" target="_blank">7</a>
      <a href="https://example.com" target="_blank">8</a>
      <a href="https://example.com" target="_blank">9</a>
      <a href="https://example.com" target="_blank">10</a>
      <a href="https://example.com" target="_blank">11</a>
      <a href="https://example.com" target="_blank">12</a>
    </div>
    
    <div id="time-m" class="time right noselect">00</div>
    
  </div>
  
</section>

CSS

html, a {
  /* cursor: none; */
}

.center-container {
  max-width: 1050px;
  position: absolute;
  margin: 0 auto;
  right: 0; left: 0;
  top: 50%;
  transform: translateY(-50%);
}


.inner {
  position: relative;
  /* max-width: 500px; */
  /* margin: 0 auto; */
  display: flex;
}

.inner > div {
  
}

.time {
  flex: 0;
  align-self: center;
  line-height: 1;
  font-size: 11rem;
  letter-spacing: -5px;
}

.time.right {
}

.time.left {
}

.links {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  text-align: center;
  padding: 0 1rem;
}

.links a {
  flex: 1;
  padding: 2rem;
  background: #eee;
  border: 2px solid transparent;
  text-decoration: none;
  outline: none;
}

.links a:focus,
.links a:active {
  border: 2px solid #aaa;
}

JavaScript

const dom = {
	clock: {
  	h: document.getElementById("time-h"),
    m: document.getElementById("time-m")
  },
  links: document.getElementById("links").getElementsByTagName("a")
}

var grid = {
	len: dom.links.length,
  i: 0,
  nav: function(e) {
    switch(e.keyCode) {
      case 39: grid.i++
      break
      case 37: grid.i--
      break
    }
    if (grid.i < 0) {
    	grid.i = grid.len-1
    }
    else if (grid.i > grid.len-1) {
    	grid.i = 0
    }
    dom.links[grid.i].focus()
  }
}

document.addEventListener("keydown", grid.nav)

window.addEventListener("load", function() {
	dom.links[grid.i].focus()
})

var clock = {
	store: {
  	d: undefined,
    h: undefined,
    m: undefined
  },
  zero: function(n) {
  	if (n.length < 2) { n = "0" + n }
  	return n
  },
  run: function() {
  	clock.store.d = new Date()
    clock.store.h = clock.store.d.getHours().toString()
    clock.store.m = clock.store.d.getMinutes().toString()
    dom.clock.h.innerHTML = clock.zero(clock.store.h)
		dom.clock.m.innerHTML = clock.zero(clock.store.m)
    setTimeout(clock.run,1000)
  }
}
clock.run()