APM Calculator

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" data-semver="3.1.1" data-require="jquery@*"></script>
  <link href="style.css" rel="stylesheet" />

</head>

<body>
  <h1>APM Calculator</h1>
  <input id="text-box" placeholder="Write here" type="text" />
  <h2>Difficulty (miliseconds between actions)</h2>
  <input id="difficulty" value="2000" placeholder="miliseconds" type="number" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
  <section>
    <h3>Actions:</h3>
    <p id="output-actions">-</p>
    <h3>Times:</h3>
    <p id="output-times">-</p>
    <h3>Total time:</h3>
    <p id="output-total-time">-</p>
    <h3>Aps:</h3>
    <p id="output-aps">-</p>
    <h3>Apm:</h3>
    <p id="output-apm">-</p>
  </section>
  <script>
    var actions = 0;
    var _actions = actions;
    var times = [];



    document.getElementById("text-box").onkeyup = function() {

      var difficulty = document.getElementById("difficulty").value;

      document.getElementById("difficulty").disabled = true;
      actions += 1;
      times.push($.now());

      document.getElementById("output-actions").innerHTML = actions;
      document.getElementById("output-times").innerHTML = times;

      setTimeout(function(difficulty) {

        calculate(this.times);
      }, difficulty);

      function calculate(times) {
        _actions += 1;
        if (_actions == actions) {
          time_total = times[times.length - 1] - times[0];
          document.getElementById("output-total-time").innerHTML = time_total;
          aps = actions / (time_total / 1000);
          apm = aps * 60;
          document.getElementById("output-aps").innerHTML = aps;
          document.getElementById("output-apm").innerHTML = apm;
          reset();


        }
      }

      function reset() {
        actions = _actions = 0;
        times = [];
        document.getElementById("difficulty").disabled = false;
         document.getElementById("text-box").value = "";
        document.getElementById("output-actions").innerHTML = "-";
        document.getElementById("output-times").innerHTML = "-";
      }
    }
  </script>
</body>

</html>

// Code goes here

/* Styles go here */