Angular - One-way Binding - Event Binding - Live Calculator app #17

akash-coded · 2022-07-27T07:52:41Z

akash-coded
Jul 27, 2022
Maintainer

Convert this static calculator webpage to a live calculator Angular app where the result will be updated in real-time using event binding.

uzma23 · 2022-07-27T11:59:55Z

uzma23
Jul 27, 2022

app.component.html

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label>First Number:</label>
        <input type="number" class="form-control" [(ngModel)]="num1" />
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label>Second Number:</label>
        <input type="number" class="form-control" [(ngModel)]="num2" />
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label>Enter Choice:</label>
        <input type="number" class="form-control" [(ngModel)]="oper" />
      </div>
    </div>
    <button type="submit" (click)="calculate()">CALCULATE</button>
  </div>
  <p>
    First Number:<strong class="text-uppercase">{{ num1 }}</strong>
  </p>
  <p>
    Secon Number:<strong class="text-uppercase">{{ num2 }}</strong>
  </p>
  <p>
    Result:<strong class="text-uppercase">{{ result }}</strong>
  </p>
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    public num1 : number = 0;
  public num2: number = 0;
  public oper : number = 0;
  public result : number = 0;
  public firstName: string = '';
  public lastName: string = '';
  public position: string = '';
  public salary: number = 0;

  constructor() {}

  ngOnInit(): void {}

     public calculate() {
    let num1 = this.num1;
    let num2 = this.num2;
    let operation = this.oper;

    switch (operation){
      case 1:
        this.result = num1 + num2;
        break;
      case 2:
        this.result = num1 - num2;
        break;
      case 3:
        this.result = num1 * num2;
        break;
      case 4:
        this.result = num1 / num2;
        break;
      case 5:
        this.result = num1 % num2;
        break;
      case 6:
        alert("Goodbye.");
        break;
      default:
        alert("Invalid choice!");
        break;
    }
  }
}

screenshot

0 replies

gayatribabar · 2022-07-27T12:04:22Z

gayatribabar
Jul 27, 2022

app.component.html

<!DOCTYPE html>
<html lang="en">
  <head> </head>
  <body>
    <p>Calculator</p>
    <p>1.Addition</p>
    <p>2.Substraction</p>
    <p>3.Multiplication</p>
    <p>4.Division</p>
    <input [(ngModel)]="num1" placeholder="Enter number" />
    <input [(ngModel)]="num2" placeholder="Enter number" />
    <input [(ngModel)]="choice" placeholder="Enter choice" />
    <button (click)="Calculate()">Calculate</button>
    <p>{{ num1 }}</p>
    <p>{{ num2 }}</p>
    <p>result: {{ result }}</p>
  </body>
</html>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  num1 : number =0;
  num2 : number =0;
  choice : number =0;
  result :number =0;

  Calculate()
  {
    
   
    if(this.choice==1)
    {
      this.result = this.num1+ this.num2;
    }
    else if(this.choice==2)
    {
      this.result = this.num1- this.num2;
    }
    else if(this.choice==3)
    {
      this.result = this.num1*this.num2;
    }
    else if(this.choice==4)
    {
      this.result = this.num1/this.num2;
    }
    this.num1=this.num2=0;
    
        
  }

  
  constructor() { }
  ngOnInit(): void {
  }
  
}

0 replies

meghvi-raj · 2022-07-27T12:26:50Z

meghvi-raj
Jul 27, 2022

APPS.COMPONENT.HTML

<div>
  <h1 style="text-align: center">WELCOME TO MY CALCULATOR!</h1>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label>First Number:</label>
        <input type="number" class="form-control" [(ngModel)]="num1" />
      </div>
    </div>
    <br />
    <div class="col-md-4">
      <div class="form-group">
        <label>Second Number:</label>
        <input type="number" class="form-control" [(ngModel)]="num2" />
      </div>
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label>Enter Choice:</label>
        <input type="number" class="form-control" [(ngModel)]="oper" />
      </div>
    </div>
    <br />
    <div>
      <p>Enter a choice between [1-6]</p>
      <p>1.Addition (+)</p>
      <p>2.Subtraction (-)</p>
      <p>3.Multiplication (*)</p>
      <p>4.Division(/)</p>
      <p>5.Modulus(%)</p>
      <p>6.Quit</p>
    </div>
    <button type="submit" (click)="calculate()">CALCULATE</button>
  </div>
  <p>
    First Number:<strong class="text-uppercase">{{ num1 }}</strong>
  </p>
  <p>
    Second Number:<strong class="text-uppercase">{{ num2 }}</strong>
  </p>
  <p>
    Result:<strong class="text-uppercase">{{ result }}</strong>
  </p>
