Open In App

HTML Scientific Calculator

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Operations:

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 use CSS to design the table for all the input values like number,sin,= etc.
  • External math.js library is imported for mathematical evaluation.
  • Use JavaScript 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 standard JavaScript.
  • 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.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
          Scientific Calculator using HTML, CSS and Js
    </title>
    <script src=
            integrity=
"sha512-BbVEDjbqdN3Eow8+empLMrJlxXRj5nEitiCAK5A1pUr66+jLVejo3PmjIaucRnjlB0P9R3rBUs3g5jXc8ti+fQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer">
      </script>
</head>
 
<body>
    <h1 style="color: green; text-align: center;">
        Scientific Calculator</h1>
    <form>
        <table>
            <tr>
                <td colspan="6">
                    <input id="display" type="text">
                </td>
            </tr>
            <tr>
                <td><input type="button" value="1"
                           onclick="display.value += '1'"></td>
                <td><input type="button" value="2"
                           onclick="display.value += '2'"></td>
                <td><input type="button" value="3"
                           onclick="display.value += '3'"></td>
                <td><input type="button" value="C"
                           onclick="display.value = ''"></td>
                <td><input type="button" value="⌫"
                           onclick="backspace()"></td>
                <td><input type="button" value="="
                           onclick="calculate()"></td>
            </tr>
            <tr>
                <td><input type="button" value="4"
                           onclick="display.value += '4'"></td>
                <td><input type="button" value="5"
                           onclick="display.value += '5'"></td>
                <td><input type="button" value="6"
                           onclick="display.value += '6'"></td>
                <td><input type="button" value="-"
                           onclick="display.value += '-'"></td>
                <td><input type="button" value="%"
                           onclick="display.value += '%'"></td>
                <td><input type="button" value="cos("
                           onclick="display.value += 'cos('"></td>
            </tr>
            <tr>
                <td><input type="button" value="7"
                           onclick="display.value += '7'"></td>
                <td><input type="button" value="8"
                           onclick="display.value += '8'"></td>
                <td><input type="button" value="9"
                           onclick="display.value += '9'"></td>
                <td><input type="button" value="x"
                           onclick="display.value += '*'"></td>
                <td><input type="button" value="!"
                           onclick="display.value += '!'"></td>
                <td><input type="button" value="sin("
                           onclick="display.value += 'sin('"></td>
            </tr>
            <tr>
                <td><input type="button" value="."
                           onclick="display.value += '.'"></td>
                <td><input type="button" value="0"
                           onclick="display.value += '0'"></td>
                <td><input type="button" value=","
                           onclick="display.value += ','"></td>
                <td><input type="button" value="+"
                           onclick="display.value += '+'"></td>
                <td><input type="button" value="/"
                           onclick="display.value += '/'"></td>
                <td><input type="button" value="tan("
                           onclick="display.value += 'tan('"></td>
            </tr>
            <tr>
                <td><input type="button" value="E"
                           onclick="e()"></td>
                <td><input type="button" value="pi"
                           onclick="pi()"></td>
                <td><input type="button" value="^"
                           onclick="power()"></td>
                <td><input type="button" value="("
                           onclick="display.value += '('"></td>
                <td><input type="button" value=")"
                           onclick="display.value += ')'"></td>
                <td><input type="button" value="log("
                           onclick="base10Log()"></td>
            </tr>
            <tr>
                <td><input type="button" value="sqrt("
                           onclick="squareRoot()"></td>
                <td><input type="button" value="ln2"
                           onclick="display.value += Math.LN2"></td>
                <td><input type="button" value="log10("
                           onclick="base10Log()"></td>
                <td><input type="button" value="l2e"
                           onclick="display.value += Math.LOG2E"></td>
                <td><input type="button" value="l10e"
                           onclick="display.value += Math.LOG10E"></td>
                <td><input type="button" value="exp("
                           onclick="display.value += 'exp('"></td>
            </tr>
        </table>
    </form>
</body>
</html>


CSS




table {
    border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
}
 
input[type="button"] {
    width: 100%;
    padding: 20px 40px;
    background-color: green;
    color: white;
    font-size: 24px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
}
 
input[type="text"] {
    padding: 20px 240px;
    font-size: 24px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    border: 2px solid black;
    text-align: left;
}
 
display {
    text-align: left;
}


Javascript




function backspace() {
    let display = document.getElementById("display");
    display.value = display.value.slice(0, -1);
}
 
function calculate() {
    let display = document.getElementById("display");
    let expression = display.value;
    let result;
 
    try {
        // Convert trigonometric function inputs from degrees to radians
        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 + '*');
 
        result = math.evaluate(expression);
        display.value = result;
    } catch (error) {
        display.value = "Error";
    }
}
 
function squareRoot() {
    let display = document.getElementById("display");
    display.value += "sqrt(";
}
 
function base10Log() {
    let display = document.getElementById("display");
    display.value += "log(";
}
 
function pi() {
    let display = document.getElementById("display");
    display.value += "pi";
}
 
function e() {
    let display = document.getElementById("display");
    display.value += "e";
}
 
function power() {
    let display = document.getElementById("display");
    display.value += "^(";
}


Output: Click here to see live code output



Last Updated : 06 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads