Calculator In Jquery In Hindi | jQuery Calculator In Hindi

Top Blogs

Other Blogs

What is TCP/IP Model In Hindi | Layers of TCP/IP Model

Difference between Analog and Digital signal In Hindi

Laravel echo, socket io and redis with example : Laravel socket io with redis

Blogs ❯❯ JavaScript

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.

jQuery Calculator by Sumudu Mohottige on Unsplash

jQuery में आप JavaScript के comparison में easily किसी calculator को बना सकते हैं , और इस blog में आप यही सीखेंगे कि jQuery का use करके कैसे एक simple calculator बना सकते हैं।

jQuery Calculator

सबसे पहले numbers करने के लिए 2 input , 5 buttons Operators के लिए और एक element result show करने के लिए बना लेते हैं।

HTML


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery Calculator</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- CSS Style -->
  </head> 
  <body>
    <div class="calculator">
      <input type="text" id="input1" placeholder="Enter a number">
      <input type="text" id="input2" placeholder="Enter another number">
      <div class="button-container">
        <button id="add">+</button>
        <button id="subtract">-</button>
        <button id="multiply">*</button>
        <button id="divide">/</button>
        <button id="clear">Clear</button>
      </div>
      <br><br>
      <input type="text" id="result" placeholder="Result" readonly>
    </div>    
    <!-- jquery -->
  </body>
</html>

अब inputs को अच्छा दिखाने के लिए कुछ CSS add कर देते हैं।

CSS


.calculator {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

input[type="text"] {
  width: 200px;
  height: 30px;
  font-size: 20px;
  padding: 5px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}

button {
  width: 50px;
  height: 50px;
  margin: 5px;
  font-size: 25px;
  border-radius: 50%;
  border: none;
  background-color: #f0f0f0;
  color: #333;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}

button:hover {
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

#result {
  width: 200px;
  height: 30px;
  font-size: 20px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  text-align: center;
}

Finally , jQuery code लिखते हैं जहाँ हम events को handle करने बाद input किये गए numbers को calculate करके result show करेंगे।


$(document).ready(function() {
  // Addition
  $('#add').click(function() {
    var num1 = parseFloat($('#input1').val());
    var num2 = parseFloat($('#input2').val());
    $('#result').val(num1 + num2);
  });

  // Subtraction
  $('#subtract').click(function() {
    var num1 = parseFloat($('#input1').val());
    var num2 = parseFloat($('#input2').val());
    $('#result').val(num1 - num2);
  });

  // Multiplication
  $('#multiply').click(function() {
    var num1 = parseFloat($('#input1').val());
    var num2 = parseFloat($('#input2').val());
    $('#result').val(num1 * num2);
  });

  // Division
  $('#divide').click(function() {
    var num1 = parseFloat($('#input1').val());
    var num2 = parseFloat($('#input2').val());
    $('#result').val(num1 / num2);
  });

  // Clear
  $('#clear').click(function() {
    $('#input1').val('');
    $('#input2').val('');
    $('#result').val('');
  });
});

That's it , आपका simple calculator बनकर ready हो गया है।

Recent Blogs

Loading ...

Rahul Kumar

Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)

Get connected with me. :) LinkedIn Twitter Instagram Facebook