cheshirecat.js

cheshirecat.js

window.onload = function () {

  var style = document.createElement("style")
  style.type = "text/css"
  style.innerHTML = [
    "input {width: 100%; outline: none; border:none; font-size: large; margin-left: 1em}",
    "pre {width: 100%; margin: 1em; 0; 1em; 1em;}"
  ].join(" ")
  document.body.appendChild(style)

  var input = document.createElement("input") //
  input.name = "input"
  input.placeholder = "..."

  var output = document.createElement("code")
  var outputWrapper = document.createElement("pre")
  outputWrapper.appendChild(output)

  document.body.appendChild(outputWrapper)
  document.body.appendChild(document.createElement("hr"))
  document.body.appendChild(input)

  var commandHistory = []
  var commandFuture = []

  function upHistory () {
    var historyItem = commandHistory.pop() || ""
    if (historyItem && historyItem.length) {
      commandFuture.push(historyItem)
    }
    input.value = historyItem
  }

  function downHistory () {
    var historyItem = commandFuture.pop() || ""
    if (historyItem && historyItem.length) {
      commandHistory.push(historyItem)
    }
    input.value = historyItem
  }

  function handleInput () {
    var current = output.innerHTML || ""
    current += eval(input.value)
    output.innerHTML = current + "\n"

    commandHistory = commandHistory.concat(commandFuture.reverse())
    commandFuture = []
    commandHistory.push(input.value)

    input.value = ""
    input.focus()
  }

  function handleKeys (event) {
    switch (event.keyCode) {
    case 13:
      handleInput()
      break

    case 38:
      upHistory()
      break

    case 40:
      downHistory()
      break
    }
  }

  window.addEventListener("keydown", handleKeys)

}