<html>
<head>
<title>JavaScript</title>
</head>
<body>
<div class="message"></div>
<textarea name="words" cols="75" rows="5" disabled></textarea>
<br>
<button type="button">Start</button>
<script>
const wording = ["Do you like JavaScript as much as I do?", "Hope you are having fun this is a simple game you can make.", "Source code is included so you can create your own version of this challenge."];
let startTime, endTime;
const message = document.querySelector(".message");
const playText = document.querySelector("textarea");
const button = document.querySelector("button");
button.addEventListener("click", function () {
if (this.innerText == "Start") {
playText.disabled = false;
playGame();
}
else if (this.innerText == "Done") {
playText.disabled = true;
button.innerText = "Start";
endPlay();
}
})
function endPlay() {
let date = new Date();
endTime = date.getTime();
let totalTime = ((endTime - startTime) / 1000);
let str = playText.value;
let wordCount = wordCounter(str);
let speed = Math.round((wordCount / totalTime) * 60);
let finalMessage = "You typed at " + speed + " words per minute.";
finalMessage += "<br>" + compareWords(message.innerText, str);
message.innerHTML = finalMessage;
}
function wordCounter(strWords) {
let response = strWords.split(" ").length;
return response;
}
function compareWords(str1, str2) {
let words1 = str1.split(" ");
let words2 = str2.split(" ");
let cnt = 0;
words1.forEach(function (item, index) {
if (item == words2[index]) {
cnt++;
}
})
return (cnt + " correct out of " + words1.length + " words");
}
function playGame() {
let randomNum = Math.floor(Math.random() * wording.length);
message.innerText = wording[randomNum];
let date = new Date();
startTime = date.getTime();
button.innerText = "Done";
}
</script>
</body>
</html>