Typescript calculator


How to make a Calculator using Typescript 




My Calculator

Calculator

Enter First Value

Enter Second Value


Your Answer is :




HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Calculator</title>

</head>
<body>
    
<h1>Calculator</h1>
    
    <p>Enter First Value</p>
    <input type="number" id="value1" placeholder="Value">
    
    
<p>Enter Second Value</p>
<input type="number" id="value2" placeholder="Value">

<br> 
<h1>
    <button id="plus">+</button>
    
    <button id="minus">-</button>
    
    <button id="multiply">x</button>
    
    <button id="devide">/</button>
</h1>

<h1>Your Answer is :<output id="result"></output>
</h1>


<script src="cal.js"></script>
</body>
</html>

TYPESCRIPT CODE

let valuea = document.getElementById("value1") as HTMLInputElement;
let valueb = document.getElementById("value2") as HTMLInputElement;
let cal1 = document.getElementById("plus") as HTMLButtonElement;
let cal2 = document.getElementById("minus") as HTMLButtonElement;
let cal3 = document.getElementById("multiply") as HTMLButtonElement;
let cal4 = document.getElementById("devide") as HTMLButtonElement;

let jawab = document.getElementById("result") as HTMLOutputElement;

function add() {
  let valuex = parseFloat(valuea.value);
  let valuey = parseFloat(valueb.value);
  let ans = valuex + valuey;
  jawab.textContent = ans.toString();
}

function sub() {
  let valuex = parseFloat(valuea.value);
  let valuey = parseFloat(valueb.value);
  let ans = valuex - valuey;
  jawab.textContent = ans.toString();
}

function multiple() {
  let valuex = parseFloat(valuea.value);
  let valuey = parseFloat(valueb.value);
  let ans = valuex * valuey;
  jawab.textContent = ans.toString();
}

function divi() {
  let valuex = parseFloat(valuea.value);
  let valuey = parseFloat(valueb.value);
  let ans = valuex / valuey;
  jawab.textContent = ans.toString();
}

cal1.addEventListener("click", add);

cal2.addEventListener("click", sub);

cal3.addEventListener("click", multiple);

cal4.addEventListener("click", divi);