Ads Top

How to create a basic calculator in javascript

Javascript Calculator

Code demo


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Calculator in javascript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #tBox{font:700 18px arial;}
    </style>
</head>

<body>
    <div>
        <input type="text" id="fBox" onclick="getSetValue('fBox')">
        <input type="text" id="sBox" onclick="getSetValue('sBox')">
         = <span id="tBox"></span>
        <br>
        <input type="button" id="1" value="1" onclick="setValue('1')">
        <input type="button" id="2" value="2" onclick="setValue('2')">
        <input type="button" id="3" value="3" onclick="setValue('3')">
        <input type="button" id="4" value="4" onclick="setValue('4')">
        <input type="button" id="5" value="5" onclick="setValue('5')">
        <input type="button" id="6" value="6" onclick="setValue('6')">
        <input type="button" id="7" value="7" onclick="setValue('7')">
        <input type="button" id="8" value="8" onclick="setValue('8')">
        <input type="button" id="9" value="9" onclick="setValue('9')">
        <input type="button" id="0" value="0" onclick="setValue('0')">
        <br>
        <input type="button" value="Add" onclick="Add()">
        <input type="button" value="Minus" onclick="Minus()">
        <input type="button" value="Multiply" onclick="Multiply()">
        <input type="button" value="Divide" onclick="Divid()">
        <input type="reset" value="Reset" onclick="Reset()">
       
    </div>
     
      <script>
          var setId = 'fBox';
          function getSetValue(boxName){
            setId = boxName;
          }
          function setValue(val){
              var oldVale = document.getElementById(setId).value;
              document.getElementById(setId).value = oldVale + val;
          }
          function Add(){
              var firstValue = document.getElementById('fBox').value;
              var secondValue = document.getElementById('sBox').value;
              document.getElementById('tBox').innerHTML = Number(firstValue) + Number(secondValue);
          }
          function Minus(){
              var firstValue = document.getElementById('fBox').value;
              var secondValue = document.getElementById('sBox').value;
              document.getElementById('tBox').innerHTML = Number(firstValue) - Number(secondValue);
          }
          function Multiply(){
              var firstValue = document.getElementById('fBox').value;
              var secondValue = document.getElementById('sBox').value;
              document.getElementById('tBox').innerHTML = Number(firstValue) * Number(secondValue);
          }
          function Divid(){
              var firstValue = document.getElementById('fBox').value;
              var secondValue = document.getElementById('sBox').value;
              document.getElementById('tBox').innerHTML = Number(firstValue) / Number(secondValue);
          }
          function Reset(){
              document.getElementById('fBox').value = '';
              document.getElementById('sBox').value = '';
              document.getElementById('tBox').innerHTML = '';
          }
      </script>
</body>

</html>

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.