</div>

APPS.COMPONENT.TS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    public num1 : number = 0;
  public num2: number = 0;
  public oper : number = 0;
  public result : number = 0;
  public firstName: string = '';
  public lastName: string = '';
  public position: string = '';
  public salary: number = 0;



  constructor() {}

  ngOnInit(): void {}

     public calculate() {
    let num1 = this.num1;
    let num2 = this.num2;
    let operation = this.oper;

    switch (operation){
      case 1:
        this.result = num1 + num2;
        break;
      case 2:
        this.result = num1 - num2;
        break;
      case 3:
        this.result = num1 * num2;
        break;
      case 4:
        this.result = num1 / num2;
        break;
      case 5:
        this.result = num1 % num2;
        break;
      case 6:
        alert("Goodbye.");
        break;
      default:
        alert("Invalid choice!");
        break;
    }
    
  }
}

0 replies

ghost · 2022-07-27T12:33:02Z

ghost
Jul 27, 2022

app.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    public num1 : number = 0;
  public num2: number = 0;
  public operation : number = 0;
  public output : number = 0;

  constructor() {}

  ngOnInit(): void {}

     public calculate() {
    let num1 = this.num1;
    let num2 = this.num2;
    let operation = this.operation;

    switch (operation){
      case 1:
        this.output = num1 + num2;
        break;
      case 2:
        this.output = num1 - num2;
        break;
      case 3:
        this.output = num1 * num2;
        break;
      case 4:
        this.output = num1 / num2;
        break;
      case 5:
        this.output = num1 % num2;
        break;
      case 6:
        break;
      default:
        alert("Invalid input!");
        break;
    }
  }
}

app.component.html

<div class="container">
    <div class="row">
      <div class="col-md-3">
        <div class="form-group">
            <label>Enter Choice:<br>1. Addition<br/>2. Substraction <br/>3. Multiplicaton<br/>4. Division<br/>5. Modulus<br/>6. Quit<br><br></label>
          <label>First Number:</label>
          <input type="number" class="form-control" [(ngModel)]="num1" />
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <label>Second Number:</label>
          <input type="number" class="form-control" [(ngModel)]="num2" />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <div class="form-group">
          <input type="number" class="form-control" [(ngModel)]="operation" />
        </div>
      </div>
      <button type="submit" (click)="calculate()">CALCULATE</button>
    </div>
    <p>
      First Number:<strong class="text-uppercase">{{ num1 }}</strong>
    </p>
    <p>
      Second Number:<strong class="text-uppercase">{{ num2 }}</strong>
    </p>
    <p>
      Result:<strong class="text-uppercase">{{ output }}</strong>
    </p>
  </div>

screenshot

0 replies

Kuntapaliwal · 2022-07-27T19:20:16Z

Kuntapaliwal
Jul 27, 2022

calculator.component.html

<div>

    <h1>Calculator with Html & Js</h1>

    <p id="myParagraph">Welcome to the calculator World</p>
    <form action="#" class="form-group, col-6 ">
        <input type="number" name="num1" id="num1" [(ngModel)]="ndata1" placeholder="enter 1st number" class="col-2"
            (keyup)="calculator()" />
        <select name="operators" id="operators" [(ngModel)]="operation" (keyup.enter)="calculator()"
            (change)="calculator()" (blur)="calculator()" class="col-1 mx-2">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
            <option value="%">%</option>
        </select>
        <input type="number" name="num2" id="num2" placeholder="num2" [(ngModel)]="ndata2" (keyup)="calculator()"
            class="col-2" />
        <!-- <button type="submit" (click)="calculator()">Calculate</button> -->
    </form>
    <div class="col-6 my-3">
        <h3 id="n1">{{ndata1}}</h3>
        <h3 id="result">{{operation}}</h3>
        <h3 id="n2">{{ndata2}}</h3>

        <h3 id="n2">{{result}}</h3>


    </div>

calculate.componator.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {

  

ndata1 : number =0;
ndata2 : number =0;
operation : string ='+';
result :number =0;

public calculator()
 {
  //let  result : number =0 ;
  switch (this.operation) {
    case '+':
     this.result = this.ndata1 + this.ndata2;
      break;
    case '-':
      this.result = this.ndata1 - this.ndata2;
      break;
    case '*':
      this.result = this.ndata1 * this.ndata2;
      break;
    case '/':
      this.result = this.ndata1 / this.ndata2;
      break;
    case '%':
      this.result = this.ndata1 % this.ndata2;
      break;
    default:
      alert("Invalid choice!");
      break;
  }
  
}
constructor() { }

  ngOnInit(): void {
  }

}

output

0 replies

ghost · 2022-07-28T03:38:39Z

ghost
Jul 28, 2022

app.component.html

<h1>Calculator</h1>
<p>1.Addition</p>
<p>2.Substraction</p>
<p>3.Multiplication</p>
<p>4.Division</p>
<main id="welcome"></main>

<label><b>Enter First number</b></label>
<input type="number" [(ngModel)]="num1" />
<br />
<br />
<label><b>Enter second number</b></label>
<input type="number" [(ngModel)]="num2" />
<br />
<br />
<label><b>Enter your choice</b></label>
<input type="number" [(ngModel)]="operation" />
<br />
<h3 id="result">{{ result }}</h3>

<button type="submit" (click)="calculate()">Perform Calculation</button>

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})



export class AppComponent implements OnInit {
  title = 'calculator';
  public num1: number = 0;
  public num2: number = 0;
  public result: number = 0;
  public operation: number = 0;
  constructor() { }

  ngOnInit(): void { }
  public calculate() {
    let num1 = this.num1;
    let num2 = this.num2;
    let operation = this.operation;

    switch (operation) {
      case 1:
        this.result = num1 + num2;
        break;
      case 2:
        this.result = num1 - num2;
        break;
      case 3:
        this.result = num1 * num2;
        break;
      case 4:
        this.result = num1 / num2;
        break;
      case 5:
        this.result = num1 % num2;
        break;
      case 6:
        alert("Goodbye.");
        break;
      default:
        alert("Invalid choice!");
        break;
    }
  }
}

0 replies

vshvandana · 2022-07-28T03:39:16Z

vshvandana
Jul 28, 2022

calculator.html

<h1 style="text-align: center">Calculator</h1>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label>First Number:</label>
                <input type="number" class="form-control" [(ngModel)]="num1" />
            </div>
        </div>
        <br>
        <div class="col-md-4">
            <div class="form-group">
                <label>Second Number:</label>
                <input type="number" class="form-control" [(ngModel)]="num2" />
            </div>
        </div>
    </div>

    <br>

    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label>Enter Choice:</label>
                <input type="number" class="form-control" [(ngModel)]="operation" />
            </div>
            <br>
        </div>
        <button type="submit" (click)="calculate()">CALCULATE</button>
    </div>
    <br>

    <p>
        First Number:<strong class="text-uppercase">{{ num1 }}</strong>
    </p>
    <p>
        Second Number:<strong class="text-uppercase">{{ num2 }}</strong>
    </p>
    <p>
        Result:<strong class="text-uppercase">{{ result }}</strong>
    </p>
</div>

calculator.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {
  num1: number = 0;
  num2: number = 0;
  operation: number = 0;
  result: number = 0;

  constructor() { }

  ngOnInit(): void { }

  public calculate() {
    let num1 = this.num1;
    let num2 = this.num2;
    let operation = this.operation;

    switch (operation) {
      case 1:
        this.result = num1 + num2;
        break;
      case 2:
        this.result = num1 - num2;
        break;
      case 3:
        this.result = num1 * num2;
        break;
      case 4:
        this.result = num1 / num2;
        break;
      case 5:
        this.result = num1 % num2;
        break;
      case 6:
        alert("Goodbye.");
        break;
      default:
        alert("Invalid choice!");
        break;
    }
  }
}

0 replies

ApoorvaSinha · 2022-07-28T04:09:14Z

ApoorvaSinha
Jul 28, 2022

calculator.component.html

<!DOCTYPE html>
<html lang="en">
  <body>
    <p>Calculator</p>
    <p>1.Addition</p>
    <p>2.Substraction</p>
    <p>3.Multiplication</p>
    <p>4.Division</p>
    <input type="number" [(ngModel)]="num1" placeholder="Enter number" />
    <input type="number" [(ngModel)]="num2" placeholder="Enter number" />
    <input type="number" [(ngModel)]="choice" placeholder="Enter choice" />
    <button (click)="Calculate()">Calculate</button>
    <p>{{ num1 }}</p>
    <p>{{ num2 }}</p>
    <p>result: {{ result }}</p>
  </body>
</html>

calculator.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {
 
  num1 : number =0;
  num2 : number =0;
  choice : number =0;
  result :number =0;

  Calculate()
  {
    
    if(this.choice==1)
    {
      this.result = this.num1 + this.num2;
    }
    else if(this.choice==2)
    {
      this.result = this.num1- this.num2;
    }
    else if(this.choice==3)
    {
      this.result = this.num1*this.num2;
    }
    else if(this.choice==4)
    {
      this.result = this.num1/this.num2;
    }
    this.num1=this.num2=0;
  
  }

  constructor() { }

  ngOnInit(): void {
  }
}

screenchot

0 replies

Coder-093 · 2022-07-28T04:37:06Z

Coder-093
Jul 28, 2022

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'live-calc';
  
  num1 : number =0;
  num2 : number =0;
  choice : number =0;
  result :number =0;

  Calculate()
  {
    
    if(this.choice==1)
    {
      this.result = this.num1 + this.num2;
    }
    else if(this.choice==2)
    {
      this.result = this.num1- this.num2;
    }
    else if(this.choice==3)
    {
      this.result = this.num1*this.num2;
    }
    else if(this.choice==4)
    {
      this.result = this.num1/this.num2;
    }
    
  
  }

  constructor() { }

  ngOnInit(): void {
  }
  
}

app.component.html

<!DOCTYPE html>
<html lang="en">
  <body>
    <p> Live Calculator</p>
    <p>1.Addition</p>
    <p>2.Substraction</p>
    <p>3.Multiplication</p>
    <p>4.Division</p>
    <p>5.Modulus</p>
    <input type="number" [(ngModel)]="num1" placeholder="Enter number" />
    <input type="number" [(ngModel)]="num2" placeholder="Enter number" />
    <input type="number" [(ngModel)]="choice" placeholder="Enter choice" />
    <button (click)="Calculate()">Calculate</button>
    <p>{{ num1 }}</p>
    <p>{{ num2 }}</p>
    <p>result: {{ result }}</p>
  </body>
</html>

0 replies

MaheshMorem · 2022-08-29T07:42:56Z

MaheshMorem
Aug 29, 2022

app.component.html

` <style>
.buttonTest{
border: none;
color: white;
background: transparent;
outline: none;
}
.txtInput{
border: none;
background: transparent;
color: white;
}
.divCalculator{
width: 245px;
}
.title{
text-align: center;
}
.outerDiv{
display: flex;
justify-content: center;
align-items: center;
}
.inputFields{
background: black;
color: white;
}
.buttons{
background: #000000ed;
}
</style>

Calculator

C % ← /

  <div class="col-sm-12 p-1 m-0">
    <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1 buttonTest" type="button" (click)="pressNum('7')">7</button>
    <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1 buttonTest" type="button" (click)="pressNum('8')">8</button>
    <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1 buttonTest" type="button" (click)="pressNum('9')">9</button>
    <button class="btn btn-lg btn-secondary col-sm-3 p-1 buttonTest" type="button" (click)="pressOperator('*')">X</button>
  </div>
  <div class="col-sm-12 p-1 m-0">
    <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1 buttonTest" type="button" (click)="pressNum('4')">4</button>
    <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1 buttonTest" type="button" (click)="pressNum('5')">5</button>
    <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1 buttonTest" type="button" (click)="pressNum('6')">6</button>
    <button class="btn btn-lg btn-secondary col-sm-3 p-1 buttonTest" type="button" (click)="pressOperator('-')">-</button>
  </div>
  <div class="col-sm-12 p-1 m-0">
    <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1 buttonTest" type="button" (click)="pressNum('1')">1</button>
    <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1 buttonTest" type="button" (click)="pressNum('2')">2</button>
    <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1 buttonTest" type="button" (click)="pressNum('3')">3</button>
    <button class="btn btn-lg btn-secondary col-sm-3 p-1 buttonTest" type="button" (click)="pressOperator('+')">+</button>
  </div>
  <div class="col-sm-12 p-1 m-0">
    <button class="btn  col-sm-3 buttonTest" type="button"></button>
    <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1 buttonTest" type="button" (click)="pressNum('.')">.</button>
    <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1 buttonTest" type="button" (click)="pressNum('0')">0</button>
    <button class="btn btn-lg btn-success col-sm-3 p-1 buttonTest" type="button" (click)="getAnswer()">=</button>
  </div>

</div>

`

app.component.ts

`import { Component } from '@angular/core';

@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
input:string = '';
result:string = '';
pressNum(num: string) {
if (num==".") {
if (this.input !="" ) {
const lastNum=this.getLastOperand()
if (lastNum.lastIndexOf(".") >= 0) return;
}
}
if (num=="0") {
if (this.input=="" ) {
return;
}
const PrevKey = this.input[this.input.length - 1];
if (PrevKey === '/' || PrevKey === '' || PrevKey === '-' || PrevKey === '+') {
return;
}
}
this.input = this.input + num
this.calcAnswer();
}
getLastOperand() {
let pos:number;
pos=this.input.toString().lastIndexOf("+")
if (this.input.toString().lastIndexOf("-") > pos) pos=this.input.lastIndexOf("-")
if (this.input.toString().lastIndexOf("") > pos) pos=this.input.lastIndexOf("")
if (this.input.toString().lastIndexOf("/") > pos) pos=this.input.lastIndexOf("/")
return this.input.substr(pos+1)
}
pressOperator(op: string) {
const lastKey = this.input[this.input.length - 1];
if (lastKey === '/' || lastKey === '' || lastKey === '-' || lastKey === '+') {
return;
}
this.input = this.input + op
this.calcAnswer();
}
clear() {
if (this.input !="" ) {
this.input=this.input.substr(0, this.input.length-1)
}
}
allClear() {
this.result = '';
this.input = '';
}
calcAnswer() {
let formula = this.input;
let lastKey = formula[formula.length - 1];
if (lastKey === '.') {
formula=formula.substr(0,formula.length - 1);
}
lastKey = formula[formula.length - 1];
if (lastKey === '/' || lastKey === '*' || lastKey === '-' || lastKey === '+' || lastKey === '.') {
formula=formula.substr(0,formula.length - 1);
}
this.result = eval(formula);
}
getAnswer() {
this.calcAnswer();
this.input = this.result;
if (this.input=="0") this.input="";
}

}
`

0 replies

PurnaPichuka · 2022-10-14T05:31:13Z

PurnaPichuka
Oct 14, 2022

