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 an addition game program 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 addition-game
and select all the default options to create the project.
Create the Addition Game
To create the addition app, we write:
<template>
<form @submit.prevent="submit">
<div>
<label>{{ num1 }} + {{ num2 }}</label>
<input v-model.number="sum" />
</div>
<button type="submit">check</button>
</form>
<button type="button" @click="generateQuestion">start game</button>
<p>score: {{ score }}</p>
</template>
<script>
export default {
name: "App",
data() {
return {
num1: 0,
num2: 0,
sum: 0,
score: 0,
};
},
computed: {
formValid() {
const { sum } = this;
return +sum >= 0;
},
},
methods: {
submit() {
if (!this.formValid) {
return;
}
const { sum, num1, num2 } = this;
if (num1 + num2 === sum) {
this.score++;
}
this.generateQuestion();
},
generateQuestion() {
this.num1 = Math.ceil(Math.random() * 10);
this.num2 = Math.ceil(Math.random() * 10);
},
},
};
</script>
We create a form with the form element.
To listen for submissions, we listen to the submit event.
The prevent modifier lets us do client-side submission instead of server-side submission.
In the form, we have an input to let us enter our answer.
We bind the entered answer to the sum reactive property with v-model .
And we convert the entered value to a number automatically with the number modifier.
The button withn type set to submit lets us trigger form submissions by emitting the submit event.
In the component object, we have the data method to return an object with the initial values of all the reactive properties.
The formValid computed property lets us check if sum is bigger than 0.
In the submit method, we check if the form is valid with the formValid reactive property.
Then we get the num1 , num2 and sum values and check if num1 + num2 is equal to sum .
If they’re equal, then we increase score by 1.
We can assume they’re all numbers since num1 and num2 are generated with the Math.random method.
And we checked that sum is a number earlier with the formValid computed property.
We call generateQuestion to generate a num1 and num2 .
Math.random returns a number between 0 and 1, so we’ve to multiply it by a number we want to generate a larger range of numbers.
Math.ceil rounds the number up to the nearest integer.
generateQuestion is called when we click on the start game button and after we submitted an answer.
Conclusion
We can create an addition game program easily with Vue 3 and JavaScript.
