JSFiddle - React, Tailwind, and code Playground

by kinduff

HTML

<input id="keys" /><button id="reset">Reset</button>
<pre><code id="result" class="language-javascript">secrets(function () {
  alert('success!');
}, '');
</code></pre>

JavaScript

// adds jquery
var $ = function(query) { return document.getElementById(query); }

// http://stackoverflow.com/a/5438528/992000
function stringFormat(str, arr) {
  return str.replace(
      /\{([0-9]+)\}/g,
      function (_, index) { return arr[index]; });
}

// Secrets.js
var secrets = function(f, p, a) {
  var code = new RegExp(p + '$');
  document.onkeyup = function(e) {
    captureMode && code.test(a += '' + ((e || self.event).keyCode - 37)) && f()
  }
}

// Custom Script
var captureMode        = false,
    currSequence       = '',
    defaultSecretsCall = "secrets(function () {\n  alert('success!');\n}, '<seq>');";

function toggleCapture(state) {
  captureMode = state;
	return true;
}

function buildSecretsCall(sequence) {
  return defaultSecretsCall.replace('<seq>', sequence)
}

function captureSequence(e) {
  if (captureMode) {
    return null;
  }
  var key = ((e || self.event).keyCode - 37);
  currSequence += '' + key;
  var secretsCall = buildSecretsCall(currSequence);
  eval(secretsCall);
  $('keys').value = currSequence;
  $('result').innerHTML = secretsCall;
  return true;
}

function resetSequencer() {
  captureMode = false;
  currSequence = '';
  $('keys').value = currSequence;
  $('result').innerHTML = buildSecretsCall('');
  return true;
}

$('keys').onfocus  = toggleCapture(true);
$('keys').onblur   = toggleCapture(false);
$('keys').onkeyup  = captureSequence;
$('reset').onclick = resetSequencer;