html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap_Form_A</title>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container col-md-5 col-lg-6">
      <form
        action="#"
        method="GET"
        class="container font-weight-bold mx-auto text-light"
      >
        <div class="container bg-secondary my-4">
          <div class="text-light text-center">
            <h1 class="text-uppercase font-weight-bold">Online Calculator</h1>
          </div>

          <!-- NUMBER-1 -->
          <section class="form-group">
            <label for="number1">Number1:</label>
            <input
              type="number"
              name="number1"
              id="number1"
              class="form-control"
              placeholder="enter a number"
              [(ngModel)]="number1"
            />
          </section>

          <!-- OPERATOR DROPDOWN -->
          <section class="form-group">
            <label for="Operator">Operator:</label>
            <select
              name="operator"
              id="operator"
              class="form-control"
              [(ngModel)]="operator"
            >
              <option value="" selected>Select Operator</option>
              <option value="+">+</option>
              <option value="-">-</option>
              <option value="*">*</option>
              <option value="/">/</option>
            </select>
          </section>

          <!-- NUMBER-2 -->
          <section class="form-group">
            <label for="number2">Number2:</label>
            <input
              type="number"
              name="number2"
              id="number2"
              class="form-control"
              placeholder="enter a number"
              [(ngModel)]="number2"
            />
          </section>

          <section class="form-group">
            <input
              type="button"
              class="form-control btn btn-block bg-primary text-uppercase text-light font-weight-bold my-3"
              value="Calculate"
              (click)="calculate()"
            />
          </section>

          <section class="form-group">
            <h3>
              Result of {{ number1 }} {{ operator }} {{ number2 }} is
              {{ result }}
            </h3>
            <br />
          </section>
        </div>
      </form>
    </div>
  </body>
</html>

ts file

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-one-way-binding-event-bindin-live-calculator',
  templateUrl: './one-way-binding-event-bindin-live-calculator.component.html',
  styleUrls: ['./one-way-binding-event-bindin-live-calculator.component.css']
})
export class OneWayBindingEventBindinLiveCalculatorComponent implements OnInit {

  public number1 : number = 0;
  public number2 : number = 0;
  public result : number = 0;
  public operator="";
  
  calculate(){
      console.log(this.operator);
      switch (this.operator){
        case "+":
          this.result = this.number1 + this.number2;
          break;
        case "-":
          this.result = this.number1 - this.number2;
          break;
        case "*":
          this.result = this.number1 * this.number2;
          break;
        case "/":
          this.result = this.number1 / this.number2;
          break;
        default:
          alert("Invalid input!");
          break;
      }
  }

  constructor() { }

  ngOnInit(): void {
  }

}

0 replies

rrajbanshi · 2022-10-14T06:26:45Z

rrajbanshi
Oct 14, 2022

<h1 class="m-5 p-4 text-center text-success">ONLINE CALCULATOR</h1>

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-5 col-lg-6">
                <div>
                    <div class="form-group">
                      <label for="number1">Number 1</label>
                      <input type="number" class="form-control" id="number1"
                      #number1 
                      (keyup.enter) = "numberOneAdd(number1.value); number1.value = ''"
                      (blur) = "numberOneAdd(number1.value); number1.value = ''"
                      placeholder="Enter the number">
                    </div>
                    <div class="form-group">
                        <label for="">Select options</label>
                          <select [(ngModel)]="selectedLevel" (change)="selected()">
                            <option *ngFor="let item of data" [ngValue]="item">{{item}}</option>
                        </select>
                        {{selectedLevel}}
                    </div>
                    <div class="form-group">
                      <label for="number2">Number 2</label>
                      <input type="number" class="form-control" id="number2"
                      #number2
                      (keyup.enter) = "numberTwoAdd(number2.value); number2.value = ''"
                      (blur) = "numberTwoAdd(number2.value); number2.value = '' "
                      placeholder="Enter the number">
                    </div>
                    <!-- <div class="col-md-12 text-center">
                        <button type="submit" class="btn btn-primary btn-block">Calculate</button>
                    </div> -->

                    <div id="loginButton" class="my-4">
                      <button type="button" class="btn btn-success btn-block" (click) = "calculateOperation()">submit</button>
                    </div>
                    <h2>Result {{result}}</h2>
            </div>
        </div>
    </div>

import { Component, OnInit } from '@angular/core';
import { ɵINTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS } from '@angular/platform-browser-dynamic';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {
  num1:number = 0;
  num2:number = 0;
  
  result : number  = 0;
  numberOneAdd(number1 : string){
    this.num1 = Number(number1);
  }
  numberTwoAdd(number2: string){
    this.num2 = Number(number2);
  }

  selectedLevel:string = '';
  data:Array<string> = [
    "+",
     "-",
     "*",
     "/",
     "%"
  ];

  selected(){
    console.log(this.selectedLevel)
  }
 
  calculateOperation(){
     let data:string = this.selectedLevel;
     switch(data){
      case '+':
        this.result = this.num1 + this.num2;
        break;

        case '-':
          this.result = this.num1 - this.num2;
          break;
        
        case '*':
          this.result = this.num1 * this.num2;
          break;
        
        case '/':
        this.result = this.num1 / this.num2;
         break;

        case '%':
         this.result = this.num1 % this.num2;
          break;

        default:
          break;
     }
  }


  constructor() { }

  ngOnInit(): void {
   
  }

}

