<span id='left'></span><span id='cursor'>T</span><span id='right'>he quick brown fox jumps over the lazy dog</span>
<br><input/>
<style>
  span {
    font-family: Monospace;
  }
  #cursor {
    background: darkred;
  }
</style>
<script>
  const l  = document.querySelector('#left');
  const c  = document.querySelector('#cursor');
  const r  = document.querySelector('#right');
  const tb = document.querySelector('input');

  tb.onkeydown = e => {
    tb.value = "";
    if (e.key != c.innerText) return;

    if (l.innerText == "") start = new Date();
    l.innerText += c.innerText;

    if (r.innerText != "") {
      const rest  = r.innerText
      r.innerText = rest.substr(1);
      c.innerText = rest[0];
    } else {
      const dt  = new Date() - start;
      const wpm = Math.round((60 * 1000 / 5 * l.innerText.length) / dt);
      alert("You typed " + wpm + " wpm!")
    }
  };
</script>