Skip to main content

Design and create web page with JavaScript to Design simple calculator to perform the following operations: sum, product, difference and quotient

Description​

This HTML file combines a basic calculator interface with CSS and JavaScript code embedded within the HTML itself. CSS and JS are written in separate files which helps in separation of concerns. The calculator allows users to perform simple arithmetic operations like addition, subtraction, multiplication, and division. The styling is defined within CSS, while JavaScript manages the calculator's functionality, enabling number input, calculation execution, and screen clearing.

Code​

Prog9.html
<!-- /* Save HTML file as: Prog9.html* / -->
<html>

<head>
    <meta name=”viewport” content=”width=device-width,initial-scale=1”>
    <title>calculator</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main">
      <form name="form">
          <input class="textview" name="textview">
      </form>

      <table>
          <tr>
              <td><input class="button" type="button" value="C" onclick="clean()"></td>
              <td><input class="button" type="button" value="<" onclick="back()"></td>
              <td><input class="button" type="button" value="/" onclick="insert('/')"></td>
              <td><input class="button" type="button" value="x" onclick="insert('*')"></td>
          </tr>

          <tr>
              <td><input class="button" type="button" value="7" onclick="insert(7)"></td>
              <td><input class="button" type="button" value="8" onclick="insert(8)"></td>
              <td><input class="button" type="button" value="9" onclick="insert(9)"></td>
              <td><input class="button" type="button" value="-" onclick="insert('-')"></td>
          </tr>

          <tr>
              <td><input class="button" type="button" value="4" onclick="insert(4)"></td>
              <td><input class="button" type="button" value="5" onclick="insert(5)"></td>
              <td><input class="button" type="button" value="6" onclick="insert(6)"></td>
              <td><input class="button" type="button" value="+" onclick="insert('+')"></td>
          </tr>

          <tr>
              <td><input class="button" type="button" value="1" onclick="insert(1)"></td>
              <td><input class="button" type="button" value="2" onclick="insert(2)"></td>
              <td><input class="button" type="button" value="3" onclick="insert(3)"></td>
              <td><input class="button" type="button" value="=" onclick="equal()"></td>
          </tr>

          <tr>
              <td><input class="button" type="button" value="0" onclick="insert(0)"></td>
              <td><input class="button" type="button" value="." onclick="insert('.')"></td>
          </tr>
        </table>
    </div>
    <script src="script.js"></script>
</body>
</html>
style.css
* {
    margin: 0;
    padding: 0;
}

.button {
    width: 50;
    height: 50;
    font-size: 25;
    margin: 2;
    cursor: pointer;
}

.textview {
    width: 217;
    margin: 5;
    font-size: 25;
    padding: 5;
}
script.js

function insert(num){
    document.form.textview.value=document.form.textview.value+num;
}

function equal(){
    var exp=document.form.textview.value;
    if(exp){
        document.form.textview.value=eval(exp);
    }
}

function clean(){
    document.form.textview.value="";
}

function back(){
    var exp=document.form.textview.value;
    document.form.textview.value=exp.substring(0,exp.length-1);
}

Output

Explanation of above code​

Prog9.html​

This HTML file serves as the framework for a basic calculator interface.

Head Section

  • <head> contains metadata like the viewport settings, title, and links to external files:
    • <meta> sets the viewport to ensure proper rendering on various devices.
    • <title> specifies the title displayed on the browser tab.
    • <link> references an external stylesheet named "style.css" for styling the calculator.

Body Section

  • <body> holds the calculator interface elements:
    • A <div> element with a class of "main" acts as a container for the calculator.
    • Inside this container:
      • A <form> with a name attribute "form" wraps an <input> field with the class "textview" for displaying input and results.
      • A <table> structure contains rows and cells representing the calculator buttons. Each cell contains an <input> element with the class "button" representing various calculator functionalities.
      • JavaScript code linked externally to "script.js" handles the functionality of the calculator, such as number insertion, arithmetic operations, clearing the display, and backspacing.

style.css​

This CSS file now holds the styling rules previously embedded within the HTML.

  • Defines CSS rules for:
    • Resetting margins and paddings to zero for all elements (* { margin: 0; padding: 0; }). -Styling the calculator buttons (button class). -Styling the text view (textview class).

script.js​

This JavaScript file contains the functions that were initially within <script> tags in the HTML.

  • Functions include:
    • insert(num): Inserts numbers and operators into the text view.
    • equal(): Evaluates the expression in the text view.
    • clean(): Clears the text view.
    • back(): Deletes the last character from the text view.

By separating concerns into different files (HTML, CSS, and JS), the code becomes more organized and maintainable, making it easier to update and modify specific aspects of the calculator without altering other functionalities or the layout.

Learn more​

Reference​