0 replies

NavneetBais · 2022-10-14T06:37:59Z

NavneetBais
Oct 14, 2022

Calculate Ts File

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  
   result:number   = 0;
   num1: number = 0 ;
   num2 : number = 0 ;
   calculate (fname: string , sname:string , operation:string){
    this.num1 = Number(fname) ;
    this.num2 = Number(sname)
      switch(operation){
        case "*" :
          this.result = this.num1 * this.num2 ;
          break ;
        case "-" : 
        this.result  = this.num1 - this.num2 ;
          break ;
        case "+" : 
        this.result  =this.num1  + this.num2 ;
          break ;
        case "/" : 
        this.result  = this.num1 / this.num2 ;
          break ;
      }
  }


}

Calculator Html File

<div class="col-lg-4 offset-4 border border-primary mt-5">
    <div class="form-group">
        <label for="fNumber">Enter First Number</label>
        <input #fname type="number" class="form-control" id="fNumber" aria-describedby="emailHelp" placeholder="First Number">
        
      </div>
      <div class="form-group">
        <label for="sNumber">Enter Second Number</label>
        <input #sname type="number" class="form-control" id="sNumber" placeholder="Second Number">
      </div>
      <div class="form-check">
        <select #operation name="operation" id="operation">
            <option value="*">*</option>
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="/">/</option>
        </select>
      </div>
      <div>
        Result : {{result}}
      </div>
      <button class="btn btn-primary" (click) = "calculate(sname.value , fname.value , operation.value);" >Calculate</button>
</div>

0 replies

lingamurthi · 2022-10-14T10:30:11Z

lingamurthi
Oct 14, 2022

//APP.COMPONENT.HTML
<div>

  <input #operation1 type="text" value="">Enter 1st value
  <input #operation2 type="text" value="">Enter 2nd value
  <select #operation name="operation" id="operation">
    <option value="*">*</option>
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="/">/</option>
</select>

<button (click)="handle(operation1.value,operation2.value,operation.value )">submit</button>


<h1>{{result}}</h1>
</div>


//APP.COMPONENT.JS

export class AppComponent{

  result:number   = 0;
  num1: number = 0 ;
  num2 : number = 0 ;
  handle (fname: string , sname:string , operation:string){
   this.num1 = Number(fname) ;
   this.num2 = Number(sname)
     switch(operation){
       case "*" :
         this.result = this.num1 * this.num2 ;
         break ;
       case "-" : 
       this.result  = this.num1 - this.num2 ;
         break ;
       case "+" : 
       this.result  =this.num1  + this.num2 ;
         break ;
       case "/" : 
       this.result  = this.num1 / this.num2 ;
         break ;
     }
  
    }
  }

0 replies

Angular - One-way Binding - Event Binding - Live Calculator app #17

Uh oh!

Uh oh!

akash-coded Jul 27, 2022 Maintainer

Replies: 14 comments

Uh oh!

Uh oh!

app.component.html

app.component.ts

screenshot

Uh oh!

app.component.html

app.component.ts

Uh oh!

APPS.COMPONENT.HTML

APPS.COMPONENT.TS

Uh oh!

screenshot

Uh oh!

calculator.component.html

calculate.componator.ts

output

Uh oh!

Uh oh!

calculator.html

calculator.component.ts

Uh oh!

calculator.component.html

calculator.component.ts

screenchot

Uh oh!

Uh oh!

app.component.html

Calculator

app.component.ts

Uh oh!

Uh oh!

Uh oh!

Calculate Ts File

Calculator Html File

Uh oh!

akash-coded
Jul 27, 2022
Maintainer