IONIC V3 | SIMPLE CALCULATOR | IONIC ADVANCE

Share the post

IONIC V3 | SIMPLE CALCULATOR | IONIC ADVANCE

Hello All, In this topic we will see the simple calculator example using Ionic V3.  If you develop the calculator using any language many mathematical concepts get cleared. In this example, We will do the simple calculation like addition, subtraction, multiplication, division & square root. So, let’s start :

Simple Calculator Example :

We will generate the new page by using the following command :
       
ionic g page simple-calculator
If you want to see the generate command’s use in ionic then please see here.

HTML :

       

<!--
  Generated template for the SimpleCalculatorPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar>
    <ion-title>Simple Calculator</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-item lines="none">
    <ion-input type="text" [(ngModel)]="calculatedValue"></ion-input>
  </ion-item>

  <ion-grid>

    <ion-row>
      <ion-col col-3>
        <button ion-button round color="danger" (click)="operate('AC')">AC</button>
      </ion-col>
      <ion-col col-3>
        <button ion-button round color="danger" (click)="operate('C')">C</button>
      </ion-col>

    </ion-row>

    <ion-row>
      <ion-col>
        <button ion-button round color="danger" (click)="operate('1')">1</button>
      </ion-col>
      <ion-col>
        <button ion-button round color="danger" (click)="operate('2')">2</button>
      </ion-col>
      <ion-col>
        <button ion-button round color="danger" (click)="operate('3')">3</button>
      </ion-col>
      <ion-col>
        <button ion-button round color="danger" (click)="operate('4')">4</button>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        <button ion-button round color="danger" (click)="operate('5')">5</button>
      </ion-col>
      <ion-col>
        <button ion-button round color="danger" (click)="operate('6')">6</button>
      </ion-col>
      <ion-col>
        <button ion-button round color="danger" (click)="operate('7')">7</button>
      </ion-col>
      <ion-col>
        <button ion-button round color="danger" (click)="operate('8')">8</button>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        <button ion-button round color="danger" (click)="operate('9')">9</button>
      </ion-col>
      <ion-col>
        <button ion-button round color="danger" (click)="operate('0')">0</button>
      </ion-col>
      <ion-col>
        <button ion-button round color="danger" (click)="operate('=')"> = </button>
      </ion-col>
      <ion-col>
        <button ion-button round color="danger" (click)="operate('√x')">√x</button>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        <button ion-button round color="danger" (click)="operate('+')">+</button>
      </ion-col>
      <ion-col>
        <button ion-button round color="danger" (click)="operate('-')">-</button>
      </ion-col>
      <ion-col>
        <button ion-button round color="danger" (click)="operate('x')"> x</button>
      </ion-col>
      <ion-col>
        <button ion-button round color="danger" (click)="operate('/')">/</button>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>
In the above HTML, We use an ionic grid. Inside the Ionic grid, We have added ion-row. Inside ion-row, We have added multiple ion-col. Please see the output as shown below :
Output

CSS:

       
page-simple-calculator {

    .item-md.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner, .item-md.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
        border-bottom-color: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }
   
    .item-md.item-block .item-inner {
        padding-right: 8px;
        border-bottom: none;
    }
}
In above CSS, We have set the border-bottom to none. Because, If you implement the ion-item then automatically the small green line comes under ion-item to overcome that issue we have set the border-bottom to none.

TS :

       
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the SimpleCalculatorPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-simple-calculator',
  templateUrl: 'simple-calculator.html',
})
export class SimpleCalculatorPage {

  calculatedValue: any = '0';
  operatorValue: any = '';
  modeValue: any = '';
  finalValue: any = '';

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SimpleCalculatorPage');
  }

  operate(data) {
    console.log(data);


    if (data != 'AC' && data != 'C') {
      this.calculatedValue = (this.calculatedValue).replace(/^0+/, '');
      this.calculatedValue = this.calculatedValue + data;
    }


    if (data == 'AC') {
      this.modeValue = 'AC';
      this.calculateVal(this.modeValue);
    } else if (data == 'C') {
      this.modeValue = 'C';
      this.calculateVal(this.modeValue);
    } else if (data == '=') {
      this.modeValue = '=';
      this.calculateVal(this.modeValue);
    } else if (data == '+') {
      this.operatorValue = '+';
    } else if (data == '-') {
      this.operatorValue = '-';
    } else if (data == 'x') {
      this.operatorValue = 'x';
    } else if (data == '/') {
      this.operatorValue = '/';
    } else if (data == '√x') {
      this.operatorValue = '√x';
    }



  }
  calculateVal(mode) {
    console.log(mode);

    if (mode == 'AC') {
      this.finalValue = 0;
      this.calculatedValue = '0';
    } else if (mode == 'C') {
      this.calculatedValue = (this.calculatedValue).toString();
      this.calculatedValue = (this.calculatedValue != '0' && this.calculatedValue != '') ? this.calculatedValue.substring(0, this.calculatedValue.length - 1) : '0';
      if (this.calculatedValue == '') {
        this.calculatedValue = '0';
      }

    } else if (mode == '=') {

      if (this.operatorValue == '+') {
        this.calculatedValue = this.calculatedValue.split(this.operatorValue);
        this.finalValue = parseFloat(this.calculatedValue[0]) + parseFloat(this.calculatedValue[1]);
      } else if (this.operatorValue == '-') {
        this.calculatedValue = this.calculatedValue.split(this.operatorValue);
        this.finalValue = parseFloat(this.calculatedValue[0]) - parseFloat(this.calculatedValue[1]);
      } else if (this.operatorValue == 'x') {
        this.calculatedValue = this.calculatedValue.split(this.operatorValue);
        this.finalValue = parseFloat(this.calculatedValue[0]) * parseFloat(this.calculatedValue[1]);
      } else if (this.operatorValue == '/') {
        this.calculatedValue = this.calculatedValue.split(this.operatorValue);
        this.finalValue = parseFloat(this.calculatedValue[0]) / parseFloat(this.calculatedValue[1]);
      } else if (this.operatorValue == '√x') {
        this.finalValue = Math.sqrt(parseFloat(this.calculatedValue));
      }


      this.calculatedValue = this.finalValue;

    }

  }
}

	

As seen in the above example we have successfully implemented the simple calculator.

Leave a Comment