<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>calculator</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://ajax.googleapis.com..."></script>

</head>

<body>

 <div class="container">

<input type="text" id="hasan" value="0">

<input type="text" id="a2" value="0">

<button id="sa" >جمع(+)</button>

<button id="Subtraction">طرح(-)</button>

<button id="Multiplication">ضرب(*)</button>

<button id="Division">قسمة(/)</button>

<button id="Reset">Reset</button>

  <br>

  <h1 id="Rrsult"> حدف:<span id="a3"></span></h1>

</div>

<script>

  $(document).ready(function(){

  $('#sa').click(function(){

  var x=document.getElementById("hasan").Value;

  var z=document.getElementById("a2").Value;

  var result =parseFloat(x) + parseFloat(z);

  document.getElementById("a3").innerHTML = ""+result.toFixed(2);

  });

  $('#Subtraction').click(function(){

  var x=document.getElementById("hasan").Value;

  var z=document.getElementById("a2").Value;

  var result =parseFloat(x) - parseFloat(z);

  document.getElementById("a3").innerHTML = ""+result.toFixed(2);

  });$('#Multiplication').click(function(){

  var x=document.getElementById("hasan").Value;

  var z=document.getElementById("a2").Value;

  var result =parseFloat(x)* parseFloat(z);

  document.getElementById("a3").innerHTML = ""+result.toFixed(2);

  });

  $('#Division').click(function(){

  var x=document.getElementById("hasan").Value;

  var z=document.getElementById("a2").Value;

  var result =parseFloat(x) / parseFloat(z);

  document.getElementById("a3").innerHTML = ""+result.toFixed(2);

  });

  $('#Reset').click(function(){

  document.getElementById("hasan").Value=0;

  document.getElementById("a2").Value=0;

  let result =0;

  document.getElementById("a3").innerHTML = ""+result;

  });

  });

</script>

</body>

</html>