Vue.js Calculator Tutorial: Crafting Your Own Calculator

Making a Simple Calculator with Vue JS Javascript | Using Vue Bootstrap and Vue JS CLI

How to Make Vue JS Calculator | Calculator - Vue JS

If you want to build an simple calculator using Vue js then you are in the right platform . In this article we gonna learn how to make a simple calculator using Vue JS . As Vue JS is a trending frontend framework of Javascript , This tutorial is gonna be super easy for building a calculator .

In this Vue js Example of App development we will go through the following steps :

Table Of Content :

Install a Vue JS

Install Vue JS Project

Source code of " .vue " file

Source code of " index.html " file

Step 1 :Install Vue JS :

I am assuming that you have already installed Vue JS in your system , if don't then just click here to learn how can you install vue js in your system .

Step 2 : Install Vue JS Project :

Open your command prompt and go to the directory where you want to create your project and use the following command to install your vue js project .

vue init webpack-simple project-name

After successfull installation of your project simply use the following commands to install all the required dependencies ( Node Modules ) and to run your server .

npm install

npm run dev

I have used webpack-simple template for this project but you can also use other templates like --

webpack

webpack-simple

simple

browserify

browserify-simple

Step 3 : App.vue ( Source Code ) :

project-name\src\App.vue

<template>
   <div id="app">
      <div class="container">
         <div class="row my-3">
            <div class="col-12 text-center">
               <h2>Simple Calculator Using Vue JS</h2>
            </div>
         </div>
         <div class="row">
            <div class="col-4"></div>
            <div class="col-4 p-0">
               <div class="row">
                  <div class="col-12">
                     <input type="text" name="output" class="form-control text-center" :placeholder="output" disabled>
                  </div>
               </div>
               <div class="row">
                  <div class="col-6 container-fluid p-1" style="padding-left:0px!important;padding-right:0px!important;">
                     <button class="btn btn-warning" style="width:100%;" v-on:click="clear">C</button>
                  </div>
                  <div class="col-6 container-fluid p-1">
                     <button class="btn btn-danger" style="width:100%;" v-on:click="remove">Del</button>
                  </div>
               </div>
               <div class="row">
                  <div class="col-3 container-fluid p-1">
                     <button class="btn btn-primary" style="width:100%;" v-on:click="append('7')">7</button>
                  </div>
                  <div class="col-3 container-fluid p-1">
                     <button class="btn btn-primary" style="width:100%;" v-on:click="append('8')">8</button>
                  </div>
                  <div class="col-3 container-fluid p-1">
                     <button class="btn btn-primary" style="width:100%;" v-on:click="append('9')">9</button>
                  </div>
                  <div class="col-3 container-fluid p-1">
                     <button class="btn btn-warning" style="width:100%;" v-on:click="multiplication">X</button>
                  </div>
               </div>
               <div class="row">
                  <div class="col-3 container-fluid p-1">
                     <button class="btn btn-primary" style="width:100%;" v-on:click="append('4')">4</button>
                  </div>
                  <div class="col-3 container-fluid p-1">
                     <button class="btn btn-primary" style="width:100%;" v-on:click="append('5')">5</button>
                  </div>
                  <div class="col-3 container-fluid p-1">
                     <button class="btn btn-primary" style="width:100%;" v-on:click="append('6')">6</button>
                  </div>
                  <div class="col-3 container-fluid p-1">
                     <button class="btn btn-warning" style="width:100%;" v-on:click="substraction">-</button>
                  </div>
               </div>
               <div class="row">
                  <div class="col-3 container-fluid p-1">
                     <button class="btn btn-primary" style="width:100%;" v-on:click="append('1')">1</button>
                  </div>
                  <div class="col-3 container-fluid p-1">
                     <button class="btn btn-primary" style="width:100%;" v-on:click="append('2')">2</button>
                  </div>
                  <div class="col-3 container-fluid p-1">
                     <button class="btn btn-primary" style="width:100%;" v-on:click="append('3')">3</button>
                  </div>
                  <div class="col-3 container-fluid p-1">
                     <button class="btn btn-warning" style="width:100%;" v-on:click="addition">+</button>
                  </div>
               </div>
               <div class="row">
                  <div class="col-3 container-fluid p-1">
                     <button class="btn btn-primary" style="width:100%;" v-on:click="append('0')">0</button>
                  </div>
                  <div class="col-3 container-fluid p-1">
                     <button class="btn btn-primary" style="width:100%;" v-on:click="dot('.')">.</button>
                  </div>
                  <div class="col-3 container-fluid p-1">
                     <button class="btn btn-primary" style="width:100%;" v-on:click="division">/</button>
                  </div>
                  <div class="col-3 container-fluid p-1">
                     <button class="btn btn-success" style="width:100%;" v-on:click="equal">=</button>
                  </div>
               </div>
            </div>
            <div class="col-4"></div>
         </div>
      </div>
   </div>
</template>
<script>
   export default {
     name: 'app',
     data () {
       return {
         output:'',
         clicked:false,
         prevalue:null,
         operator:null
       }
     },
     methods:
     {
       clear()
       {
         this.output='';
       },
       remove()
       {
         this.output=this.output.toString().slice(0,-1);
       },
       append(num)
       {
         if(this.clicked)
         {
           this.output='';
           this.clicked=false;
         }
         this.output=this.output.concat(num);
       },
       dot(num)
       {
         if(this.output.indexOf('.')===-1)
         {
           this.append(num);
         }
       },
       setPrevalue()
       {
           this.prevalue=this.output;
           this.clicked=true;
       },
       addition()
       {
         this.operator=(a,b)=>a+b;
         this.setPrevalue();
       },
       substraction()
       {
         this.operator=(a,b)=>a-b;
         this.setPrevalue();
       },
       multiplication()
       {
         this.operator=(a,b)=>a*b;
         this.setPrevalue();
       },
       division()
       {
         this.operator=(a,b)=>a/b;
         this.setPrevalue();
       },
       equal()
       {
         this.output=this.operator(parseFloat(this.prevalue),parseFloat(this.output));
         this.prevalue='';
       }
     }
   }
</script>
<style>
   #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
   }
</style>

Step 3 : index.html ( Source Code ) :

project-name\index.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>calculator</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
   </head>
   <body>
      <div id="app"></div>
      <script src="/dist/build.js"></script>
   </body>
</html>

That's it our simple calculator is ready you simply run your project and play with your calculator .

Thank your for reading this article

For any query do not hesitate to comment .