Calculator

Concepts Used: Event handling, DOM manipulation

Features:

Basic calculator with +, -, ×, ÷

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Calculator</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
#calc { width: 200px; margin: 20px; }
button { width: 45px; height: 45px; margin: 2px; }
#result { width: 185px; height: 40px; margin-bottom: 10px; text-align: right; font-size: 18px; }  </style>
</head>
<body>
  <h2>Calculator</h2>
  <div id="calc">
&lt;input type="text" id="result" readonly&gt;&lt;br&gt;
&lt;button class="btn"&gt;7&lt;/button&gt;
&lt;button class="btn"&gt;8&lt;/button&gt;
&lt;button class="btn"&gt;9&lt;/button&gt;
&lt;button class="btn"&gt;/&lt;/button&gt;&lt;br&gt;
&lt;button class="btn"&gt;4&lt;/button&gt;
&lt;button class="btn"&gt;5&lt;/button&gt;
&lt;button class="btn"&gt;6&lt;/button&gt;
&lt;button class="btn"&gt;*&lt;/button&gt;&lt;br&gt;
&lt;button class="btn"&gt;1&lt;/button&gt;
&lt;button class="btn"&gt;2&lt;/button&gt;
&lt;button class="btn"&gt;3&lt;/button&gt;
&lt;button class="btn"&gt;-&lt;/button&gt;&lt;br&gt;
&lt;button class="btn"&gt;0&lt;/button&gt;
&lt;button class="btn"&gt;.&lt;/button&gt;
&lt;button class="btn"&gt;=&lt;/button&gt;
&lt;button class="btn"&gt;+&lt;/button&gt;  </div>

  <script>
$(document).ready(function(){
  let input = "";
  $(".btn").click(function(){
    let val = $(this).text();
    if(val === "="){
      try {
        input = eval(input).toString();
      } catch {
        input = "Error";
      }
    } else {
      input += val;
    }
    $("#result").val(input);
  });
});  </script>
</body>
</html>

Explanation:

Stores expression as string.
eval() evaluates input (simple demo).
Updates display with .val().

Comments

Leave a Reply Cancel reply