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 grade calculator 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 grade-calculator
and select all the default options to create the project.
We also need to install the uuid package so that we can generate unique IDs for each grade entry.
To install it, we run:
npm i uuid
Create the Grade Calculator
To create the grade calculator, we write:
<template>
<form @submit.prevent="calculate">
<div v-for="(grade, index) of grades" :key="grade.id">
<label>grade</label>
<input v-model.number="grade.value" />
<button type="button" @click="deleteGrade(index)">delete grade</button>
</div>
<button type="button" @click="addGrade">add grade</button>
<button type="submit">calculate average</button>
</form>
<div>Your average grade is {{ average }}</div>
</template>
<script>
import { v4 as uuidv4 } from "uuid";
export default {
name: "App",
data() {
return {
grades: [{ id: uuidv4(), value: 0 }],
average: 0,
};
},
computed: {
formValid() {
return this.grades.every(({ value }) => !isNaN(+value));
},
},
methods: {
addGrade() {
this.grades.push({ id: uuidv4(), value: 0 });
},
deleteGrade(index) {
this.grades.splice(index, 1);
},
calculate() {
if (!this.formValid) {
return;
}
this.average =
this.grades.map(({ value }) => value).reduce((a, b) => a + b, 0) /
this.grades.length;
},
},
};
</script>
We have a form with the @submit directive to let us handle form submissions with the calculate method.
The prevent modifier lets us do client-side submissions instead of server-side.
Inside it, we render divs with v-for for each grade entry.
Inside each div, we have an input field that binds to the grade.value property with v-model .
The number modifier converts the input value to a nmber.
The delete grade button is set to type button so that it doesn’t submit the form when we click it.
It calls deleteGrade to delete the grade entry at the given index .
Below that, we have the add grade button to add a grade by calling addGrade when we click it.
And below that, we have the button to submit the form.
The div is used to display the average grade.
In the script tag, we have the data method that returns the grades array and average .
They’re both reactive properties.
The formValid computed property checks if every grades entry’s value property is a number with the isNaN function.
Below that, we have the methods we call.
The addGrade method calls push to add a new entry into the this.grades array.
uuidv4 returns a UUID string so we can add an ID to the entry.
We need the unique ID so that Vue 3 can discern the entries that are rendered.
We set that as the key prop’s value to make it a unique identifier for the row.
The deleteGrade method calls splice to remove an item with the index and 1 to remove the entry with the given index .
The calculate method calls map to return an array with the value s of each grades entry.
Then it calls reduce to add the numbers together. The 0 in the 2nd argument is the initial value.
And then the total is divided by this.grades.length to get the average.
Conclusion
We can create a grade calculator easily with Vue 3 and JavaScript.
