JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<div id="app">
  <input @keypress="keypress">
  <button @click="keystrokes = []">Clear</button>
  <table>
    <tr v-for="keystroke in keystrokes">
      <td>{{keystroke.time}}</td>
      <td>{{keystroke.delay}}</td>
      <td>{{keystroke.code}}</td>
    </tr>
  </table>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    keystrokes: [],
    lastTime: 0
  },
  methods: {
    keypress(event) {
      var time = +new Date;
      this.keystrokes.push({
        time: time,
        delay: time - this.lastTime,
        code: event.keyCode
      })
      this.lastTime = time;
    }
  }
})