HTML Scientific Calculator

Last Updated : 11 Jul, 2025

The HTML Scientific Calculator is a tool for performing advanced scientific calculations like finding exponents, logarithms, factorials, and more. This calculator comprises two sections: the input section, where the user types in their mathematical problem, and the output screen, which displays all the outputs related to the particular mathematical problem.

You can find the live preview below, try it

To design the HTML Scientific calculator, we will use HTML, CSS, and JavaScript. This scientific calculator can perform the following operations, which are listed below:

Square root
Percentage
Factorial
Constants (pi, Euler constant, log2 base e, log 10 base e)
Exponent
log base 2, 10, e
Power
Sin, Tan, Cos (angle in degrees)

Approach

First, create an HTML layout featuring an input field and buttons for numeric and operational input.
Now useCSS to design the table for all the input values like number, sin,= etc.
The external math.js library is imported for mathematical evaluation.
UseJavaScript functions to manage key calculator actions, including handling button clicks and updating the display.
Implement trigonometric functions (sin, cos, tan) to handle both degrees and radians using standardJavaScript .
Implemented error-handling mechanisms to handle invalid expressions and display an "Error" message when necessary.
Include buttons for special constants such as pi and the mathematical constant e directly through JavaScript.
Add buttons for common operations like clearing the display (C), backspacing, and performing factorial calculations (!).
The calculator evaluates expressions using math.js and displays the result in the input field.

Example: In this example, we will create the scientific calculator with the help of HTML, CSS, and JavaScript.

index.html

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Scientific Calculator</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.js"></script>
  <style>

    body {
      margin: 0px;
      padding: 0px;
      background-color: #f0f0f0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .calculator {
      width: 550px;  
      height: 350px;
      background: #fff;
      border: 1px solid black;
      border-radius: 5px;
      padding: 3px;
      box-sizing: border-box;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .display {
      width: 100%;
      height: 50px;
      font-size: 1.5em;
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 5px;
      border: 2px solid black;
      box-sizing: border-box;
      text-align: left;
    }

    .buttons {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 5px;
      width: 100%;
      grid-template-rows: repeat(5, 1fr);
      overflow: hidden;
    }

    .buttons input[type="button"] {
      padding: 10px;
      font-size: 1.2em;
      font-weight: bold;
      border: none;
      border-radius: 5px;
      background-color: green;
      color: white;
      cursor: pointer;
      transition: 0.2s ease-in-out;
    }

    .buttons input[type="button"]:hover {
      background-color: darkgreen;
    }

    @media (max-width: 500px) {
      .buttons {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (max-width: 350px) {
      .buttons {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .display:focus {
      outline: none;
      border-color: black;
      box-shadow: none;
    }

  </style>
</head>
<body>
  <div class="calculator">
    <input type="text" id="display" class="display" readonly />
    <div class="buttons">
      <input type="button" value="1" onclick="display.value += '1'">
      <input type="button" value="2" onclick="display.value += '2'">
      <input type="button" value="3" onclick="display.value += '3'">
      <input type="button" value="4" onclick="display.value += '4'">
      <input type="button" value="5" onclick="display.value += '5'">
      <input type="button" value="6" onclick="display.value += '6'">
      <input type="button" value="7" onclick="display.value += '7'">
      <input type="button" value="8" onclick="display.value += '8'">
      <input type="button" value="9" onclick="display.value += '9'">
      <input type="button" value="0" onclick="display.value += '0'">

      <input type="button" value="C" onclick="display.value = ''">
      <input type="button" value="⌫" onclick="backspace()">
      <input type="button" value="*" onclick="display.value += '*'">
      <input type="button" value="+" onclick="display.value += '+'">
      <input type="button" value="-" onclick="display.value += '-'">
      <input type="button" value="/" onclick="display.value += '/'">
      <input type="button" value="!" onclick="display.value += '!'">
      <input type="button" value="." onclick="addDecimal()">
      <input type="button" value="," onclick="display.value += ','">

      <input type="button" value="%" onclick="display.value += '%'">
      <input type="button" value="cos(" onclick="display.value += 'cos('">
      <input type="button" value="sin(" onclick="display.value += 'sin('">
      <input type="button" value="tan(" onclick="display.value += 'tan('">

      <input type="button" value="e" onclick="display.value += 'e'">
      <input type="button" value="pi" onclick="display.value += 'pi'">
      <input type="button" value="^" onclick="display.value += '^('">
      <input type="button" value="(" onclick="display.value += '('">
      <input type="button" value=")" onclick="display.value += ')'">
      <input type="button" value="log(" onclick="display.value += 'log('">

      <input type="button" value="sqrt(" onclick="display.value += 'sqrt('">
      <input type="button" value="log2(" onclick="display.value += 'log2('">
      <input type="button" value="log10(" onclick="display.value += 'log10('">
      <input type="button" value="l2e" onclick="display.value += Math.LOG2E">
      <input type="button" value="l10e" onclick="display.value += Math.LOG10E">
      <input type="button" value="exp(" onclick="display.value += 'exp('">

      <input type="button" value="=" onclick="calculate()">
    </div>
  </div>

  <script>
    const display = document.getElementById("display");
    let isDegrees = true;

    function backspace() {
      display.value = display.value.slice(0, -1);
    }

    function addDecimal() {
      if (!display.value.includes('.')) {
        display.value += '.';
      }
    }

    function calculate() {
      let expression = display.value;
      try {
        if (isDegrees) {
          expression = expression.replace(/sin\(/g, 'sin(' + Math.PI / 180 + '*');
          expression = expression.replace(/cos\(/g, 'cos(' + Math.PI / 180 + '*');
          expression = expression.replace(/tan\(/g, 'tan(' + Math.PI / 180 + '*');
        }
        let result = math.evaluate(expression);
        display.value = result;
      } catch {
        display.value = "Error";
        setTimeout(() => display.value = '', 2000);  
      }
    }
  </script>
</body>
</html>