Font bits

by rouxbot

HTML

<span>Current: <span id='bits'>0</span></span>
<table>
<tbody id='fonts'></tbody>
</table>
<ul id='chars'>
</ul>

CSS

table {
  border-collapse: collapse;
}
tbody tr {
  padding: 0;
  margin: 0;
}

tbody td {
  border: 1px #000 solid;
  width: 10px;
  height: 10px;
  margin: 0;
}

tbody td.selected {
  background-color: #000;
}

ul li {
  display: inline-block;
}

JavaScript

let fontContainer = document.getElementById('fonts');
let bitContainer = document.getElementById('bits');
let charContainer = document.getElementById('chars');
// create a 5 by 5 grid
let row, cell, activeBits = 0;

let chars = {
	'0': 31599,
  '1': 9362,
  '2': 29671,
  '3': 31207,
  '4': 18925,
  '5': 31183,
  '6': 31695,
  '7': 18727,
  '8': 31727,
  '9': 18927,
  
  'A': 23535,
  'B': 15339,
  'C': 25166,
  'D': 15211,
  'E': 29647,
  'F': 5071,
  'G': 27599,
  'H': 23533,
  'I': 29847,
  'J': 11044,
  'K': 23277,
  'L': 29257,
  'M': 23549,
  'N': 24573,
  'O': 31599,
  'P': 4843,
  'Q': 28523,
  'R': 22511,
  'S': 31183,
  'T': 9367,
  'U': 27501,
  'V': 9581,
  'W': 24557,
  'X': 23213,
  'Y': 9389,
  'Z': 29351
}

function toggleCells(bits) {
  activeBits = bits;
  for (var i = 0; i < 15; i++) {
    let bit = Math.pow(2, i);
    if (bits & bit) {
    	document.getElementById('cell-' + bit).className = 'selected';
    } else {
    	document.getElementById('cell-' + bit).className = '';
    }
  }
  bitContainer.innerHTML = bits;
  return false;
}

for (var key in chars) {
  let li = document.createElement('li');
  li.innerHTML = key;
  li.addEventListener('click', toggleCells.bind(null, chars[key]));
  charContainer.appendChild(li);
}

let toggleCell = function (bit, cell) {
	if (activeBits & bit) {
  	activeBits = activeBits & ~bit;
  } else {
    activeBits |= bit;
  }
  console.log(activeBits);
  toggleCells(activeBits);
}

for (var i = 0; i < 15; i++) {
  let bit = Math.pow(2, i);
  if (i % 3 === 0) {
    row = document.createElement('tr');
    fontContainer.appendChild(row);
  }
  let cell = document.createElement('td');
  cell.id = 'cell-' + bit;
  row.appendChild(cell);
  cell.addEventListener('click', toggleCell.bind(null, bit));
}