Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!doctype html>
<html lang="en">
  <head>
    <title>8x8 Matrix: 8-Bit Value Generator</title>
    <style>
    .led {
      width: 25px;
      height: 25px;
      color: black;
      background-color: white;
      border: 1px solid black;
      margin: 0 2px 2px 0;
    }
    .led::after {
      content: "0";
    }
    .active {
      color: white;
      background-color: black;
    }
    .active::after {
      content: "1";
    }
    #container {
      width: 232px;
    }
    #output {
      width: 225px;
      height: 50px;
    }
    body {
      margin-left: 10px;
    }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <textarea id="output"></textarea>
    <script>
    var memory = new Array(64);
    var buttons = [];
    var button = document.createElement("button");
    var container = document.getElementById("container");
    var output = document.getElementById("output");
    button.classList.add("led");
    for (var i = 0; i < 8; i++) {
      buttons.push(container.appendChild(button.cloneNode()));
    }
    function asBinary() {
      return buttons.map(function(button) {
        return +button.classList.contains("active");
      }).join("");
    }
    function padLeft(nr, n, str){
      return Array(n - String(nr).length + 1).join(str || "0") + nr;
    }
    function bin2hex(bin) {
      return parseInt(bin, 2).toString(16);
    }
    container.addEventListener("click", function(event) {
      if (event.target.nodeName === "DIV") {
        return;
      }
      event.target.classList.toggle("active");
      var bin = asBinary();
      var hex = "0x" + padLeft(bin2hex(bin), 2);
      var dec = parseInt(bin, 2);
      output.value = [hex, dec].join("\n");
    }, false);
    </script>
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rwaldronpro
0viewers