input-time

by Nic Fontaine

HTML

<h2>Display time between character input</h2>
<p>Type words, use "enter" to clear.</p>
<div id="out">&zwnj;</div>
<pre id="pre"></pre>

CSS

html {
  font-size: 14px;
  font-family: sans-serif;
  color: #333;
}
#out {
  background: #eee;
  padding: 0.5rem;
}
pre {
  margin: 0;
  background: #222;
  color: #eee;
  padding: 1rem;
}

JavaScript

let out = document.getElementById("out")
let pre = document.getElementById("pre")
let d = undefined

document.addEventListener("keypress", e => {
	// Single quote is opening quick search?
  e.preventDefault()
  let letter = String.fromCharCode(e.keyCode)
  out.innerHTML += letter
	pre.innerHTML += letter +
  " &nbsp;" + (Date.now() - d) +
  "<br>"
  d = Date.now()
  // Enter to clear
  if (e.keyCode === 13) {
  	out.innerHTML = ""
    pre.innerHTML = ""
    d = undefined
  }
})