Typing Behavior Analyzer | By Vijay Pancholi

by Vijay Pancholi

HTML

<div class="typing-app">
  <h1>⌨ Typing Behavior Analyzer | By Vijay Pancholi</h1>
  <textarea id="box" placeholder="Start typing..." onkeydown="track(event)"></textarea>

  <div class="stats">
    <p id="speed"></p>
    <p id="focus"></p>
  </div>
</div>

CSS

.typing-app {
  background: white;
  padding: 20px;
  width: 400px;
  border-radius: 10px;
}

textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
}

.stats {
  margin-top: 10px;
  background: #f1f1f1;
  padding: 10px;
}

JavaScript

let startTime = null;
let lastKeyTime = null;
let pauses = 0;
let keys = 0;

function track(e) {
  const now = Date.now();

  if (!startTime) startTime = now;
  if (lastKeyTime && now - lastKeyTime > 1000) pauses++;

  lastKeyTime = now;
  keys++;

  const time = (now - startTime) / 60000;
  const speed = Math.round(keys / time);

  document.getElementById("speed").innerText =
    `Typing Speed: ${speed} keys/min`;

  document.getElementById("focus").innerText =
    pauses > 5 ? "⚠ Low focus detected" : "✅ Good focus";
}