Create simple calculator using javascript in hindi

Leave a Comment / Javascript / By admin

Post Views: 65

Introduction

हेलो दोस्तों आज हम इस post के जरिये javascript का इस्तेमाल करके एक simple calculator कैसे create कर सकते है वह जानेगे!. simple Calculator create करने के लिए हमें पहले HTML, css, javascript का basic knowledge होना जरुरी है!. ताकि हमें समाज आये की calculator की functionality, और उसका structure design कैसे setup किया गया है!.

Calculator HTML structure

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Simple Calculator</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  
</head>
<body>
 <div class="container">
  <h2>Simple calculator</h2>
  <div class="main_section">    
    <div class="output_section">
      <div class="result_val" id="result_display"><input type="text"  id="result_val"></div>
    </div>
    <div class="operator_section">
    <div class="line_0 common_btn">
      <button class="action_event" value="">AC</button>
    </div>  
    <div class="line_1 common_btn">
      <button class="action_event" value="7">7</button>
      <button class="action_event" value="8">8</button>
      <button class="action_event" value="9">9</button>
      <button class="action_event" value="*">x</button>
    </div>
    <div class="line_2 common_btn">
      <button class="action_event" value="4">4</button>
      <button class="action_event" value="5">5</button>
      <button class="action_event" value="6">6</button>
      <button class="action_event" value="/">/</button>
    </div>
    <div class="line_3 common_btn">
      <button class="action_event" value="1">1</button>
      <button class="action_event" value="2">2</button>
      <button class="action_event" value="3">3</button>
      <button class="action_event" value="-">-</button>
    </div>
    <div class="line_4 common_btn">
      <button class="action_event" value="0">0</button>
      <button class="action_event" value=".">.</button>
      <button class="action_event" value="=">=</button>
      <button class="action_event" value="+">+</button>
    </div>
    </div>
  </div>  
 </div>
</body>
</html>

Calculator css

<style type="text/css">
  .container{
    text-align: center;
    padding: 25px;
    background: #101e5e;
  }
  input#result_val {
    background: #eee;
    padding: 15px;
    border-radius: 5px;
    width: 100%;
    font-size: 20px;
  }
  h2{
    margin-bottom: 25px;
    color: #fff;
  }
  .main_section {
    width: 400px;
    margin: 0 auto;
    background: #898989;
    padding-bottom: 5px;
    padding-top: 5px;
    border-radius: 10px;
  }
  .line_4.common_btn {
    margin-bottom: 15px;
  }
  .output_section {    
    background: #1c1b1b;
    padding: 31px 35px;
    border-radius: 14px 14px 0px 0px; 
  }
  .line_0.common_btn{
    text-align: left;
    padding-left: 35px;
  }
  .common_btn button {
    font-size: 20px;
    width: 20%;
    border-radius: 8px;
    margin-top: 15px;
    padding: 5px;
    font-weight: 800;
  }
  .operator_section{
    margin-bottom: 2px;
    padding-bottom: 15px;
    background: #6a6565;
    border-radius: 0px 0px 10px 10px
  }
</style>

Javascript for Calculator

<script>
    let elements = document.getElementsByClassName("action_event");  
    let result_val = document.getElementById("result_val");

    let eventCalculation = function() {
      let attribute = this.getAttribute("value");
      if( attribute !="" && !attribute.includes("=") ){
        result_val.value += attribute;
      }else{
        if ( attribute.includes("=") ) {
          let operation_val = result_val.value;
          let result = eval( operation_val );
          result_val.value = result;
        }else{
          result_val.value = "";
        }
      }
    };

    for (var i = 0; i < elements.length; i++) {
      elements[i].addEventListener('click', eventCalculation, false);
    }
  </script>

Simple Calculator fullcode

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Simple Calculator</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  
</head>
<body>
<style type="text/css">
  .container{
    text-align: center;
    padding: 25px;
    background: #101e5e;
  }
  input#result_val {
    background: #eee;
    padding: 15px;
    border-radius: 5px;
    width: 100%;
    font-size: 20px;
  }
  h2{
    margin-bottom: 25px;
    color: #fff;
  }
  .main_section {
    width: 400px;
    margin: 0 auto;
    background: #898989;
    padding-bottom: 5px;
    padding-top: 5px;
    border-radius: 10px;
  }
  .line_4.common_btn {
    margin-bottom: 15px;
  }
  .output_section {    
    background: #1c1b1b;
    padding: 31px 35px;
    border-radius: 14px 14px 0px 0px; 
  }
  .line_0.common_btn{
    text-align: left;
    padding-left: 35px;
  }
  .common_btn button {
    font-size: 20px;
    width: 20%;
    border-radius: 8px;
    margin-top: 15px;
    padding: 5px;
    font-weight: 800;
  }
  .operator_section{
    margin-bottom: 2px;
    padding-bottom: 15px;
    background: #6a6565;
    border-radius: 0px 0px 10px 10px
  }
</style>
<div class="container">
  <h2>Simple calculator</h2>
  <div class="main_section">    
    <div class="output_section">
      <div class="result_val" id="result_display"><input type="text"  id="result_val"></div>
    </div>
    <div class="operator_section">
    <div class="line_0 common_btn">
      <button class="action_event" value="">AC</button>
    </div>  
    <div class="line_1 common_btn">
      <button class="action_event" value="7">7</button>
      <button class="action_event" value="8">8</button>
      <button class="action_event" value="9">9</button>
      <button class="action_event" value="*">x</button>
    </div>
    <div class="line_2 common_btn">
      <button class="action_event" value="4">4</button>
      <button class="action_event" value="5">5</button>
      <button class="action_event" value="6">6</button>
      <button class="action_event" value="/">/</button>
    </div>
    <div class="line_3 common_btn">
      <button class="action_event" value="1">1</button>
      <button class="action_event" value="2">2</button>
      <button class="action_event" value="3">3</button>
      <button class="action_event" value="-">-</button>
    </div>
    <div class="line_4 common_btn">
      <button class="action_event" value="0">0</button>
      <button class="action_event" value=".">.</button>
      <button class="action_event" value="=">=</button>
      <button class="action_event" value="+">+</button>
    </div>
    </div>
  </div>  
</div>
<script>
    let elements = document.getElementsByClassName("action_event");  
    let result_val = document.getElementById("result_val");

    let eventCalculation = function() {
      let attribute = this.getAttribute("value");
      if( attribute !="" && !attribute.includes("=") ){
        result_val.value += attribute;
      }else{
        if ( attribute.includes("=") ) {
          let operation_val = result_val.value;
          let result = eval( operation_val );
          result_val.value = result;
        }else{
          result_val.value = "";
        }
      }
    };

    for (var i = 0; i < elements.length; i++) {
      elements[i].addEventListener('click', eventCalculation, false);
    }
  </script>
</body>
</html>

Leave a Comment Cancel Reply