<div id="app">
<p>{{ paragraph }}</p>
<textarea id="typing-area"></textarea>
<p>Time remaining: {{ timer }}</p>
<p id="finish-message" style="display: none;">Finished</p>
</div>
<script>
const app = document.getElementById("app");
const typingArea = document.getElementById("typing-area");
const finishMessage = document.getElementById("finish-message");
let paragraph = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas lacus in enim congue, a commodo ipsum varius. Integer bibendum velit vel accumsan hendrerit. Nunc malesuada lacus vel velit facilisis consectetur. Sed bibendum erat euismod, fringilla nulla eu, tempor libero. Nam congue, magna id tincidunt feugiat, lectus eros blandit mi, sit amet congue ante odio a risus.";
let timer = 60;
let intervalId = null;
typingArea.addEventListener("input", function() {
if (this.value === paragraph) {
clearInterval(intervalId);
finishMessage.style.display = "block";
}
});
intervalId = setInterval(function() {
timer--;
app.innerHTML = `
<p>${paragraph}</p>
<textarea id="typing-area"></textarea>
<p>Time remaining: ${timer}</p>
<p id="finish-message" style="display: none;">Finished</p>
`;
if (timer === 0) {
clearInterval(intervalId);
finishMessage.style.display = "block";
}
}, 1000);
</script>
Explanations: This code creates a typing test module with a timer and a paragraph. The user can type in the typing-area textarea and the input event is listened for. If the text in the textarea is equal to the paragraph, the timer is cleared and the finish-message is displayed. The timer is displayed on the page and decrements every second using a setInterval function. When the timer reaches zero, the timer is cleared and the finish-message is displayed.