JSFiddle - React, Tailwind, and code Playground

by iaezzy

HTML

<form id="tipper">
    <textarea id="textariffic"></textarea>
    <p> <span class="label">CPM</span>
 <span id="CPM">0</span>

    </p>
    <p> <span class="label">WPM</span>
 <span id="WPM">0</span>

    </p>
</form>

CSS

form {
    margin: 20px auto;
    width: 500px;
}
#textariffic {
    width: 400px;
    height: 400px;
    font-size: 12px;
    font-family: monospace;
    line-height: 15px;
}

JavaScript

$(function () {
    $('textarea')
        .keyup(checkSpeed);
});

var iLastTime = 0;
var iTime = 0;
var iTotal = 0;
var iKeys = 0;

function checkSpeed() {
    iTime = new Date().getTime();

    if (iLastTime != 0) {
        iKeys++;
        iTotal += iTime - iLastTime;
        iWords = $('textarea').val().split(/\s/).length;
        $('#CPM').html(Math.round(iKeys / iTotal * 6000, 2));
        $('#WPM').html(Math.round(iWords / iTotal * 6000, 2));
    }

    iLastTime = iTime;
}