Browser Calculator

What is a browser calculator How do you make a browser calculator? This script and codes were developed by Yas on 11 March 2022, Friday.

How do I make an browser calculator?
  1. Browser Calculator Previews
  2. Browser Calculator HTML Codes
  3. Browser Calculator CSS Codes
  4. Browser Calculator JS Codes
Browser Calculator Previews

Browser Calculator HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Browser Calculator </title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Nunito'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="calc row">
    <div class="calculator-container">
      <div class="output">
        <span id="main-display">0</span><br>
        <span id="calc-display">&nbsp;</span>
      </div>
      <div class="button-row1"> 
        <button type="button" class="btn btn-info" onclick="clearCalc()">AC</button>
        <button type="button" class="btn btn-info" onclick="clearEnter()">CE</button>
        <button type="button" class="btn btn-info" onclick="makePercent()">%</button>
        <button type="button" class="btn btn-last btn-warning" onclick="setOperator('/')">/</button>
      </div>
      <div class="button-row"> 
        <button type="button" class="btn btn-primary" onclick="enterNum('7')">7</button>
        <button type="button" class="btn btn-primary" onclick="enterNum('8')">8</button>
        <button type="button" class="btn btn-primary" onclick="enterNum('9')">9</button>
        <button type="button" class="btn btn-last btn-warning" onclick="setOperator('x')">x</button>
      </div>
      <div class="button-row"> 
        <button type="button" class="btn btn-primary" onclick="enterNum('4')">4</button>
        <button type="button" class="btn btn-primary" onclick="enterNum('5')">5</button>
        <button type="button" class="btn btn-primary" onclick="enterNum('6')">6</button>
        <button type="button" class="btn btn-last btn-warning" onclick="setOperator('-')">&mdash;</button>
      </div>
      <div class="button-row"> 
        <button type="button" class="btn btn-primary" onclick="enterNum('1')">1</button>
        <button type="button" class="btn btn-primary" onclick="enterNum('2')">2</button>
        <button type="button" class="btn btn-primary" onclick="enterNum('3')">3</button>
        <button type="button" class="btn btn-last btn-warning" onclick="setOperator('+')">+</button>
      </div>
      <div class="button-row"> 
        <button type="button" class="btn btn-double btn-primary" onclick="enterNum('0')">0</button>
        <button type="button" class="btn btn-primary" onclick="enterNum('.')">.</button>
        <button type="button" class="btn btn-last btn-success" onclick="equals()">=</button>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>

Browser Calculator CSS Codes

.calc {
  margin-top: 40px;
}
.calculator-container {
  display: block;
  width: 324px;
  margin: 0 auto;
}
.output {
  background-color: #eee;
  padding: 0px 24px;
  text-align: right;
  border-radius: 8px;
  border: 2px solid #5bc0de;
  width: 324px;
}
#main-display {
  font-size: 30px;
  ont-family: 'Roboto', sans-serif;
}
#calc-display {
  font-size: 18px;
  color: #777;
  ont-family: 'Roboto', sans-serif;
}
.button-row1 {
  padding: 10px 0px 4px 0px;
  width: 324px;
}
.button-row {
  padding: 2px 0px 2px 0px;
  width: 324px;
}
.btn {
  width: 21%;
  font-size: 20px;
  margin: 4px 13px 4px 0px;
  font-family: 'Nunito', sans-serif;
}
.btn-last {
  margin: 4px 0px 4px 0px !important; 
}
.btn-double {
  width: 47%;
  font-size: 20px;
  margin: 4px 13px 4px 0px;
  font-family: 'Nunito', sans-serif;
}

Browser Calculator JS Codes

var operand1;
var operand2;
var operator;
var a = 0;

function getResult() {
  var c = 0;
  var b = operand2*1;
  console.log(typeof a);
  console.log(typeof b);
  console.log(typeof c);
  console.log("b is:", b);
  switch(operator) {
    case "+":
      c = a+b;
      break;
    case "-":
      c = a-b;
      break;
    case "x":
      c = a*b;
      break;
    case "/":
      c = a/b;
      break;
  }
  operand1 = c.toString();
}

function clearCalc() {
  operand1 = undefined;
  operand2 = undefined;
  operator = undefined;
  document.getElementById("calc-display").innerHTML = "&nbsp;";
  document.getElementById("main-display").innerHTML = "0";
  console.log(operand1); 
}

function enterNum(x) {
  if(operator === undefined) {
    if (operand1 === undefined) {
      operand1 = x; 
    } else {
      operand1 += x;
    }
    document.getElementById("calc-display").innerHTML = operand1;
    document.getElementById("main-display").innerHTML = operand1;
    console.log(operand1);
  } else {
     if(operand2 === undefined){
      operand2 = x; 
     } else {
      operand2 += x; 
     }
     document.getElementById("calc-display").innerHTML = operand1 + operand2;
     document.getElementById("main-display").innerHTML = operand2;
   }
}

function setOperator(z) {
  if(operator === undefined) {
    if(operand1 !== undefined) {
      document.getElementById("main-display").innerHTML = "&nbsp;";
      operator = z;
      a = operand1*1;
      operand1 += z;
      document.getElementById("calc-display").innerHTML = operand1;
    }
  } else {
    getResult();
    document.getElementById("main-display").innerHTML = operand1;
    a = operand1*1;
    operand1 += z;
    document.getElementById("calc-display").innerHTML = operand1;
    operand2 = undefined;
    operator = z;
  }
}

function equals() {
  getResult();
  document.getElementById("main-display").innerHTML = operand1;
  document.getElementById("calc-display").innerHTML = "&nbsp;";
  operand1 = undefined;
  operand2 = undefined;
  operator = undefined;
}

function clearEnter() {
  console.log(operator);
  if(operator === undefined) {
    operand1 = undefined;
    document.getElementById("main-display").innerHTML = "0";
    document.getElementById("calc-display").innerHTML = "&nbsp;";
  } else if(operator !== undefined && operand2 === undefined) {
    operator = undefined;
    operand1 = operand1.substring(operand1.length-1, 0);
    document.getElementById("main-display").innerHTML = operand1;
    document.getElementById("calc-display").innerHTML = "&nbsp;";
  } else {
    operand2 = undefined;
    document.getElementById("main-display").innerHTML = "&nbsp;";
    document.getElementById("calc-display").innerHTML = operand1;
  }
}

function makePercent() {
  if(operator === undefined) {
    operand1 = (operand1*1)/100;
    console.log(operand1);
    document.getElementById("main-display").innerHTML = operand1;
    document.getElementById("calc-display").innerHTML = operand1;
  } 
  if(operator !== undefined && operand2 !== undefined) {
    operand2 = (operand2*1)/100;
    console.log(operand2);
    document.getElementById("main-display").innerHTML = operand2;
    document.getElementById("calc-display").innerHTML = operand1 + operand2;
  }
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.