Как добавить калькулятор слов в минуту на веб-сайт с помощью JavaScript, HTML или CSS? ⇐ Jquery

[Anonymous]

Я уже некоторое время пытаюсь создать веб-сайт для тестирования набора текста и застрял в вопросе, как добавить счетчик слов в минуту. Я пробовал несколько способов, но ни один из них не работает. Я хочу, чтобы он выдавал количество слов в минуту после того, как пользователь правильно вводит подсказку.
Код приведен ниже:
HTML:






repl.it



man become as
and through find would here and before







Enter




JavaScript:
var input = document.getElementById("boch");
input.addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("bocho").click();
}
});

var element = document.querySelector("#boch");

element.onkeyup = function () {
var value = element.value;

if (value.includes("man")) {
document.getElementById('word-1').style.backgroundColor = 'green';
} else {
document.getElementById('word-1').style.backgroundColor = 'transparent';
}

if (value.includes("man become")) {
document.getElementById('word-2').style.backgroundColor = 'green';
} else {
document.getElementById('word-2').style.backgroundColor = 'transparent';
}

if (value.includes("man become as")) {
document.getElementById('word-3').style.backgroundColor = 'green';
} else {
document.getElementById('word-3').style.backgroundColor = 'transparent';
}

if (value.includes("man become as and")) {
document.getElementById('word-4').style.backgroundColor = 'green';
} else {
document.getElementById('word-4').style.backgroundColor = 'transparent';
}

if (value.includes("man become as and through")) {
document.getElementById('word-5').style.backgroundColor = 'green';
} else {
document.getElementById('word-5').style.backgroundColor = 'transparent';
}

if (value.includes("man become as and through find")) {
document.getElementById('word-6').style.backgroundColor = 'green';
} else {
document.getElementById('word-6').style.backgroundColor = 'transparent';
}

if (value.includes("man become as and through find would")) {
document.getElementById('word-7').style.backgroundColor = 'green';
} else {
document.getElementById('word-7').style.backgroundColor = 'transparent';
}

if (value.includes("man become as and through find would here")) {
document.getElementById('word-8').style.backgroundColor = 'green';
} else {
document.getElementById('word-8').style.backgroundColor = 'transparent';
}

if (value.includes("man become as and through find would here and")) {
document.getElementById('word-9').style.backgroundColor = 'green';
} else {
document.getElementById('word-9').style.backgroundColor = 'transparent';
}

if (value.includes("man become as and through find would here and before")) {
document.getElementById('word-10').style.backgroundColor = 'green';
} else {
document.getElementById('word-10').style.backgroundColor = 'transparent';
}

}
let tagArr = document.getElementsByTagName("input");
for (let i = 0; i < tagArr.length; i++) {
tagArr.autocomplete = 'off';
}


Подробнее здесь: https://stackoverflow.com/questions/658 ... pt-html-or