JavaScript Making Simple Calculator

📔 : Java Script 🔗

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

अभी तक आपने JavaScript में DOM Manipulation के पढ़ा और जाना कि किस तरह से Events को handle करते हैं , इस topic में JavaScript की help से एक simple calculator बनाएंगे।

Calculator बनाने के लिए simply पहले HTML में user interface तैयार करते हैं। End user को show करने के लिए।

File : js_calculator.html

CopyFullscreenRun

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript Making Simple Calculator</title>

    <!-- style -->
    <style type="text/css">
      .main{
        width:402px;
        height: 257px;
        display: flex;
        justify-content: center;
      }
      .c-body {
        width: 400px;
        height: 255px;
        background: #ccc;
        border: 1px solid;
      }
      .c-num{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }
      .c-operator{
        flex-shrink: 1;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
      }
      .c-row{
        display: flex;
        flex-flow: row;
      }
      .c-operator [id^='numid']{
        width: 90px;
        flex-direction: initial;
      }
      [id^='numid'] {
        display: flex;
        flex-shrink: 1;
        background: #fff;
        margin: 4px;
        width: 80px;
        justify-content: center;
        cursor: pointer;
        flex-direction: inherit;
      }
      .c-minputs .inbox{
        display: block;
        width: 100%;
      }
      [id^='numid']:hover{
        background: #f5f5f5;
      }
    </style>
  </head>
  <body>
    <!-- making result space -->
    <div class="main">
      <div class="c-body">
        <div class="c-minputs">
          <input id="intop" type="number" class="topin inbox" disabled>
          <input id="inbottom" type="number" class="bottomin inbox" placeholder="Enter Number">
        </div>
        <div class="c-row">
          <div class="c-num">

          </div>
          <div class="c-operator">
            <span class="numb" id="numidplus" onclick="set_data('plus')">+</span>
            <span class="numb" id="numidminus" onclick="set_data('minus')">-</span>
            <span class="numb" id="numiddiv" onclick="set_data('divi')">/</span>
            <span class="numb" id="numidmul" onclick="set_data('mul')">*</span>
            <span class="numb" id="numidans" onclick="set_answer('answer')">=</span>
            <span class="numb" id="numidclr" onclick="set_data('clr')">Clear</span>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      var cnum = document.getElementsByClassName('c-num')[0];
      var cope = document.getElementsByClassName('c-operator')[0];
      var inp_top = document.getElementById('intop');
      var inbottom = document.getElementById('inbottom');
      var newinbottom, numberHtml='';
      var newinbottom2;
      var sign;
      /* printing numbers 1 to 9 & 0 */
      for(i=0;i<10;i++)
      {
        numberHtml +='<span class="numb" value="'+i+'" id="numid'+i+'" onclick="puton('+i+')">'+i+'</span>';
      }
 
     cnum.innerHTML = numberHtml;
     document.getElementById('numid0').style.order = "1";
      function puton(numb)
      {
        inbottom.value += numb ;
      }

      function set_answer(answer)
      {
        if(inbottom.value ==''){
           alert('Type number');
        }
        else if(sign == "plus"){
            newinbottom2 = inbottom.value;
            inp_top.value = inbottom.value;
            inbottom.value = parseInt(newinbottom) + parseInt(newinbottom2);   
        }
        else if(sign == "minus"){
           newinbottom2 = inbottom.value;
           inp_top.value = inbottom.value;
           inbottom.value = newinbottom - newinbottom2;
        }else if(sign == "divi"){
            newinbottom2 = inbottom.value;
            inp_top.value = inbottom.value;
            inbottom.value = newinbottom / newinbottom2;
        }else if(sign == "mul"){
            newinbottom2 = inbottom.value;
            inp_top.value = inbottom.value;
            inbottom.value = newinbottom * newinbottom2;
        }
        sign ='';
      }

      function set_data(opra){
        switch (opra) {
          case 'clr':
            inp_top.value =''
            inbottom.value ='';
            newinbottom='';
            newinbottom='';
            sign ='';
            break;
          case 'plus':
            newinbottom = inbottom.value;
            inp_top.value = inbottom.value;
            inbottom.value = '';
            sign = "plus";
            break;
          case 'minus' : 
            newinbottom = inbottom.value;
            inp_top.value = inbottom.value;
            inbottom.value = '';
            sign = "minus";
            break;
          case 'divi':
            newinbottom = inbottom.value;
            inp_top.value = inbottom.value;
            inbottom.value = '';
            sign = "divi";
            break;
          case 'mul':
            newinbottom = inbottom.value;
            inp_top.value = inbottom.value;
            inbottom.value = '';
            sign = "mul";
            break;
          default:
            ans();
            break;
        }
      }
    </script>
  </body>
</html>

Output

Explanation

Example में simply सबसे पहले Calculator buttons के लिए HTML Code लिखा , then CSS apply करके थोड़ा सा beautiful बनाया जिससे buttons Calculator की तरह दिखें।
उसके बाद सभी तरह के possible values को store करने के लिए variables define किये , और उनकी initial value 0 set कर दी। 0 से 9 तक buttons के लिए for loop का use किया गया है।
Action button के लिए Attribute Event handler assign कर दिया , जिससे button click करने पर set_data() function call हो सके। Function में हर एक button के लिए different - different argument pass किया गया है जिससे कि यह पता लगाया जा सके कि कौन सी action perform होगी।
जैसे कि set_data('plus') के लिए Addition होगा और set_data('clr') के लिए input & result को clear करने के लिए।
अब जैसे ही function call होगा सभी input से value को get किया , then उन values को initialize किये गए variables में set कर दिया। और फिर जैसे ही Result Button (=) पर click किया जायेगा , values के according result को show करा दिया गया है।

JavaScript Making Simple Calculator

Output

Explanation

Related Topics :

Rahul Kumar

JavaScript Making Simple Calculator

Output

Explanation

Related Topics :

Rahul Kumar

Watch Video.

Title