Share your knowledge with other learners . . . Write As Guest

Calculator In Jquery In Hindi | jQuery Calculator In Hindi

Top Blogs

Loading ...


Image could not load

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 हो गया है।

Give Feedback

like-image 0.

Recent Blogs

Loading ...

Rahul Kumar

Rahul Kumar

Hi ! My name is Rahul Kumar Rajput. I'm a back end web developer and founder of learnhindituts.com. I live in Uttar Pradesh (UP), India and I love to talk about programming as well as writing technical tutorials and tips that can help to others.

Get connected with me. :) LinkedIn Twitter Instagram Facebook