Saturday, May 26, 2018

Published 2:32 PM by with 0 comment

How To Write A Simple Calculator With Vue

We are considering using Vue for a project at work, and this was a fun little thing to write to get started with it so I figured I'd type it up as a simple example for anyone else investigating Vue...

Vue.js calculator example

I'm assuming you've read through a Vue introduction. I used this one. You can play with an example of my calculator code here. I'll assume you have that open when explaining the other parts.

Basic setup

The calculator is a div whose id is 'calculator'. It has a result section for the display, and a buttons section for the buttons. Each button has a click method and a class for styling. The Vue instance is the calculator.

Data

The primary piece of data here is the value displayed in the calculator. I also keep track of the last operator entered (+, -, *, /). The current operator is not used in the HTML, but the displayValue is.

data: {
    displayValue: '0',
    currentOp: '',
},

Since it is only changed by the JS, I'm using Vue's {{ }} notation.

<span style="background: #FEFEFE; min-height: 45px">{{ displayValue }}</span>


Methods

Each button corresponds to a method. There's one for each operation, and a general one for the digits. The logic is pretty straightforward so just check out the code:

methods: {
 clear() {
  this.displayValue = '0';
  this.leftValue = '0';
  this.clearFlags();
 },

 //when +, -, *, or / are clicked (i.e., buttons that go between two values)
 addOp(op) {
  this.currentOp = op;
  this.leftValue = this.displayValue;
  this.clearNext = true;
 },
 log() {
  this.displayValue = Math.log10(this.displayValue);
  this.clearFlags();
 },
 inverse() {
  this.displayValue = 1 / this.displayValue;
  this.clearFlags();
 },

 //when number is added...left of decimal, shift all digits to the left one and add the number...right of decimal, just add the number
 addDigit(val) {
  if (this.clearNext) {
   this.displayValue = '0';
   this.clearNext = false;
  }
  if (val === '.') {
   if (this.decimalDisabled) { }
   else {
    this.displayValue += '.';
   }
  }
  else {
   if (this.decimalDisabled) {
    this.displayValue += val;
   }
   else {
    this.displayValue = this.displayValue * 10 + val;
   }
  }
 },

 //= button clicked
 evaluate() {
  if (this.equalDisabled) { }
  else {
   this.displayValue = parseFloat(this.displayValue);
   this.leftValue = parseFloat(this.leftValue);
   if (this.currentOp === '+') {
    this.displayValue = this.leftValue + this.displayValue;
   }
   else if (this.currentOp === '-') {
    this.displayValue = this.leftValue - this.displayValue;
   }
   else if (this.currentOp === '*') {
    this.displayValue = this.leftValue * this.displayValue;
   }
   else if (this.currentOp === '/') {
    this.displayValue = this.leftValue / this.displayValue;
   }
   this.clearFlags();
  }
 },
 clearFlags() {
  this.currentOp = '';
  this.clearNext = true;
 }
},

I am calling these using Vue's @ notation:

<div class="button" @click="clear">C</div>


Computed

To disable buttons when they can't do anything, I am using Vue's computed properties:

//set disabled behavior based on fields that determine it...deicmal disabled if already decimal and equal disabled if no operator
computed: {
 decimalDisabled: function () {
  return this.displayValue.toString().includes('.');
 },
 equalDisabled: function () {
  return this.currentOp === '';
 }
}

These are used to pick the appropriate class for the buttons that they affect using Vue's class binding:

<div :class="{ button: true, disabledButton: equalDisabled }" @click="evaluate">=</div>


Summary

That's it. It was remarkably simple to get a functioning calculator using Vue. It took me ~2 hours total, and I'd never used Vue before and JavaScript is not my primary language. This does not use everything available in Vue obviously, but it felt like a decent first sample project to try out. If you don't want to copy from codepen, I've also posted the code here.


      edit

0 comments:

Post a Comment