Create a Simple Calculator with Vue 3 and JavaScript

Create a Simple Calculator with Vue 3 and JavaScript

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

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 simple 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 calculator

and select all the default options to create the project.

We also need the Math.js package to let us evaluate math expression strings.

To install it, we run:

npm install mathjs

Create the Calculator

We can create the calculator by writing:

<template>
  <div>
    <div>{{ expression }}</div>
    <form @submit.prevent="calculate">
      <div>
        <button type="button" @click.stop="expression += '+'">+</button>
        <button type="button" @click.stop="expression += '-'">-</button>
        <button type="button" @click.stop="expression += '*'">*</button>
        <button type="button" @click.stop="expression += '/'">/</button>
      </div>
      <div>
        <button type="button" @click.stop="expression += '.'">.</button>
        <button type="button" @click.stop="expression += '9'">9</button>
        <button type="button" @click.stop="expression += '8'">8</button>
        <button type="button" @click.stop="expression += '7'">7</button>
      </div>
      <div>
        <button type="button" @click.stop="expression += '6'">6</button>
        <button type="button" @click.stop="expression += '5'">5</button>
        <button type="button" @click.stop="expression += '4'">4</button>
        <button type="button" @click.stop="expression += '3'">3</button>
      </div>
      <div>
        <button type="button" @click.stop="expression += '2'">2</button>
        <button type="button" @click.stop="expression += '1'">1</button>
        <button type="button" @click.stop="expression += '0'">0</button>
        <button type="submit">=</button>
      </div>
      <div>
        <button type="button" @click.stop="expression = ''">Clear</button>
      </div>
    </form>
  </div>
</template>
<script>
import { evaluate } from "mathjs";
export default {
  name: "App",
  data() {
    return {
      expression: "",
    };
  },
  methods: {
    calculate() {
      this.expression = evaluate(this.expression);
    },
  },
};
</script>
<style scoped>
button {
  width: 20px;
}
#clear-button {
  width: 50px;
}
</style>

javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

What is JavaScript - Stackfindover - Blog

What is PHP: - Who invented PHP, how it works, answers to all such questions about PHP, and much other information, you are going to

JavaScript Shopping Cart - Javascript Project for Beginners

JavaScript Shopping Cart - javascript shopping cart tutorial for beginnersBuy me a coffee 🍺 https://www.paypal.com/paypalme/ziddahSource Code: https://bit....

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

JavaScript compound assignment operators

We use assignment operator in JavaScript to store values in a variable. Read more...