Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.
In this article, we’ll look at how to create a typing test with Vue 3 and JavaScript.
Create the Project
We can create the Vue project with Vue CLI.
To install it, we run:
npm install -g @vue/cli
with NPM or:
yarn global add @vue/cli
with Yarn.
Then we run:
vue create typing-test
and select all the default options to create the project.
Create the Typing Test
To create the typing test, we write:
<template>
<div v-if="parts.unmatchedPart.length > 1">
<div>
<b>
{{ parts.matchedPart }}
</b>
{{ parts.unmatchedPart }}
</div>
<button @click="start">start</button>
<textarea
:disabled="!started"
v-model="typedText"
style="width: 90vw; height: 300px"
></textarea>
</div>
<div v-else>
Your words per minute is {{ wpm }}
<button @click="restart">restart</button>
</div>
</template>
<script>
const textToType =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet tellus tortor. ";
export default {
name: "App",
data() {
return {
textToType,
typedText: "",
timer: undefined,
elapsedMs: 0,
wpm: 0,
started: false,
};
},
computed: {
parts() {
const { textToType } = this;
const splitTextToType = textToType.split("");
let endIndexMatch = 0;
for (const [index, s] of splitTextToType.entries()) {
if (s !== this.typedText[index]) {
endIndexMatch = index;
break;
}
}
return {
matchedPart: textToType.slice(0, endIndexMatch),
unmatchedPart: textToType.slice(endIndexMatch),
};
},
},
methods: {
start() {
this.timer = setInterval(() => {
this.elapsedMs++;
if (!this.started) {
this.started = true;
}
}, 1000);
},
restart() {
this.started = false;
this.elapsedMs = 0;
this.typedText = "";
},
},
watch: {
parts(val) {
if (val.unmatchedPart.length === 1) {
clearInterval(this.timer);
this.wpm =
textToType.split(" ").length / (this.elapsedMs / (60 * 1000));
}
},
},
};
</script>
We check if the typing test is completed with the parts.unmatchedPart.length > 1 expression.
parts.unmatchedPart has the part that we haven’t typed into the text area.
Inside the div, we display the text. The part that’s typed is displayed in bold with the b tag.
And the remaining part is stored in the parts.unmatchedPart property.
Below that, we have the start button that calls start when we click it to start the game.
The textarea is where we type in the text to complete the typing test.
In the div with the v-else directive, we display the stuff that we want to display when the test is done.
We show the wpm to the user.
And we have a restart button to call restart when we click on it.
In the script tag, we have the textToType with the text that we want to type.
In the data method, we return an object with the reactive properties.
typedText has the text we’re typing.
elapsedMs is the time that’s elapsed after we start the test.
wpm has the words per minute result.
started indicates whether we started the typing test.
We also have the parts computed property to get the textToType .
We split that so that we can check easily where the part that we typed in ends.
endIndexMatch has the index of the last character that matches what we’re supposed to type in.
At the end of the method, we return an object with the matchedPart , which is the string with the parts of the textToType string that we typed in.
unmatchedPart has the part of the textToType string that we haven’t typed in.
The start starts the typing test by calling sertInterval with a callback to increment this.elaspedMs to start counting the elapsed time.
And we set this.started to true if it’s false .
The restart method resets the values to their initial values.
Conclusion
We can create a typing test easily with Vue 3 and JavaScript.
