keyboard.html

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Keyboard experiments</title>
  <link href="../css/candy.css" rel="stylesheet">  
  <link href="../css/c64.css" rel="stylesheet">
  <link href="../style.css" rel="stylesheet">
 </head>
 <body class="candy greasy-green">

  <h1>Keyboard experiments</h1>

  <script>
    var C64 = { memory: new Uint8Array(0x10000) }
  </script>

  <details open>
   <summary title="Click to open/close">Log messages</summary>
   <pre class="log" tabindex="1"><tt></tt></pre>
  </details>

  <table class="keyboard">
  </table>

  <script src="log.js"></script>
  <script src="keyboard.js"></script>

  <script>
document.querySelector('.log').addEventListener('keydown', function(event) {
    console.log(event)
    Log.writeline(event)

    event.preventDefault()
    return false
}, false)

    for(var i = 0; i < C64.keyboard.matrix.length; i++) {
        var row = document.querySelector('.keyboard').insertRow(-1)
        for(var j = 0; j < C64.keyboard.matrix[i].length; j++) {
            var button = document.createElement('button')
            button.innerHTML = C64.keyboard.matrix[i][j]
            var cell = row.insertCell(-1)
            cell.appendChild(button)
        }
    }
  </script>

  </body>
</html>