31+ JavaScript Calculator Examples

This post contains a total of 31+ Hand-Picked JavaScript Calculator Examples with Source Code. All these calculators are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Calculator Examples

1. By Fabio Ottaviani

Made by Fabio Ottaviani. Simple JavaScript Calculator with modern Design. Source

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

  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>
  
<style>
/*--------------------
Reset & body
--------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  background: linear-gradient(180deg, #feead2, #fff8ee);
  font-family: Open Sans;
  font-size: 16px;
}
body:before {
  content: "";
  width: 800px;
  height: 600px;
  background: #f00;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

/*--------------------
Calculator
--------------------*/
.calculator {
  width: 300px;
  background: linear-gradient(135deg, #fcaf3b, #f25c2a);
  box-shadow: 0 10px 28px #d8724a;
  margin: 30px auto;
  position: absolute;
  overflow: hidden;
  border-radius: 20px;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -62%);
}

/*--------------------
screen
--------------------*/
.screen {
  background: #fff;
  padding: 15px 28px;
  height: 69px;
  text-align: right;
  font-size: 29px;
  color: #4c455a;
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 2px 3px #d8724a;
  transition: color 0.6s ease-in-out;
}
.screen::after {
  content: "";
  display: table;
  clear: both;
}

/*--------------------
Buttons
--------------------*/
.buttons button {
  float: right;
  border: none;
  background: transparent;
  color: #fff;
  padding: 15px 10px;
  outline: none;
  text-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  focus: none !important;
}
.buttons button:hover {
  background: rgba(255, 255, 255, 0.1);
}
.buttons button:active, .buttons button.active {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 14px;
}
.buttons::after {
  content: "";
  display: table;
  clear: both;
}
.buttons .numbers {
  float: left;
  width: 75%;
  padding: 10px;
}
.buttons .numbers button {
  width: 33.3333%;
  padding: 18px 10px;
}
.buttons .operators {
  float: right;
  width: 25%;
  padding: 16px 10px 10px;
  background: rgba(0, 0, 0, 0.1);
  min-height: 260px;
}
.buttons .operators button {
  width: 100%;
  padding: 11px 10px;
}
.buttons .operators button[data-val=x] {
  font-size: 13px;
}
.buttons .operators button[data-val="-"] {
  font-size: 18px;
}
.buttons .operators button[data-val="="] {
  font-size: 16px;
}
</style>
</head>
<body>
<div class="calculator">
  <div class="screen">15x3</div>
  <div class="buttons">
    <div class="numbers">
      <button data-val="9">9</button>
      <button data-val="8">8</button>
      <button data-val="7">7</button>
      <button data-val="6">6</button>
      <button data-val="5">5</button>
      <button data-val="4">4</button>
      <button data-val="3">3</button>
      <button data-val="2">2</button>
      <button data-val="1">1</button>
      <button data-val="clear">C</button>
      <button data-val=".">.</button>
      <button data-val="0" href="0">0</button>
    </div>
    <div class="operators">
      <button data-val="÷">÷</button>
      <button data-val="x">x</button>
      <button data-val="-">-</button>
      <button data-val="+">+</button>
      <button data-val="=">=</button>
    </div>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var $keys = $('.calculator button');
var $screen = $('.screen');
var decimal = false;
var operators = ['+', '-', 'x', '÷'];

$keys.click(function () {
  var keyVal = $(this).data('val');
  output = $('.screen').html();

  console.log(keyVal);

  // clear
  if (keyVal == 'clear') {
    $screen.html('');
    decimal = false;
  }
  // equal
  else if (keyVal == '=') {
      var equation = output;
      var lastChar = equation[equation.length - 1];
      equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
      if (operators.indexOf(lastChar) > -1 || lastChar == '.')
      equation = equation.replace(/.$/, '');
      if (equation) {
        $screen.html(eval(equation));
      }
      decimal = false;
    }
    // operators
    else if ($(this).parent().is('.operators')) {
        var lastChar = output[output.length - 1];
        if (output != '' && operators.indexOf(lastChar) == -1) {
          $screen.html($screen.html() + keyVal);
        } else if (output == '' && keyVal == '-') {
          $screen.html($screen.html() + keyVal);
        }
        if (operators.indexOf(lastChar) > -1 && output.length > 1) {
          $screen.html($screen.html().replace(/.$/, keyVal));
        }
        decimal = false;
      }
      // decimal
      else if (keyVal == '.') {
          if (!decimal) {
            $screen.html($screen.html() + keyVal);
            decimal = true;
          }
        }
        // buttons
        else {
            $screen.html($screen.html() + keyVal);
          }
});

$(window).keydown(function (e) {
  console.log(e.which);
  switch (e.which) {
    case 96:
      key = 0;
      break;
    case 97:
      key = 1;
      break;
    case 98:
      key = 2;
      break;
    case 99:
      key = 3;
      break;
    case 100:
      key = 4;
      break;
    case 101:
      key = 5;
      break;
    case 102:
      key = 6;
      break;
    case 103:
      key = 7;
      break;
    case 104:
      key = 8;
      break;
    case 105:
      key = 9;
      break;
    case 111:
      key = '÷';
      break;
    case 109:
      key = '-';
      break;
    case 106:
      key = 'x';
      break;
    case 107:
      key = '+';
      break;
    case 13:
      key = '=';
      break;
    case 110:
      key = '.';
      break;
    case 27:
      key = 'clear';
      break;
    default:
      return false;}


  $('[data-val="' + key + '"]').addClass('active').click();

}).keyup(function () {
  $('.active').removeClass('active');
});


/*--------------------
Codepen Preview Tile
--------------------*/
$('[data-val="clear"]').click().delay(100).queue(function () {
  $('[data-val="1"]').click().delay(200).queue(function () {
    $('[data-val="5"]').click().delay(200).queue(function () {
      $('[data-val="x"]').click().delay(200).queue(function () {
        $('[data-val="3"]').click();
      });
    });
  });
});
    </script>
</body>
</html>

2. By Vikas Lalwani

Made by Vikas Lalwani. Google styled Calculator. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet' type='text/css'>

<style>
body {
  width: 500px;
  margin: 4% auto;
  font-family: 'Source Sans Pro', sans-serif;
  letter-spacing: 5px;
  font-size: 1.8rem;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.calculator {
  padding: 20px;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.input {
  border: 1px solid #ddd;
  border-radius: 1px;
  height: 60px;
  padding-right: 15px;
  padding-top: 10px;
  text-align: right;
  margin-right: 6px;
  font-size: 2.5rem;
  overflow-x: auto;
  transition: all .2s ease-in-out;
}

.input:hover {
  border: 1px solid #bbb;
  -webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}

.buttons {}

.operators {}

.operators div {
  display: inline-block;
  border: 1px solid #bbb;
  border-radius: 1px;
  width: 80px;
  text-align: center;
  padding: 10px;
  margin: 20px 4px 10px 0;
  cursor: pointer;
  background-color: #ddd;
  transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}

.operators div:hover {
  background-color: #ddd;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border-color: #aaa;
}

.operators div:active {
  font-weight: bold;
}

.leftPanel {
  display: inline-block;
}

.numbers div {
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 1px;
  width: 80px;
  text-align: center;
  padding: 10px;
  margin: 10px 4px 10px 0;
  cursor: pointer;
  background-color: #f9f9f9;
  transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}

.numbers div:hover {
  background-color: #f1f1f1;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border-color: #bbb;
}

.numbers div:active {
  font-weight: bold;
}

div.equal {
  display: inline-block;
  border: 1px solid #3079ED;
  border-radius: 1px;
  width: 17%;
  text-align: center;
  padding: 127px 10px;
  margin: 10px 6px 10px 0;
  vertical-align: top;
  cursor: pointer;
  color: #FFF;
  background-color: #4d90fe;
  transition: all .2s ease-in-out;
}

div.equal:hover {
  background-color: #307CF9;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border-color: #1857BB;
}

div.equal:active {
  font-weight: bold;
}
</style>
</head>
<body>
  <div class="calculator">
  <div class="input" id="input"></div>
  <div class="buttons">
    <div class="operators">
      <div>+</div>
      <div>-</div>
      <div>&times;</div>
      <div>&divide;</div>
    </div>
    <div class="leftPanel">
      <div class="numbers">
        <div>7</div>
        <div>8</div>
        <div>9</div>
      </div>
      <div class="numbers">
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </div>
      <div class="numbers">
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>
      <div class="numbers">
        <div>0</div>
        <div>.</div>
        <div id="clear">C</div>
      </div>
    </div>
    <div class="equal" id="result">=</div>
  </div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  
      <script>
"use strict";

var input = document.getElementById('input'), // input/output button
number = document.querySelectorAll('.numbers div'), // number buttons
operator = document.querySelectorAll('.operators div'), // operator buttons
result = document.getElementById('result'), // equal button
clear = document.getElementById('clear'), // clear button
resultDisplayed = false; // flag to keep an eye on what output is displayed

// adding click handlers to number buttons
for (var i = 0; i < number.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  number[i].addEventListener("click", function (e) {

    // storing current input string and its last character in variables - used later
    var currentString = input.innerHTML;
    var lastChar = currentString[currentString.length - 1];

    // if result is not diplayed, just keep adding
    if (resultDisplayed === false) {
      input.innerHTML += e.target.innerHTML;
    } else if (resultDisplayed === true && lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") {
      // if result is currently displayed and user pressed an operator
      // we need to keep on adding to the string for next operation
      resultDisplayed = false;
      input.innerHTML += e.target.innerHTML;
    } else {
      // if result is currently displayed and user pressed a number
      // we need clear the input string and add the new input to start the new opration
      resultDisplayed = false;
      input.innerHTML = "";
      input.innerHTML += e.target.innerHTML;
    }

  });
}

// adding click handlers to number buttons
window.CP.exitedLoop(0);for (var i = 0; i < operator.length; i++) {if (window.CP.shouldStopExecution(1)) break;
  operator[i].addEventListener("click", function (e) {

    // storing current input string and its last character in variables - used later
    var currentString = input.innerHTML;
    var lastChar = currentString[currentString.length - 1];

    // if last character entered is an operator, replace it with the currently pressed one
    if (lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") {
      var newString = currentString.substring(0, currentString.length - 1) + e.target.innerHTML;
      input.innerHTML = newString;
    } else if (currentString.length == 0) {
      // if first key pressed is an opearator, don't do anything
      console.log("enter a number first");
    } else {
      // else just add the operator pressed to the input
      input.innerHTML += e.target.innerHTML;
    }

  });
}

// on click of 'equal' button
window.CP.exitedLoop(1);result.addEventListener("click", function () {

  // this is the string that we will be processing eg. -10+26+33-56*34/23
  var inputString = input.innerHTML;

  // forming an array of numbers. eg for above string it will be: numbers = ["10", "26", "33", "56", "34", "23"]
  var numbers = inputString.split(/\+|\-|\×|\÷/g);

  // forming an array of operators. for above string it will be: operators = ["+", "+", "-", "*", "/"]
  // first we replace all the numbers and dot with empty string and then split
  var operators = inputString.replace(/[0-9]|\./g, "").split("");

  console.log(inputString);
  console.log(operators);
  console.log(numbers);
  console.log("----------------------------");

  // now we are looping through the array and doing one operation at a time.
  // first divide, then multiply, then subtraction and then addition
  // as we move we are alterning the original numbers and operators array
  // the final element remaining in the array will be the output

  var divide = operators.indexOf("÷");
  while (divide != -1) {if (window.CP.shouldStopExecution(2)) break;
    numbers.splice(divide, 2, numbers[divide] / numbers[divide + 1]);
    operators.splice(divide, 1);
    divide = operators.indexOf("÷");
  }window.CP.exitedLoop(2);

  var multiply = operators.indexOf("×");
  while (multiply != -1) {if (window.CP.shouldStopExecution(3)) break;
    numbers.splice(multiply, 2, numbers[multiply] * numbers[multiply + 1]);
    operators.splice(multiply, 1);
    multiply = operators.indexOf("×");
  }window.CP.exitedLoop(3);

  var subtract = operators.indexOf("-");
  while (subtract != -1) {if (window.CP.shouldStopExecution(4)) break;
    numbers.splice(subtract, 2, numbers[subtract] - numbers[subtract + 1]);
    operators.splice(subtract, 1);
    subtract = operators.indexOf("-");
  }window.CP.exitedLoop(4);

  var add = operators.indexOf("+");
  while (add != -1) {if (window.CP.shouldStopExecution(5)) break;
    // using parseFloat is necessary, otherwise it will result in string concatenation :)
    numbers.splice(add, 2, parseFloat(numbers[add]) + parseFloat(numbers[add + 1]));
    operators.splice(add, 1);
    add = operators.indexOf("+");
  }window.CP.exitedLoop(5);

  input.innerHTML = numbers[0]; // displaying the output

  resultDisplayed = true; // turning flag if result is displayed
});

// clearing the input on press of clear
clear.addEventListener("click", function () {
  input.innerHTML = "";
});
    </script>
</body>
</html>

3. By Anthony Koch

Made by Anthony Koch. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.20.0/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.1.1/vuex.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@import url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,400italic,600,700,900,200");
html {
  box-sizing: border-box;
  color: #222;
  font-size: 1rem;
  font-family: Source Sans Pro;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #B6B2AB;
  background-image: linear-gradient(135deg,#B6B2AB 0%, #B3AFA7 25%, #B8B5AF 25%, #78736B 50%, #6F6862 50%, #58504B 75%, #5F574E 75%, #625A51 100%);
  min-height: 100vh;
}

.App {
  opacity: 0;
  transition: opacity 0.3s;
}

.Calculator {
  box-shadow: 12px 18px 45px 0 rgba(0, 0, 0, 0.25);
  cursor: default;
  margin: 0 auto;
  transform: translate(-50%, -50%);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
}

.Calculator-header {
  background: white;
  overflow: hidden;
  padding: 20px 20px;
  position: relative;
  text-align: right;
}

.Calculator-expressions {
  color: rgba(158, 158, 158, 0.76);
  display: block;
  float: right;
  font-size: 15px;
  line-height: 22px;
  min-height: 22px;
  position: relative;
  white-space: nowrap;
  width: 100%;
  word-wrap: normal;
}

.Calculator-expressionsList {
  display: block;
  float: right;
}

.Calculator__expressionsOverflow {
  color: #333;
  box-shadow: 5px 0 20px 4px rgba(0, 0, 0, 0.3);
  font-weight: 700;
  opacity: 0;
  padding-right: 0px;
  text-align: center;
  transition: opacity 0.5s;
  transform: translate(0, -50%);
  position: absolute;
  top: 50%;
  left: -24px;
  height: 17px;
  width: 2px;
}
.Calculator__expressionsOverflow:before {
  content: "";
}
.Calculator__expressionsOverflow.is-showing {
  opacity: 1;
}

.Calculator-operands {
  color: #151515;
  font-size: 60px;
  font-weight: 200;
  line-height: 1.1;
  clear: both;
}

.Calculator-currentOperand {
  display: block;
  overflow: visible;
  min-height: 60px;
  line-height: 60px;
  float: right;
  transition-duration: 0.2s;
  transition-property: font-size;
}
.Calculator-currentOperand.has-error {
  color: #ef5334;
}

.Calculator-body {
  background: white;
}

.Calculator-buttonsContainer {
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
  position: relative;
}
.Calculator-buttonsContainer:before {
  background-color: rgba(90, 95, 114, 0.76);
  background-image: linear-gradient(to bottom,rgba(90, 95, 114, 0.76), rgba(29, 32, 37, 0.8));
  box-shadow: 17px 27px 72px 1px rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.2));
  content: "";
  position: absolute;
  top: 0;
  right: -18px;
  bottom: 0;
  left: -18px;
}

.Calculator-button {
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: 24px;
  font-weight: 300;
  flex: 25%;
  line-height: 70px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.Calculator-button {
  cursor: pointer;
  transition: box-shadow 0.2s, background-color 0.15s;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
}
.Calculator-button:hover {
  background: rgba(0, 0, 0, 0.08);
}
.Calculator-button:active, .Calculator-button.is-active {
  box-shadow: inset 0 3px 15px 0 rgba(0, 0, 0, 0.3);
}
.Calculator-button.has-children:hover, .Calculator-button.has-children:active {
  background: initial;
  box-shadow: none;
  cursor: default;
}
.Calculator-button > span {
  display: block;
}

.Calculator-button--negation,
.Calculator-button--modulo {
  font-size: 18px;
}

.Calculator-button--square {
  font-size: 16px;
}

.Calculator-button--division {
  font-size: 20px;
}

.Calculator-button--multiplication {
  font-size: 30px;
}

.Calculator-button--addition {
  font-size: 26px;
}

.Calculator-button--subtraction {
  font-size: 25px;
}

.Calculator-button--paren {
  display: flex;
  font-size: 18px;
}
.Calculator-button--paren:hover, .Calculator-button--paren:active {
  background: initial !important;
  box-shadow: none !important;
  cursor: default !important;
}
.Calculator-button--paren > span {
  flex: 50%;
}
.Calculator-button--paren > span {
  cursor: pointer;
  transition: box-shadow 0.2s, background-color 0.15s;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
}
.Calculator-button--paren > span:hover {
  background: rgba(0, 0, 0, 0.08);
}
.Calculator-button--paren > span:active, .Calculator-button--paren > span.is-active {
  box-shadow: inset 0 3px 15px 0 rgba(0, 0, 0, 0.3);
}
.Calculator-button--paren > span.has-children:hover, .Calculator-button--paren > span.has-children:active {
  background: initial;
  box-shadow: none;
  cursor: default;
}

.Calculator-equals {
  background-color: #FF8D4B;
  background-image: linear-gradient(to right,#FF8D4B, #FF542E);
  cursor: pointer;
  padding: 26px 0;
  position: relative;
  z-index: -1;
}

.Calculator-equalsLine {
  background: white;
  display: block;
  margin: 0 auto 6px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  height: 1px;
  width: 20px;
}

.Calculator-equalsLine:last-child {
  margin-bottom: 0;
}
</style>
</head>
<body>
  <template data-template="calculatorbutton">
  <div class="Calculator-button" v-bind:class="className"><span v-bind:class="['btest', button.icon ? button.icon : '']" v-if="button.children == null" v-text="button.text" @click.stop="emitAction($event, button)"></span><span v-for="childButton in button.children" v-bind:class="[childButton.className || ' btest ', 'btest']" v-text="childButton.text" @click.stop="emitAction($event, childButton)"></span></div>
</template>
<div class="App js-app" v-bind:style="{ opacity: appLoaded ? 1 : 0 }">
  <div class="Calculator">
    <header class="Calculator-header">
      <div class="Calculator-expressions"><span class="Calculator-expressionsOverflow"></span><span class="Calculator-expressionsList">{{ expressionList }}</span></div>
      <div class="Calculator-operands"><span class="Calculator-currentOperand" v-bind:class="{ 'has-error': error }" v-bind:style="{ 'font-size': font.size, 'font-weight': font.weight }">{{ operand }}</span></div>
    </header>
    <div class="Calculator-body">
      <div class="Calculator-buttonsContainer">
        <div v-for="button in buttons" is="calculatorbutton" v-bind:button="button">{{ button.children }}</div>
      </div>
    </div>
    <div class="Calculator-equals" @click.stop="$store.dispatch('showTotal', { explicit: true })">
      <div class="Calculator-equalsLine"></div>
      <div class="Calculator-equalsLine"></div>
    </div>
  </div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
/*

-> Design credit goes to Jaroslav Getman
-> https://dribbble.com/shots/2334270-004-Calculator

Calculator 2.0

This is the second iteration of this calculator, built with Vue and Vuex. You can find the code for this new version of the calculator and the old calculator here.

github.com/anthonykoch/calculator

TODO:
1. Make buttons show keypress when a keybind is pressed

FIXME:
1. Fix error where Expressions = ['(', '5', '*', '3', ')'] and mode is APPEND after ")". It should be insert
2. Even though pressing delete causes mutation CLEAR_ENTRY to fire, changing the state does nothing until a button has been pressed. Not sure if this is a problem with Vuex or the way I'm doing it.

*/

function main() {
  'use strict';

  const $ = document.querySelector.bind(document);

  const $app = $('.js-app');

  const templates = {

    calculatorButton: $(`[data-template="calculatorbutton"]`).innerHTML };



  const ACTION_CLEAR = 'clear';
  const ACTION_CLEAR_ENTRY = 'clearEntry';
  const ACTION_NEGATE = 'negate';
  const ACTION_UPDATE_OPERATOR = 'updateOperator';
  const ACTION_APPEND_OPERAND = 'appendOperand';
  const ACTION_ADD_PAREN = 'addParen';
  const ACTION_BACKSPACE = 'backspace';
  const ACTION_SHOW_TOTAL = 'showTotal';

  const buttons = [
  {
    text: 'C',
    className: 'clear',
    action: ACTION_CLEAR },

  {
    text: '+/-',
    className: 'negation',
    action: ACTION_NEGATE },

  {
    text: '%',
    className: 'modulo',
    action: ACTION_UPDATE_OPERATOR,
    payload: {
      operator: '%' } },


  {
    text: '√',
    className: 'square',
    action: ACTION_UPDATE_OPERATOR,
    payload: {
      operator: 'yroot' } },




  {
    text: '7',
    action: ACTION_APPEND_OPERAND,
    payload: {
      value: '7' } },


  {
    text: '8',
    action: ACTION_APPEND_OPERAND,
    payload: {
      value: '8' } },


  {
    text: '9',
    action: ACTION_APPEND_OPERAND,
    payload: {
      value: '9' } },


  {
    text: '/',
    className: 'division',
    action: ACTION_UPDATE_OPERATOR,
    payload: {
      operator: '/' } },




  {
    text: '4',
    action: ACTION_APPEND_OPERAND,
    payload: {
      value: '4' } },


  {
    text: '5',
    action: ACTION_APPEND_OPERAND,
    payload: {
      value: '5' } },


  {
    text: '6',
    action: ACTION_APPEND_OPERAND,
    payload: {
      value: '6' } },


  {
    text: '',
    className: 'multiplication',
    icon: 'ion-ios-close-empty',
    action: ACTION_UPDATE_OPERATOR,
    payload: {
      operator: '*' } },




  {
    text: '1',
    action: ACTION_APPEND_OPERAND,
    payload: {
      value: '1' } },


  {
    text: '2',
    action: ACTION_APPEND_OPERAND,
    payload: {
      value: '2' } },


  {
    text: '3',
    action: ACTION_APPEND_OPERAND,
    payload: {
      value: '3' } },


  {
    text: '',
    className: 'subtraction',
    icon: 'ion-ios-minus-empty',
    action: ACTION_UPDATE_OPERATOR,
    payload: {
      operator: '-' } },




  {
    text: '0',
    action: ACTION_APPEND_OPERAND,
    payload: {
      value: '0' } },


  {
    className: 'paren',
    children: [
    {
      text: '(', className: 'open-paren',
      action: ACTION_ADD_PAREN,
      payload: {
        operator: '(' } },


    {
      text: ')', className: 'close-paren',
      action: ACTION_ADD_PAREN,
      payload: {
        operator: ')' } }] },




  {
    text: '.',
    action: ACTION_APPEND_OPERAND,
    payload: {
      value: '.' } },


  {
    text: '',
    className: 'addition',
    icon: 'ion-ios-plus-empty',
    action: ACTION_UPDATE_OPERATOR,
    payload: {
      operator: '+' } }];





  // Mode show total causes the total to be displayed in the current operand display
  const MODE_SHOW_TOTAL = 1 << 1;
  // Mode insert operand causes the current operand to be overwritten. After the first character has been written, the mode should go to mode append operand
  const MODE_INSERT_OPERAND = 1 << 2;
  // Mode append operand causes any operand parts to be appended to the current operand
  const MODE_APPEND_OPERAND = 1 << 3;


  // The maximum number of digits the current operand may be
  const MAX_NUMBER_LENGTH = Number.MAX_SAFE_INTEGER.toString().length;


  const initialState = {

    activeButtons: [],

    buttons,

    expressions: ['5', '+', '7', '-', '45', '+', '3', '+', '177', '-'],

    currentOperand: '147',

    currentOperator: '-',

    mode: MODE_SHOW_TOTAL | MODE_INSERT_OPERAND,

    openParenStack: 0,

    error: null,

    total: 147 };



  const mutations = {

    CLEAR(state) {
      state.expressions = [];
      state.currentOperand = '0';
      state.currentOperator = '';
      state.openParenStack = 0;
      state.mode = MODE_SHOW_TOTAL | MODE_INSERT_OPERAND;
      state.error = null;
      state.total = 0;
    },

    BACKSPACE(state) {
      let operand = state.currentOperand.slice(0, -1);

      if (operand.length === 0) {
        operand = '0';
      }

      state.currentOperand = operand;
    },

    CLEAR_ENTRY(state) {
      state.currentOperand = '0';
    },

    NEGATE(state) {
      // Only add negative sign if not zero
      if (state.currentOperand !== 0) {
        state.currentOperand = (-state.currentOperand).toString();
      }
    },

    UPDATE_OPERATOR(state, { operator }) {
      const length = state.expressions.length;
      const last = state.expressions[length - 1] || '';
      const { mode, currentOperand } = state;

      if (mode & MODE_INSERT_OPERAND) {
        console.log('MODE_INSERT_OPERAND');

        if (length === 0) {
          state.expressions.push(currentOperand, operator);
        } else if (isOperator(last)) {
          // console.log('isoplast');                            // APPEND_OP LOG
          state.expressions.pop();
          state.expressions.push(operator);
        } else if (last === ')') {
          // console.log('nope');                                // APPEND_OP LOG
          state.expressions.push(operator);
        } else if (last === '(') {
          state.expressions.push(currentOperand, operator);
        } else {
          // console.log('else');                                // APPEND_OP LOG
        }
      } else if (mode & MODE_APPEND_OPERAND) {
        console.log('MODE_APPEND_OPERAND');

        if (length === 0) {
          console.log('length 0'); // APPEND_OP LOG
          state.expressions.push(currentOperand, operator);
        } else if (isOperator(last)) {
          // console.log('isOperator(last)');                    // APPEND_OP LOG
          state.expressions.push(currentOperand, operator);
        } else if (last === ')') {
          // console.log('last === )');                          // APPEND_OP LOG
          state.expressions.push(operator);
        } else if (last === '(') {
          // console.log('last === (');                          // APPEND_OP LOG
          state.expressions.push(currentOperand, operator);
        } else {
          // console.log('else');
          // state.expressions.push(operator, currentOperand);
        }
      }

      state.currentOperator = operator;
      state.mode = MODE_INSERT_OPERAND | MODE_SHOW_TOTAL;

      console.log('UPDATE_OPERATOR:', state.expressions);
    },

    ADD_PAREN(state, { operator }) {
      const last = state.expressions[state.expressions.length - 1] || '';
      const { currentOperand, openParenStack } = state;

      // console.log('ADD_PAREN:', {last, operator});

      if (operator === ')' && openParenStack === 0) {
        // No need to add closing paren if there is no open paren
        return;
      } else if (operator === '(' && last === ')') {
        // FIXME: Look at real calculator for semantics
        return;
      }

      if (last === '(' && operator === ')') {
        // Handle immediate closed parens
        state.expressions.push(currentOperand, operator);
      } else if (isOperator(last) && operator === ')') {
        // Automatically append current operand when expressions
        // is "(5 *" so result is "(5 * 5)"
        state.expressions.push(currentOperand, operator);
      } else if ((isOperator(last) || length === 0) && operator === '(') {
        // Handle "5 *" where the result is "5 * (" and "(" is the beginning
        // of a new group expression
        state.expressions.push(operator);
      }

      if (operator === '(') {
        state.openParenStack++;
      } else if (operator === ')') {
        state.openParenStack--;
      }

      console.log('ADD_PAREN');
    },

    APPEND_OPERAND(state, { value, operator }) {
      const currentOperand = state.currentOperand;
      let newOperand = currentOperand;
      let newMode;

      // Don't append 0 to 0
      if (value === '0' && currentOperand[0] === '0') {
        return;
      } else if (value === '.' && currentOperand.includes('.')) {
        // Avoid appending multiple decimals
        return;
      }

      // Switch modes from showing the total to the current operand
      if (state.mode & MODE_SHOW_TOTAL) {
        newMode = MODE_INSERT_OPERAND;
      }

      if (state.mode & MODE_INSERT_OPERAND) {
        // console.log('INSERT');
        newOperand = value.toString();
        state.mode = MODE_APPEND_OPERAND;
      } else {
        // console.log('APPEND');
        newOperand += value.toString();
      }

      // TODO: Update font size, actually should do that in the vm
      state.currentOperand = newOperand.substring(0, MAX_NUMBER_LENGTH);
    },

    SHOW_TOTAL(state, { $commit, explicit } = {}) {
      const last = state.expressions[state.expressions.length - 1] || '';
      const expressions = state.expressions.slice(0);
      const currentOperand = state.currentOperand;
      const mode = state.mode;
      const currentTotal = state.total;
      const openParenStack = state.openParenStack;
      const isFirstNumber = typeof Number(expressions[0]) === 'number';
      const isSecondOperator = isOperator(expressions[1] || '');
      const length = expressions.length;
      let times = openParenStack;
      let total;

      if (expressions.length === 0) {
        return;
      } else
      if (explicit && isFirstNumber && isSecondOperator && length === 2) {
        // Handle case where expressions is 5 *

        // console.log('explicit && isFirstNumber && isSecondOperator');
        expressions.push(currentOperand);
      } else
      if (explicit && isOperator(last)) {
        // Handle case where expressions is ['5', '*', '4', '+'] and
        // the total is being explicitly being requested

        // console.log('explicit && isOperator(last)', isOperator(last), last);
        if (mode & MODE_INSERT_OPERAND) {
          expressions.push(currentTotal);
        } else if (mode & MODE_APPEND_OPERAND) {
          expressions.push(currentOperand);
        }
      } else
      if (isOperator(last)) {
        // Handle case where expressions is ['5', '*', '4', '+']

        // console.log('isOperator(last)');
        expressions.pop();
      }

      if (explicit) {
        // Automatically close parens when explicitly requesting
        // the total
        let times = openParenStack;

        while (times-- > 0) {if (window.CP.shouldStopExecution(0)) break;
          expressions.push(')');
        }window.CP.exitedLoop(0);
      } else if (!explicit && openParenStack === 1) {
        // Auto close if there is only one missing paren
        expressions.push(')');
      }

      try {
        total = MathParser.eval(expressions.join(' '));

        if (explicit) {
          $commit('CLEAR');
        }

        state.total = total;
      } catch (err) {
        if (explicit) {
          $commit('CLEAR');
          state.error = err;
          console.log(err);
        }
      }

      console.log(
      'SHOW_TOTAL; Expressions: "%s"; Total: %s; Explicit: %s',
      expressions.join(' '),
      total,
      !!explicit);
    } };

  const actions = {

    clear({ commit }) {
      commit('CLEAR');
      console.log('');
    },

    backspace({ commit }) {
      commit('BACKSPACE');
      console.log('');
    },

    clearEntry({ commit }) {
      commit('CLEAR_ENTRY');
      console.log('');
    },

    negate({ commit }) {
      commit('NEGATE');
      console.log('');
    },

    updateOperator({ commit }, payload) {
      commit('UPDATE_OPERATOR', payload);
      commit('SHOW_TOTAL', {
        ...payload,
        $commit: commit });

      console.log('');
    },

    appendOperand({ commit }, payload) {
      commit('APPEND_OPERAND', payload);
      commit('SHOW_TOTAL', {
        ...payload,
        $commit: commit });

      console.log('');
    },

    showTotal({ commit }, payload) {
      // FIXME: Probably not supposed to pass commit, but idk
      //        how else to do it
      commit('SHOW_TOTAL', {
        ...payload,
        $commit: commit });

      console.log('');
    },

    addParen({ commit }, payload) {
      commit('ADD_PAREN', payload);
      commit('SHOW_TOTAL', {
        ...payload,
        $commit: commit });

      console.log('');
    } };



  const store = window.store = new Vuex.Store({

    state: initialState,

    actions,

    mutations });




  Vue.component('calculatorbutton', {

    props: ['button'],

    template: templates.calculatorButton,

    computed: {

      className() {
        const button = this.button;
        let className = '';

        if (button.children) {
          className += ' has-children ';
        }

        if (button.className) {
          className += ` Calculator-button--${button.className} `;
        }

        return className;
      } },



    methods: {

      emitAction($event, button) {
        this.$store.dispatch(button.action, button.payload);
      } } });






  // [...document.querySelectorAll('.btest')].forEach(item => {
  // 	item.addEventListener('click', () => {
  // 		console.log('btest');
  // 	});
  // })

  const app = new Vue({

    el: $app,

    store,

    mounted() {
      setTimeout(() => this.appLoaded = true, 100);
    },

    data: {

      console,

      appLoaded: false },



    computed: {

      ...Vuex.mapState([
      'buttons',
      'expressions',
      'currentOperand',
      'currentOperator',
      'openParenStack',
      'total',
      'error',
      'mode']),


      operand() {
        let operand;

        if (this.error) {
          return 'Error';
        }

        console.log('Flags:', getFlags(this.mode));

        if (this.mode & MODE_SHOW_TOTAL) {
          operand = this.total.toString();
          console.log('DISPLAY_TOTAL', this.total.toString());
        } else {
          operand = this.currentOperand;
          console.log('DISPLAY_CURRENT', this.currentOperand);
        }

        return operand;
      },

      expressionList() {
        return this.expressions.map((str, index, array) => {
          const s = str.trim();

          if (array[index - 1] === '(') {
            return s;
          } else if (s === ')') {
            return s;
          } else if (s[0] === '-' && isNumberPart(s[1])) {
            return ' ' + str;
          } else {
            return ' ' + s;
          }

          return str;
        }).
        join('');
      },

      font() {
        let length;

        if (this.mode & MODE_SHOW_TOTAL) {
          length = this.total.toString().length;
        } else {
          length = this.currentOperand.toString().length;
        }

        let size;
        let weight;

        if (length < 8) {
          size = '60px';
          weight = '200';
        } else if (length <= MAX_NUMBER_LENGTH) {
          size = '28px';
          weight = '300';
        } else if (length >= MAX_NUMBER_LENGTH) {
          size = '24px';
          weight = '300';
        }

        return { size, weight };

      } } });





  const Key = {
    Backspace: 8,
    Delete: 46,
    Enter: 13,
    Escape: 27,

    Multiply: 106,
    Add: 107,
    Subtract: 109,
    Decimal: 110,
    Divide: 111,

    Equals: 187,
    Dash: 189,
    ForwardSlash: 191,

    0: 48,
    1: 49,
    2: 50,
    3: 51,
    4: 52,
    5: 53,
    6: 54,
    7: 55,
    8: 56,
    9: 57,

    Numpad0: 96,
    Numpad1: 97,
    Numpad2: 98,
    Numpad3: 99,
    Numpad4: 100,
    Numpad5: 101,
    Numpad6: 102,
    Numpad7: 103,
    Numpad8: 104,
    Numpad9: 105 };


  const KeyTranslate = {
    48: '0',
    49: '1',
    50: '2',
    51: '3',
    52: '4',
    53: '5',
    54: '6',
    55: '7',
    56: '8',
    57: '9',

    96: '0',
    97: '1',
    98: '2',
    99: '3',
    100: '4',
    101: '5',
    102: '6',
    103: '7',
    104: '8',
    105: '9',

    106: '*',
    107: '+',
    109: '-',
    111: '/',

    189: '-',
    191: '/' };


  const OperatorKeys = [Key.Multiply, Key.Add, Key.Subtract, Key.Divide];

  window.addEventListener('keydown', function onWindowKeydown(e) {
    const { keyCode: key,
      ctrlKey,
      shiftKey } = e;

    // console.log(key, e.key, e.which);

    if (shiftKey && key === Key['9']) {
      store.dispatch(ACTION_ADD_PAREN, {
        operator: '(' });

    } else
    if (shiftKey && key === Key['0']) {
      store.dispatch(ACTION_ADD_PAREN, {
        operator: ')' });

    } else
    if (shiftKey && key === Key['8']) {
      store.dispatch(ACTION_UPDATE_OPERATOR, {
        operator: '*' });

    } else
    if (shiftKey && key === Key.Equals) {
      store.dispatch(ACTION_UPDATE_OPERATOR, {
        operator: '+' });

    } else
    if (key === Key.Dash) {
      store.dispatch(ACTION_UPDATE_OPERATOR, {
        operator: '-' });

    } else
    if (key >= 48 && key <= 57 || key >= 96 && key <= 105) {
      store.dispatch(ACTION_APPEND_OPERAND, {
        value: KeyTranslate[key] });

    } else
    if (key === Key.Decimal) {
      store.dispatch(ACTION_APPEND_OPERAND, {
        value: '.' });

    } else
    if ([Key.Multiply, Key.Add, Key.Subtract, Key.Divide].includes(key)) {
      store.dispatch(ACTION_UPDATE_OPERATOR, {
        operator: KeyTranslate[key] });

    } else
    if (key === Key.Backspace) {
      store.dispatch(ACTION_BACKSPACE);
      return e.preventDefault();
    } else
    if (key === Key.Delete) {
      store.dispatch(ACTION_CLEAR_ENTRY);
      return e.preventDefault();
    } else
    if (key === Key.Enter) {
      store.dispatch(ACTION_SHOW_TOTAL, {
        explicit: true });

      return e.preventDefault();
    } else
    if (key === Key.Escape) {
      store.dispatch(ACTION_CLEAR);
      return e.preventDefault();
    }
  });

  // Debug function for flags
  function getFlags(flags) {
    let arr = [];

    if (flags & MODE_SHOW_TOTAL) {
      arr.push('MODE_SHOW_TOTAL');
    }
    if (flags & MODE_INSERT_OPERAND) {
      arr.push('MODE_INSERT_OPERAND');
    }

    if (flags & MODE_APPEND_OPERAND) {
      arr.push('MODE_APPEND_OPERAND');
    }

    return arr.join('|');
  }
};


// TODO NEXT:
function getTotal(cb) {
  try {
    const total = MathParser.eval(this.expressions.join(''));
    return cb(null, total);
  } catch (err) {
    cb(err);
    console.log(err);
  }
}

function isNumberPart(str) {
  return /^[0-9.]/.test(str);
}

setTimeout(main, 100);


// Have to mock commonjs because this was developed in node

const { MathParser, isOperator, operators } = function (module) {
  var exports = module.exports;

  'use strict';

  const Token = exports.Token = {
    NumericLiteral: 'NumericLiteral',
    Punctuator: 'Punctuator' };


  /**
   * Regex for numeric decimal literal constructed from ECMAScript spec
   */

  const RE_NUMERIC_LITERAL = exports.RE_NUMERIC_LITERAL =
  /^(?:(?:0x[0-9a-fA-F]+|0X[0-9a-fA-F]+)|(?:0[oO][0-7]+)|(?:0[bB][01]+)|(?:(?:0|[1-9](?:[0-9]+)?)\.(?:[0-9]+)?|\.[0-9]+|(?:0|[1-9](?:[0-9]+)?))(?:[eE](?:[-+][0-9]+))?)/;

  const operators =
  exports.operators = ['/', '*', '**', '-', '+', 'yroot', '%'];

  const punctuation =
  exports.punctuation = ['(', ')', ...operators];

  // All the operators, sorted by longest string length
  const RE_PUNCTUATION = exports.RE_PUNCTUATION =
  new RegExp(
  '^(?:' +
  punctuation.slice(0).
  sort((a, b) => b.length - a.length).
  map(str => escapeRegExp(str)).
  join('|') +

  ')');


  const isOperator =
  exports.isOperator = str => operators.includes(str);

  /**
   * Courtesy of
   * http://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
   */

  function escapeRegExp(str) {
    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
  }

  function isWhitespace(str) {
    return /^\s$/.test(str);
  }

  /**
   * A Lexer
   * @param {String} data
   * @param {Object} options
   */

  const Lexer = exports.Lexer = class Lexer {

    constructor(data, options) {
      let source = data;

      if (source.charAt(0) === '') {
        source = source.slice(1);
      }

      source = source.replace(/\r\n|[\n\r]/g, '\n');

      this.source = source;
      this.input = source;
      this.position = 0;
      this.stash = [];
      this.column = 0;
      this.line = 1;
    }

    static all(data, options) {
      const lexer = new Lexer(data, options);
      const tokens = [];
      let token;

      while (token = lexer.nextToken()) {if (window.CP.shouldStopExecution(1)) break;
        tokens.push(token);
      }window.CP.exitedLoop(1);

      return tokens;
    }

    lex() {
      const token =
      null ||
      this.getPunctuationToken() ||
      this.getNumericToken();

      if (token == null) {
        this.error(`Unexpected token at (${this.position})`);
        // this.error(`Unexpected token (${this.line}:${this.column})`);
      }

      return token;
    }

    forward(index) {
      this.position += index;
      this.input = this.input.substring(index, this.source.length);
    }

    getPunctuationToken() {
      const position = this.position;
      const match = this.input.match(RE_PUNCTUATION);

      if (match) {
        this.forward(match[0].length);

        return {
          type: Token.Punctuator,
          value: match[0],
          start: position,
          end: this.position };

      }

      return null;
    }

    getNumericToken() {
      const position = this.position;
      const match = this.input.match(RE_NUMERIC_LITERAL);

      if (match) {
        this.forward(match[0].length);

        return {
          type: Token.NumericLiteral,
          raw: match[0],
          value: Number(match[0]),
          start: position,
          end: this.position };

      }

      return null;
    }

    hasEnded() {
      return this.input.length === 0;
    }

    skipWhitespace() {
      let position = this.position;
      let times = 0;
      let char;

      while (position < this.source.length) {if (window.CP.shouldStopExecution(2)) break;
        char = this.input[times];

        if (isWhitespace(char)) {
          position++;
          times++;

          if (char === '\n') {
            this.line++;
            this.column = 0;
          }
        } else {
          break;
        }
      }window.CP.exitedLoop(2);

      this.position = position;
      this.input = this.input.substring(times, this.source.length);
    }

    /**
     * Returns the next token without consuming the token or null if no
     * tokens can be found.
     *
     * @return {Object|null}
     */

    peek() {
      return this.lookahead(1);
    }

    /**
     * Returns the token at `index` or `null` if there are no more tokens.
     *
     * @param  {Number} index - The number of tokens to look ahead
     * @return {Object|null}
     */

    lookahead(index) {
      const { stash } = this;
      let times = index - stash.length;
      let token;

      if (index < 0) {
        this.error('Lookahead index can not be less than 0');
      }

      if (stash[index - 1] !== undefined) {
        return stash[index - 1];
      }

      while (times-- > 0) {if (window.CP.shouldStopExecution(3)) break;
        this.skipWhitespace();

        if (this.hasEnded()) {
          break;
        }

        token = this.lex();

        if (token) {
          stash.push(token);
        }
      }window.CP.exitedLoop(3);

      return stash[index - 1] || null;
    }

    nextToken() {
      if (this.stash.length) {
        return this.stash.shift();
      } else if (this.hasEnded()) {
        return null;
      }

      this.skipWhitespace();

      if (this.hasEnded()) {
        return null;
      }

      return this.lex();
    }

    error(message) {
      const err = new Error(message);
      throw err;
    }};



  const Parser = exports.Parser = class Parser {

    constructor(data, options) {
      this.lexer = new Lexer(data, options);
    }

    peek() {
      return this.lexer.peek();
    }

    next() {
      return this.lexer.nextToken();
    }

    error(message) {
      const err = new Error(message);
      throw err;
    }

    parsePrimary() {
      let token = this.peek();
      let expression;

      if (token == null) {
        this.error('Unexpected end of input');
      }

      if (token.value === '(') {
        token = this.next();
        expression = this.parseExpression();
        token = this.next();

        if (token == null) {
          this.error(`Unexpected end of input`);
        } else if (token.value !== ')') {
          this.error(`Unexpected token ${token.value}`);
        }

        return expression;
      } else if (token.type === Token.NumericLiteral) {
        token = this.next();
        return new Literal(token.raw, token.value);
      }

      this.error(`Unexpected token "${token.value}"`);
    }

    parseUnary() {
      let token = this.peek();

      if (token && (token.value === '-' || token.value === '+')) {
        token = this.next();

        return new UnaryExpression(token.value, this.parseUnary());
      }

      return this.parsePrimary();
    }

    // I'm not sure what these pow and nth square root operators are classified as
    parsePowAndSquare() {
      let expression = this.parseUnary();
      let token = this.peek();

      if (token == null) {
        return expression;
      }

      while (token && (token.value === '**' || token.value == 'yroot')) {if (window.CP.shouldStopExecution(4)) break;
        token = this.next();

        const operator = token.value;
        const left = expression;
        const right = this.parseUnary();

        expression = new BinaryExpression(operator, left, right);

        token = this.peek();
      }window.CP.exitedLoop(4);

      return expression;
    }

    parseMultiplicative() {
      let expression = this.parsePowAndSquare();
      let token = this.peek();

      if (token == null) {
        return expression;
      }

      while (token && (token.value === '*' || token.value == '/' || token.value === '%')) {if (window.CP.shouldStopExecution(5)) break;
        token = this.next();

        const operator = token.value;
        const left = expression;
        const right = this.parsePowAndSquare();

        expression = new BinaryExpression(operator, left, right);
        token = this.peek();
      }window.CP.exitedLoop(5);

      return expression;
    }

    parseAdditive() {
      let expression = this.parseMultiplicative();
      let token = this.peek();

      while (token && (token.value === '+' || token.value === '-')) {if (window.CP.shouldStopExecution(6)) break;
        token = this.next();

        const operator = token.value;
        const left = expression;
        const right = this.parseMultiplicative();

        expression = new BinaryExpression(operator, left, right, token.start, token.end);
        token = this.peek();
      }window.CP.exitedLoop(6);

      return expression;
    }

    parseExpression() {
      return this.parseAdditive();
    }

    parse() {
      return this.parseExpression();
    }};

  class UnaryExpression {

    constructor(operator, expression) {
      this.type = 'UnaryExpression';
      this.operator = operator;
      this.expression = expression;
    }}



  class BinaryExpression {

    constructor(op, left, right, start, end) {
      this.type = 'BinaryExpression';
      this.operator = op;
      this.left = left;
      this.right = right;
      this.start = start;
      this.end = end;
    }}



  class Literal {

    constructor(raw, value) {
      this.type = 'Literal';
      this.raw = raw;
      this.value = value;
    }}



  const operations = {
    '+': (a, b) => a + b,
    '-': (a, b) => a - b,
    '*': (a, b) => a * b,
    '/': (a, b) => a / b,
    '%': (a, b) => a % b,
    '**': (a, b) => Math.pow(a, b),
    // NOTE: Apparently this is a naive implementation of nth root
    // http://stackoverflow.com/questions/7308627/javascript-calculate-the-nth-root-of-a-number
    'yroot': (a, b) => Math.pow(a, 1 / b) };


  /**
   * Evaluates the AST produced from the parser and returns its result
   * @return {Number}
   */

  const evaluateAST = exports.evaluateAST = node => {
    let a;

    switch (node.type) {
      case 'Expression':
        return evaluateAST(node.expression);
      case 'Literal':
        return parseFloat(node.value);
      case 'UnaryExpression':
        a = evaluateAST(node.expression);

        switch (node.operator) {
          case '+':
            return +a;
          case '-':
            return -a;
          default:
            throw new Error(`Parsing error: Unrecognized unary operator "${node.operator}"`);}

      case 'BinaryExpression':
        const { left, right, operator } = node;
        const operation = operations[operator];

        if (operation === undefined) {
          throw new Error('Unsupported operand');
        }

        return operation(evaluateAST(left), evaluateAST(right));
      default:
        throw new Error(`Parsing error: Unrecognized node type "${node.type}"`);}

  };

  /**
   * Evaluates the expression passed and returns its result.
   *
   * @param {String} expression - The expression to evaluate
   * @return {Number}
   */

  const MathParser = exports.MathParser = {

    eval(expression) {
      const ast = new Parser(expression).parse();

      return evaluateAST(ast);
    } };

  if (typeof window === 'object' && window) {
    window.MathParser = MathParser;

    window.e = function () {
      return MathParser.eval(...arguments);
    };

    window.parse = function () {
      return Parser.parse(...arguments);
    };

    window.lex = function () {
      return Lexer.all(...arguments);
    };
  }

  return module.exports;
}({ exports: {} });
    </script>
</body>
</html>
 

4. By Andrew Creech

Made by Andrew Creech. Very Basic Calculator. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
	background: url(http://www.inkspilldesign.com/demo/wood-tile-background.jpg);
	background-color: #424242;
	font-family: Tahoma;
}

.container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100vw;
}

#container {
	width: 200px;
	padding: 8px 8px 20px 8px;
	margin: 20px auto;
	background-color: #ABABAB;
	border-radius: 4px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #C1C1C1;
	border-left: 2px solid #C1C1C1;
	box-shadow: -3px 3px 7px rgba(0, 0, 0, .6), inset -100px 0px 100px rgba(255, 255, 255, .5);
}

#display {
	display: block;
	margin: 15px auto;
	height: 42px;
	width: 174px;
	padding: 0 10px;
	border-radius: 4px;
	border-top: 2px solid #C1C1C1;
	border-right: 2px solid #C1C1C1;
	border-bottom: 2px solid #FFF;
	border-left: 2px solid #FFF;
	background-color: #FFF;
	box-shadow: inset 0px 0px 10px #030303, inset 0px -20px 1px rgba(150, 150, 150, .2);
	font-size: 28px;
	color: #666;
	text-align: right;
	font-weight: 400;
}

.button {
	display: inline-block;
	margin: 2px;
	width: 42px;
	height: 42px;
	font-size: 16px;
	font-weight: bold;
	border-radius: 4px;
}

.mathButtons {
	margin: 2px 2px 6px 2px;
	color: #FFF;
	text-shadow: -1px -1px 0px #44006F;
	background-color: #434343;
	border-top: 2px solid #C1C1C1;
	border-right: 2px solid #C1C1C1;
	border-bottom: 2px solid #181818;
	border-left: 2px solid #181818;
	box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #2E2E2E;
}

.digits {
	color: #181818;
	text-shadow: 1px 1px 0px #FFF;
	background-color: #EBEBEB;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #C1C1C1;
	border-left: 2px solid #C1C1C1;
	border-radius: 4px;
	box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #DCDCDC;
}

.digits:hover,
.mathButtons:hover,
#clearButton:hover {
	background-color: #FFBA75;
	box-shadow: 0px 0px 2px #FFBA75, inset 0px -20px 1px #FF8000;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #AE5700;
	border-left: 2px solid #AE5700;
}

#clearButton {
	color: #FFF;
	text-shadow: -1px -1px 0px #44006F;
	background-color: #D20000;
	border-top: 2px solid #FF8484;
	border-right: 2px solid #FF8484;
	border-bottom: 2px solid #800000;
	border-left: 2px solid #800000;
	box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #B00000;
}
</style>
</head>
<body>
  <div class="container">
	<fieldset id="container">
		<form name="calculator">

			<input id="display" type="text" name="display" readonly>

			<input class="button digits" type="button" value="7" onclick="calculator.display.value += '7'">
			<input class="button digits" type="button" value="8" onclick="calculator.display.value += '8'">
			<input class="button digits" type="button" value="9" onclick="calculator.display.value += '9'">
			<input class="button mathButtons" type="button" value="+" onclick="calculator.display.value += ' + '">
			<br>
			<input class="button digits" type="button" value="4" onclick="calculator.display.value += '4'">
			<input class="button digits" type="button" value="5" onclick="calculator.display.value += '5'">
			<input class="button digits" type="button" value="6" onclick="calculator.display.value += '6'">
			<input class="button mathButtons" type="button" value="-" onclick="calculator.display.value += ' - '">
			<br>
			<input class="button digits" type="button" value="1" onclick="calculator.display.value += '1'">
			<input class="button digits" type="button" value="2" onclick="calculator.display.value += '2'">
			<input class="button digits" type="button" value="3" onclick="calculator.display.value += '3'">
			<input class="button mathButtons" type="button" value="x" onclick="calculator.display.value += ' * '">
			<br>
			<input id="clearButton" class="button" type="button" value="C" onclick="calculator.display.value = ''">
			<input class="button digits" type="button" value="0" onclick="calculator.display.value += '0'">
			<input class="button mathButtons" type="button" value="=" onclick="calculator.display.value = eval(calculator.display.value)">
			<input class="button mathButtons" type="button" value="/" onclick="calculator.display.value += ' / '">
		</form>
	</fieldset>
</div>
</body>
</html>

5. By Jake Albaugh

Made by Jake Albaugh. JavaScript calculator with History. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  background: #f0f0f0;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#container {
  width: 620px;
  margin: 0 auto;
  font-family: 'Helvetica Neue LT Pro', 'Helvetica', sans-serif;
}

a {
  text-decoration: none;
  color: black;
}

#the-calculator {
  font-size: 1.2em;
  display: block;
  /*width: 400px;*/
  width: 49%;
  float: left;
  margin: 0;
  padding: 20px;
  border: 2px solid rgba(0,0,0,0.125);
  background: #00544b;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #003b34), color-stop(1, #00544b));
  background: -ms-linear-gradient(bottom, #003b34, #00544b);
  background: -moz-linear-gradient(center bottom, #003b34 0%, #00544b 100%);
  background: -o-linear-gradient(#00544b, #003b34);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00544b', endColorstr='#003b34', GradientType=0);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#the-calculator button,
#the-calculator input,
#the-calculator #total {
  font-size: 1em;
  display: inline-block;
  position: relative;
  padding: 12px;
  font-family: 'Helvetica Neue LT Pro', 'Helvetica', sans-serif;

}
#the-calculator button .exponent,
#the-calculator input .exponent,
#the-calculator #total .exponent {
  font-size: 0.6em;
  position: absolute;
}
#the-calculator button .denominator,
#the-calculator input .denominator,
#the-calculator #total .denominator {
  position: relative;
}
#the-calculator button .denominator .denom-top,
#the-calculator input .denominator .denom-top,
#the-calculator #total .denominator .denom-top {
  font-size: 0.75em;
  position: absolute;
  left: -8px;
}
#the-calculator button .denominator .denom-slash,
#the-calculator input .denominator .denom-slash,
#the-calculator #total .denominator .denom-slash {
  padding: 0px 2px;
}
#the-calculator button .denominator .denom-btm,
#the-calculator input .denominator .denom-btm,
#the-calculator #total .denominator .denom-btm {
  font-size: 0.75em;
  position: absolute;
  bottom: 0px;
}
#the-calculator #the-display {
  width: 100%;
}
#the-calculator #the-display #total {
  width: 98%;
  margin: 0 auto 8px;
  display: block;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  font-size: 1.2em;
  color: #2f2f2f;
  text-shadow: 1px 1px 0px #fff;
  background: #fff;
  text-align: right;
}
#the-calculator #the-buttons {
  width: 100%;
}
#the-calculator #the-buttons #extra-buttons {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #00544b;
}
#the-calculator #the-buttons .button-row {
  width: 100%;
  zoom: 1;
}
#the-calculator #the-buttons .button-row:before,
#the-calculator #the-buttons .button-row:after {
  content: "";
  display: table;
}
#the-calculator #the-buttons .button-row:after {
  clear: both;
}
#the-calculator #the-buttons .button-row:before,
#the-calculator #the-buttons .button-row:after {
  content: "";
  display: table;
}
#the-calculator #the-buttons .button-row:after {
  clear: both;
}
#the-calculator #the-buttons .button-row button {
  width: 22.7%;
  margin: 1.25%;
  float: left;
  border: none;
  background: #006e62;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #00544b), color-stop(1, #006e62));
  background: -ms-linear-gradient(bottom, #00544b, #006e62);
  background: -moz-linear-gradient(center bottom, #00544b 0%, #006e62 100%);
  background: -o-linear-gradient(#006e62, #00544b);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006e62', endColorstr='#00544b', GradientType=0);
  border-style: solid;
  border-color: #333;
  border-width: 0px 1px 1px 0px;
  color: #f0f0f0;
  cursor: pointer;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#the-calculator #the-buttons .button-row button:last-child {
  margin-right: 0;
  float: right;
}
#the-calculator #the-buttons .button-row button:hover,
#the-calculator #the-buttons .button-row button.hovering {
  border-width: 1px 0px 0px 1px;
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  -webkit-opacity: 0.7;
  opacity: 0.7;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  filter: alpha(opacity=70);
}
#the-calculator #the-buttons #calc_zero {
  width: 48%;
}
#the-calculator #the-buttons #calc_clear {
  background: #103f3a;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0d332f), color-stop(1, #103f3a));
  background: -ms-linear-gradient(bottom, #0d332f, #103f3a);
  background: -moz-linear-gradient(center bottom, #0d332f 0%, #103f3a 100%);
  background: -o-linear-gradient(#103f3a, #0d332f);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#103f3a', endColorstr='#0d332f', GradientType=0);
}
#the-calculator #the-buttons #calc_back {
  background: #103f3a;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0d332f), color-stop(1, #103f3a));
  background: -ms-linear-gradient(bottom, #0d332f, #103f3a);
  background: -moz-linear-gradient(center bottom, #0d332f 0%, #103f3a 100%);
  background: -o-linear-gradient(#103f3a, #0d332f);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#103f3a', endColorstr='#0d332f', GradientType=0);
}
#the-calculator #the-buttons #calc_eval {
  background: #dfdfdf;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #cdcdcd), color-stop(1, #dfdfdf));
  background: -ms-linear-gradient(bottom, #cdcdcd, #dfdfdf);
  background: -moz-linear-gradient(center bottom, #cdcdcd 0%, #dfdfdf 100%);
  background: -o-linear-gradient(#dfdfdf, #cdcdcd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#cdcdcd', GradientType=0);
  color: #00544b;
  text-shadow: 1px 1px 0px #fff;
}
#the-results {
  width: 49%;
  float: right;
  /*min-width: 400px;*/
  margin: 0;
  /*padding: 20px;*/
  border: 2px solid rgba(0,0,0,0.125);
  background: #00544b;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #003b34), color-stop(1, #00544b));
  background: -ms-linear-gradient(bottom, #003b34, #00544b);
  background: -moz-linear-gradient(center bottom, #003b34 0%, #00544b 100%);
  background: -o-linear-gradient(#00544b, #003b34);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00544b', endColorstr='#003b34', GradientType=0);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
#the-results #result_clear {
  position: absolute;
  right: 0;
  top: 105%;
}
#the-results ul {
  height: 440px;
  overflow-y: scroll;
  list-style: none;
  padding: 0;
  margin: 0 ;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0px 0px 64px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 0px 64px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 0px 64px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.2);
}
#the-results ul li {
  font-size: 0.8em;
  width: 100%;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
}
#the-results ul li#result_default {
  /*padding-left: 24px;*/
  text-align: center;
  color: #a9a9a9;
  font-style: italic;
  font-weight: 200;
}
#the-results ul li.result {
  display: none;
  font-size: 0.8em;
  color: #f9f9f9;
  background: rgba(255, 255, 255, 0.05);
  zoom: 1;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
#the-results ul li.result:before,
#the-results ul li.result:after {
  content: "";
  display: table;
}
#the-results ul li.result:after {
  clear: both;
}
#the-results ul li.result:before,
#the-results ul li.result:after {
  content: "";
  display: table;
}
#the-results ul li.result:after {
  clear: both;
}
#the-results ul li.result:nth-child(even) {
  background: rgba(255, 255, 255, 0.15);
}
#the-results ul li.result:nth-child(even) .answer {
  background: #103f3a;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0d332f), color-stop(1, #103f3a));
  background: -ms-linear-gradient(bottom, #0d332f, #103f3a);
  background: -moz-linear-gradient(center bottom, #0d332f 0%, #103f3a 100%);
  background: -o-linear-gradient(#103f3a, #0d332f);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#103f3a', endColorstr='#0d332f', GradientType=0);
}
#the-results ul li.result .equation,
#the-results ul li.result .answer {
  display: inline-block;
  padding: 0px 12px;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 60px;
  line-height: 40px;
}
#the-results ul li.result .equation {
  float: left;
  height: 100%;
  font-style: italic;
}
#the-results ul li.result .answer {
  position: absolute;
  right: 52px;
  top: 0;
  height: 100%;
  background: #0e3733;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0b2b27), color-stop(1, #0e3733));
  background: -ms-linear-gradient(bottom, #0b2b27, #0e3733);
  background: -moz-linear-gradient(center bottom, #0b2b27 0%, #0e3733 100%);
  background: -o-linear-gradient(#0e3733, #0b2b27);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0e3733', endColorstr='#0b2b27', GradientType=0);
}
#the-results ul li.result .use {
  height: 100%;
}
#the-results ul li.result .use a {
  background: #008779;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #006359), color-stop(1, #008779));
  background: -ms-linear-gradient(bottom, #006359, #008779);
  background: -moz-linear-gradient(center bottom, #006359 0%, #008779 100%);
  background: -o-linear-gradient(#008779, #006359);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#008779', endColorstr='#006359', GradientType=0);
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: block;
  padding: 0px 8px;
  width: 52px;
  text-align: center;
  text-decoration: none;
  margin: 0;
  font-size: 0.9em;
  cursor: pointer;
  border: none;
  color: #f9f9f9;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
}
#the-results ul li.result .use a:hover,
#the-results ul li.result .use aactive {
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  -webkit-opacity: 0.7;
  opacity: 0.7;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  filter: alpha(opacity=70);
}
</style>
</head>
<body>
  <div id="container">
  <div id="the-calculator">
    <div id="the-display">
      <form name="calculator">
        <span id="total">0</span>
      </form>
    </div>
    <div id="the-buttons">
      <div class="button-row clearfix">
        <button id="calc_clear" value="C/E" >C/E</button>
        <button id="calc_back" value="&larr;" >&larr;</button>
        <button id="calc_neg" value="-/+" >-/+</button>
        <button class="calc_op" value="/" >&divide;</button>
      </div>
      <div class="button-row clearfix">
        <button class="calc_int" value="7" >7</button>
        <button class="calc_int" value="8" >8</button>
        <button class="calc_int" value="9" >9</button>
        <button class="calc_op" value="*" >&times;</button>
      </div>
      <div class="button-row clearfix">
        <button class="calc_int" value="4" >4</button>
        <button class="calc_int" value="5" >5</button>
        <button class="calc_int" value="6" >6</button>
        <button class="calc_op" value="-" >-</button>
      </div>
      <div class="button-row clearfix">
        <button class="calc_int" value="1" >1</button>
        <button class="calc_int" value="2" >2</button>
        <button class="calc_int" value="3" >3</button>
        <button class="calc_op" value="+" >+</button>
      </div>
      <div class="button-row clearfix">
        <button id="calc_zero" class="calc_int" value="0" >0</button>
        <button id="calc_decimal" value="." >.</button>
        <button id="calc_eval" value="=" >=</button>
      </div>
      <div id="extra-buttons" class="button-row">
        <button id="calc_denom" value="1/x" ><span class="denominator"><span class="denom-top">1</span><span class="denom-slash">/</span><span class="denom-btm">x</span></span></button>
        <button id="calc_sqrt" value="&radic;" >&radic;</button>
        <button id="calc_square" value="x2" >x<span class="exponent">2</span></button>
        <button id="calc_powerof" class="calc_op" value="^" >y<span class="exponent">x</span></button>
      </div>
    </div>
  </div>
  <div id="the-results">
    <ul id="results_list"><li id="result_default">Memory is Empty</li></ul>
    <a id="result_clear" href="#">Wipe</a>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
/*
** global vars
*/

var a = 0,
b = 0,
is_a = true,
is_b = false,
o = 'nil',
answer = 0,
first_a = true,
first_b = true,
is_submission = false,
soft_sub = false,
display = jQuery('#total');



/*
** tool functions
*/

// console.log
function write(x) {
  console.log(x);
}
// add int to current display value
function changeDisplayVal(i) {
  display.text(display.text() + i);
}
// make * into ×
function visOps(x) {
  if (x === '*') {
    // return 'u00D7';
    return '×';
  } else if (x === '/') {
    // return 'u00F7';
    return '÷';
  } else {
    return x;
  }
}
// set display value
function setDisplayVal(x) {
  display.text(visOps(x));
}
// make touch animation
function animateButton(obj) {
  var button = obj.addClass('hovering');
  setTimeout(function () {
    button.removeClass('hovering');
  }, 100);
}



/*
** operation functions
*/

// setting a
function set_a(i) {
  if (is_a) {
    // nothing if a duplicate decimal
    if (i === '.' && a.toString().indexOf('.') !== -1) {
      write('Duplicate Decimal');
      i = '';
    } else if (i === '.' && first_a) {
      i = '0.';
    }
    // first_a time, we need to clear the display
    if (first_a === true) {
      if (i === '0') {
        i = '';
      } else {
        // set display value
        setDisplayVal(i);
        // no longer first_a
        first_a = false;
      }
    } else {
      // add int to current display value
      changeDisplayVal(i);
    }

    a = display.text();

    write('Set "a" to ' + a);
  }
}

// setting b
function set_b(i) {
  if (!is_a) {
    // nothing if a duplicate decimal
    if (i === '.' && b.toString().indexOf('.') !== -1) {
      write('Duplicate Decimal!');
      i = '';
    } else if (i === '.' && first_b) {
      i = '0.';
    }
    // first_b time, we need to clear the display
    if (first_b === true) {
      if (i === '0') {
        i = '';
      } else {
        // set display value
        setDisplayVal(i);
        // no longer first_b
        first_b = false;
      }
    } else {
      // add int to current display value
      changeDisplayVal(i);
    }
    // set b to current display Value
    b = display.text();

    write('Set "b" to ' + b);
  }
}

// looping calculator
function loop_calc(answer) {
  write('Loop Calculator');

  a = answer;
  b = 0;
  answer = 0;
  // set display value
  setDisplayVal(a);
}

// setting operator
function set_o(op) {
  // if answer, loop the calculator to prepare for b
  if (is_submission) {
    loop_calc(display.text());
    is_submission = false;
  }
  // if new op is submitting calc
  if (!first_b) {
    softsubmit_calc();
  }

  // replace or set operator in display
  setDisplayVal(op);
  // replace or set global operator
  o = op;

  if (is_a) {is_a = false;}
  if (!is_b) {is_b = true;}

  write('Set "o" to ' + o);
}

// soft submit calc
function softsubmit_calc() {
  // evaluate equation
  var preCalc = eval(a + '' + o + '' + b);
  // parse float to 12
  answer = parseFloat(preCalc.toPrecision(12));

  // submit answer to display
  display.text(answer);

  // reset first_b to true
  first_b = true;

  // post result
  newResult(a, o, b, answer);

  write(a + ' ' + o + ' ' + b + ' = ' + answer);

  a = answer;
  b = 0;
  o = o;
  // set display value
  setDisplayVal(o);
  is_a = false;
  is_b = true;

  first_b = true;

  soft_sub = true;

  write('Soft Submission');
}

// submit calculator
function submit_calc() {
  write('Submission');
  if (first_b === false) {
    var preCalc = 0;
    if (o === "^") {
      // evaluate equation
      preCalc = Math.pow(a, b);
    } else {
      // evaluate equation
      preCalc = eval(a + '' + o + '' + b);
    }
    // parse float to 12
    answer = parseFloat(preCalc.toPrecision(12));

    // submit answer to display
    display.text(answer);
    // display is now the answer
    is_submission = true;
    // reset first_b to true
    first_b = true;

    // post result
    newResult(a, o, b, answer);

    write(a + ' ' + o + ' ' + b + ' = ' + answer);
  } else {
    write("You can't do that yet");
  }
}

// negging value
function neg() {
  display.text(display.text() * -1);
  if (is_submission) {
    a = a * -1;
  } else {
    if (is_a) {
      a = a * -1;
      setDisplayVal(a);
    } else {
      b = b * -1;
      setDisplayVal(b);
    }
  }
}

// resetting calculator
function reset_calc() {
  a = 0;
  b = 0;
  o = 'nil';
  answer = 0;
  is_a = true;
  is_b = false;
  first_a = true;
  first_b = true;
  is_submission = false;
  soft_sub = false;
  display.text(0);

  // reset display value
  setDisplayVal(0);

  write('Calculator Reset');
}

// backspacing value
function backspace() {
  if (display.text() !== '' && display.text() !== '0') {
    display.text(display.text().substring(0, display.text().length - 1));
    if (is_a === true) {
      a = parseFloat(a.toString().substring(0, a.toString().length - 1));
    } else {
      b = parseFloat(b.toString().substring(0, b.toString().length - 1));
    }
  } else {
    write('Nothing Left to Backspace');
  }
}

// set value to memory value
function memory(i) {
  if (is_submission) {
    loop_calc(i);
  } else if (is_a) {
    loop_calc(i);
  } else {
    set_b(i);
  }
  answer = a;
}



/*
** logging to memory console
*/

function newResult(a, o, b, answer) {
  var results = jQuery('#results_list');
  var result = '' +
  '<li class="result"><span class="equation">' + a + ' ' + visOps(o) + ' ' + b + ' </span>' +
  '<span class="answer">' + answer + '</span> <span class="use"><a class="calc_use" href="#">Use</a></span></li>';
  results.prepend(result).children('li').fadeIn(200);
  if (jQuery('#result_default')) {
    jQuery('#result_default').remove();
  }
  // click use
  jQuery('.calc_use').off('click').on('click', function () {
    var i = jQuery(this).parent('.use').siblings('.answer').text();
    jQuery(this).parents('.result').animate({ 'opacity': '0.5' }, 200).animate({ 'opacity': '1' }, 200);
    jQuery('#total').animate({ 'opacity': '0.5' }, 200).animate({ 'opacity': '1' }, 200);
    memory(i);
    return false;
  });
}



/*
** complex functions
*/

function sqrt(i) {
  write('Square Root');
  var s = Math.sqrt(i);
  answer = s;
  write('u221A' + i + ' = ' + s);
  loop_calc(s);
  newResult('', '√', i, s);
  // submit answer to display
  display.text(answer);
  // display is now the answer
  is_submission = true;
  // reset first_b to true
  first_b = true;
}

function square(i) {
  write('Square');
  var s = i * i;
  answer = s;
  write(i + ' u005E 2 = ' + s);
  loop_calc(s);
  newResult(i, ' &#94; 2', '', s);
  // submit answer to display
  display.text(answer);
  // display is now the answer
  is_submission = true;
  // reset first_b to true
  first_b = true;
}

function denom(i) {
  write('Denominator');
  var s = 1 / i;
  answer = s;
  write('1 / ' + i + ' = ' + s);
  loop_calc(s);
  newResult(1, ' / ', i, s);
  // submit answer to display
  display.text(answer);
  // display is now the answer
  is_submission = true;
  // reset first_b to true
  first_b = true;
}
/*
** Usage - Click Events
*/

// click integers
jQuery('.calc_int, #calc_decimal').each(function () {
  jQuery(this).click(function () {
    var value = jQuery(this).val();
    if (is_submission === false) {
      if (is_a === true) {
        set_a(value);
      } else {
        set_b(value);
      }
    } else {
      reset_calc();
      set_a(value);
    }
  });
});

// click operators
jQuery('.calc_op').each(function () {
  jQuery(this).click(function () {
    var value = jQuery(this).val();
    set_o(value);
  });
});

// click equals
jQuery('#calc_eval').click(function () {
  submit_calc();
});

// click clear
jQuery('#calc_clear').click(function () {
  reset_calc();
});

// click neg
jQuery('#calc_neg').click(function () {
  neg();
});

// click backspace
jQuery('#calc_back').click(function () {
  backspace();
});

// click square root
jQuery('#calc_sqrt').click(function () {
  if (display.text() !== '0') {
    if (is_submission) {
      sqrt(answer);
    } else if (is_a) {
      sqrt(a);
    }
  }
  return false;
});

// click square
jQuery('#calc_square').click(function () {
  if (display.text() !== '0') {
    if (is_submission) {
      square(answer);
    } else if (is_a) {
      square(a);
    }
  }
  return false;
});

// click denominator
jQuery('#calc_denom').click(function () {
  if (display.text() !== '0') {
    if (is_submission) {
      denom(answer);
    } else if (is_a) {
      denom(a);
    }
  }
  return false;
});


// reset console
jQuery('#result_clear').click(function () {
  jQuery('#results_list').children('li').fadeOut(200, function () {
    jQuery(this).remove();
  });
  jQuery('#results_list').prepend('<li id="result_default">Memory is Empty</li>');
  return false;
});


/*
** Key Events
*/

// key press for integers and operators
jQuery(document).keypress(function (e) {
  // the character code
  var charCode = e.which;
  // the key
  var key = String.fromCharCode(charCode);

  // key integers & decimal
  if (charCode >= 46 && charCode <= 58 && charCode !== 47) {
    if (!is_submission) {
      if (is_a) {
        set_a(key);
      } else {
        set_b(key);
      }
    } else if (soft_sub) {
      set_b(key);
    } else {
      reset_calc();
      set_a(key);
    }
  }

  // key operators
  if (charCode >= 42 && charCode <= 45 && charCode !== 44 || charCode === 47) {
    set_o(key);
  }

  // key equals
  if (charCode === 61) {
    submit_calc();
  }

  // animate the corrosponding button
  jQuery('button').each(function () {
    var value = jQuery(this).val();
    if (value === key) {
      animateButton(jQuery(this));
    }
  });

});

// keydown for backspace and return
jQuery(document).keydown(function (e) {

  // the character code
  var charCode = e.which;

  // backspace
  if (charCode === 8) {
    backspace();
    animateButton(jQuery('#calc_back'));
    return false;
  }

  // clear
  if (charCode === 12) {
    reset_calc();
    animateButton(jQuery('#calc_clear'));
    return false;
  }

  // return
  if (charCode === 13) {
    submit_calc();
    animateButton(jQuery('#calc_eval'));
    return false;
  }

});

    </script>
</body>
</html>

6. By Aad Hoogenboom

Made by Aad Hoogenboom. Just a simple JavaScript calculator for basic calculations. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Calculation</title>
    </head>
    <body>
    <form name="Calc" action="">

<table summary="" border="1" bgcolor="black">
    <tr>
    <th>
        <input type="text"   name="Input" size="12" style="font-size:22px;background-color:lightgreen" />
    </th>
    </tr>
    <tr>
    <th>
        <table summary="">
            <tr>
            <th>
                <table summary="">
                    <tr>
                    <th bgcolor="black" align="center">
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:30px;height:30px" type="button" name="one"   value="1" onclick="Calc.Input.value += '1'" />
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:30px;height:30px" type="button" name="two"   value="2" onclick="Calc.Input.value += '2'" />
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:30px;height:30px" type="button" name="three" value="3" onclick="Calc.Input.value += '3'" />
                    </th>
                    </tr><tr>
                    <th>
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:30px;height:30px" type="button" name="four"  value="4" onclick="Calc.Input.value += '4'" />
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:30px;height:30px" type="button" name="five"  value="5" onclick="Calc.Input.value += '5'" />
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:30px;height:30px" type="button" name="six"   value="6" onclick="Calc.Input.value += '6'" />
                    </th>
                    </tr><tr>
                    <th>
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:30px;height:30px" type="button" name="seven" value="7" onclick="Calc.Input.value += '7'" />
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:30px;height:30px" type="button" name="eight" value="8" onclick="Calc.Input.value += '8'" />
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:30px;height:30px" type="button" name="nine"  value="9" onclick="Calc.Input.value += '9'" />
                    </th>
                    </tr><tr>
                    <th>
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:30px;height:30px" type="button" name="zero"  value="0" onclick="Calc.Input.value += '0'" />
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:30px;height:30px" type="button" name="punt"  value="." onclick="Calc.Input.value += '.'" />
                        <input style="background-color:orange;font-weight:normal;text-align:center;font-size:17px;width:30px;height:30px" type="button" name="clear" value="C" onclick="Calc.Input.value = ''" />
                    </th>
                    </tr>
                </table>
            </th>
            <th valign="top">
                <table summary="">
                    <tr>
                    <th bgcolor="black" valign="top" align="center">
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:40px;height:30px" type="button" name="plus"  value="+"  onclick="Calc.Input.value += '+'" />
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:40px;height:30px"  type="button" name="minus" value="&minus;" onclick="Calc.Input.value += '-'" />
                    </th>
                    </tr><tr>
                    <th>
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:40px;height:30px"  type="button" name="times" value="x" onclick="Calc.Input.value += '*'" />
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:40px;height:30px"  type="button" name="div"   value="&frasl;" onclick="Calc.Input.value += '/'" />
                    </th>
                    </tr><tr>
                    <th>
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:40px;height:30px"  type="button" name="pwr"  value="^"  onclick="Calc.Input.value += '^'" />
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:40px;height:30px"  type="button" name="sqrt"  value="&#8730;"   onclick="Calc.Input.value = 'sqrt('+Calc.Input.value+')'" />
                    </th>
                    </tr><tr>
                    <th>
                        <input style="font-weight:normal;text-align:center;font-size:17px;width:40px;height:30px" type="button" name="DoIt"  value="=" onclick="javascript:calculate();" />
                        <input style="background-color:orange;font-weight:normal;text-align:center;font-size:17px;width:40px;height:30px" type="button" name="clear"  value="C" onclick="Calc.Input.value = ''" />
                    </th>
                    </tr>
                </table>
            </th>
            </tr>
        </table>
    </th>
    </tr>
</table>
</form>    
</body>
</html>



------JS-------


function calculate(){
        var input=document.Calc.Input.value;
        var result;
        if(input.indexOf("^")!=-1 || input.indexOf("sqrt")!=-1 ){
            if( input.indexOf("+")>0 ||  input.indexOf("-")>0 ||  input.indexOf("*")>0  ||  input.indexOf("/")>0  ){
                ("");
                document.Calc.Input.value="" ;return;
            }
            if(input.indexOf("^")!=-1){
                input=input.split("^");
                if(input.length>2){("");document.Calc.Input.value="";return;}
                result=Math.pow(input[0],input[1]);
            }
            else
            {
                input=input.replace(/[a-z\(\)]/g,'');
                result=Math.sqrt(input);
            }
        }
        else
        {
            result=eval(input);
        }
        document.Calc.Input.value=result;
        }

7. By Henry Kamulanje

Made by Henry Kamulanje. Its a scientific calculator with multiple themes that you can change by clicking on the button at the bottom. ( Source )

<!--Save as calc.html-->
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=true" />
        <link rel="stylesheet" href="calc.css" type="text/css">
        <script type="text/javascript" src="calc.js"></script>
    </head>
    <body>
    <div class="container">
    <h2><u>Scientific Calculator</u></h2>
    <details>
         <summary>Click here for help</summary>
         <p><br>I deactived the brackets, --> "(" and ")", because I have not made them work with the scientific part of the calculator.<br></p>
    </details>
    <div class="div">
        <table><caption><pre>Calculator      by Henry Kamulanje</bsp></caption>
            <tr>
                <td colspan="5"><div id="display-container"><div id="display1"><small><small><span></span></small></small></div><div id="h1"><small><small><span></span></small></small></div></div></td>
            </tr>
            
            <tr>
                <td><button class="top" onclick='getElementById("h1").innerHTML = bsp()'>Del</button></td>   
                <td><button class="top" onclick='getElementById("h1").innerHTML = mp()'>M+</button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = mr()'>MR</button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = maths("rand")'><small>Rnd</small></button></td>
                <td rowspan="2"><button id="c" class="top" onclick='getElementById("h1").innerHTML = c("")'>C</button></td>
            </tr>
            
            <tr>
                <td><button class="top" onclick='getElementById("h1").innerHTML = maths("res")'><sup>1</sup>/<sub>10</sub></button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = maths("logTen")'><small>log10</small></sup></button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = maths("ln")'>ln</button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = PE("E")'>e</button></td>
             </tr>
             
             <tr>
                <td><button class="top" onclick='getElementById("h1").innerHTML = maths("sine")'>sin</button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = maths("cosine")'>cos</button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = maths("tangent")'>tan</sup></button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = PE("PI")'>π</button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = percent()'>%</button></td>
            </tr>
            
            <tr>
                <td><button class="top" onclick='getElementById("h1").innerHTML = maths("fact")'>n!</button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = digit("%")'>Mod</button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = power("^")'>x<sup>y</sup></button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = power("√")'><sup>y</sup>√x</button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = maths("cubert")'><sup>3</sup>√</button></td>
            </tr>
            
            <tr>
                <td><button class="top disabled" onclic='getElementById("h1").innerHTML = digit("(")'>(</button></td>
                <td><button class="top disabled" onclic='getElementById("h1").innerHTML = digit(")")'>)</button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = base("bin")'>bin</button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = base("oct")'>oct</button></td>
                <td><button class="top" onclick='getElementById("h1").innerHTML = base("hex")'>hex</button></td>
            </tr>
            
            <tr>
                <td><button onclick='getElementById("h1").innerHTML = digit("7")'> 7</button></td>
                <td><button onclick='getElementById("h1").innerHTML = digit("8")'>8</button></td>
                <td><button onclick='getElementById("h1").innerHTML = digit("9")'>9</button></td>
                <td><button onclick='getElementById("h1").innerHTML = operators("+")'>+</button></td>
                <td><button onclick='getElementById("h1").innerHTML = maths("negpos")'>-/+</button> </td>
            </tr>
            
            <tr>
                <td><button onclick='getElementById("h1").innerHTML = digit("4")'>4</button></td>
                <td><button onclick='getElementById("h1").innerHTML = digit("5")'>5</button></td>
                <td><button onclick='getElementById("h1").innerHTML = digit("6")'>6</button></td>
                <td><button onclick='getElementById("h1").innerHTML = operators("-")'>-</button></td>
                <td><button onclick='getElementById("h1").innerHTML = maths("Sqrt")'>√</button></td>
            </tr>
            
            <tr>
                <td><button onclick='getElementById("h1").innerHTML = digit("1")'>1</button></td>
                <td><button onclick='getElementById("h1").innerHTML = digit("2")'>2</button></td>
                <td><button onclick='getElementById("h1").innerHTML = digit("3")'>3</button></td>
                <td><button onclick='getElementById("h1").innerHTML = operators("/")'>/</button></td>
                <td><button onclick='getElementById("h1").innerHTML = maths("cube")'>x<sup>3</sup></button></td>
            </tr>
            
            <tr>
                <td><button onclick='getElementById("h1").innerHTML = dot(".")'>.</button></td>
                <td><button onclick='getElementById("h1").innerHTML = digit("0")'>0</button></td>
                <td><button onclick='getElementById("h1").innerHTML = equal()'>=</button></td>
                <td><button onclick='getElementById("h1").innerHTML = operators("*")'>X</button></td>
                <td><button onclick='getElementById("h1").innerHTML = maths("sqr")'>x<sup>2</sup></button></td>
            </tr>            
        </table>
    </div>
        <ul class="f">
            <li id="theme1" class="w" onclick='getElementsByClassName("x").innerHtml = themes(1)'>Theme 1</li>
            <li id="theme2" class="w" onclick='getElementsByClassName("y").innerHtml = themes(2)'>Theme 2</li>
            <li id="theme3" class="w" onclick='getElementsByClassName("z").innerHtml = themes(3)'>Theme 3</li>
            <li id="theme4" class="w" onclick='getElementsByClassName("o").innerHtml = themes(4)'>Theme 4</li>
        </ul>
        </div>
    </body>
</html>




--------CSS---------



/*Save as calc.css*/
.container {
    width: 300px;
    padding:0px 10px;
    margin: 0px auto;
}
pre{
    margin: 0px;
    font-size: 12px;
}
h2 {
    color: #89a;
    width: 300px;
    text-align: center;
}
.red {
    color: #678;
}
table {
    margin: 0px 5px 5px 5px;
}
caption{
    color: #abc;
    text-shadow: 2px 1px gray;
    font-weight: bold;
}
button {
    width: 50px; 
    height: 50px; 
    font-size: 22px;
    background-color: rgba(150, 100, 150, 0.5);
    color: #fee;
    border: 2px #b9b outset;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}
.top {
    height: 30px; 
    background-color: #989;
    box-shadow: inset 5px 5px 5px #a89, inset -5px -5px 5px #867;
    border-radius: 4px;
    border: 1px #cab outset;
    color: #bec;
    text-shadow: 2px 2px 20px eef;
    font-size: 20px;
}
#c {
    height: 64px;
    color: #7f7;
}
button:active{
    background-color: #dbc;
    box-shadow: none ;
    padding-top: 4px;
    outline: 1px solid #989;
    border: 3px #b9b inset;
}
.top:hover{
    background-color: #bab;
    box-shadow: inset 5px 5px 5px #cab, inset -5px -5px 5px #a98;
}
button:hover{
    background-color: #a9a;
}
.top:active{
    background-color: #dbc;
    box-shadow: none ;
    padding-top: 4px;
    outline: 1px solid #989;
    border: 3px #b9b inset;
}
#display-container {
    border: 3px inset;
    margin-bottom: 10px;
}
#h1, #display1 { 
    width: 260px; 
    height: 25px; 
    padding: 2px;
    padding-top: 4px; 
    background-color:powderblue; 
    font-size: 20px;
    font-family: serif;
    font-weight: bold;
    text-align: right;
    overflow: hidden;
    color: #245;
    text-shadow: 2px 2px 1px #8ac;
}
#display1 {
    font-size: 16px;
}
p {
    width: 270px;
    margin: 10px;
    margin-top: -10px;
    padding: 0px 5px;
    color: #88a;
}
p:active{
    color: white;
}
span {
    color: #678;
}
ul {
    background-color: powderblue;
    width: 260px;
}
li {
    display: inline;
    background-color: green;
    padding: 0px 0px;
    font-size: 20px;
}
.div {
    border: 5px #6bc ridge  ;
    border-radius: 10px;
    margin: 0px 5px 5px 5px;
    padding-top: 0px;
    width: 285px;
    box-shadow: -10px 10px 10px silver;
    background-color: #689;
    font-size: 11px;
    color: white;
}
.w {
    box-shadow: -10px 10px 10px silver;
    border: 5px #6bc groove;
    margin: 0px 5px 5px 5px;
    border-radius: 10px;
    padding-top: 0px;
    font-size: 11px;
    cursor: pointer;
    width: 285px;
    color: white;
}
#theme1{
    border: 5px #6bc ridge;
    background-color: #689;
}
#theme2{
    background-color: #ba8;
    border: 5px #dca outset;    
}
#theme3{
    background-color: #8a9;
    border: 5px #8a9 double;
}
#theme4{
    background-color: #aaa;
    border: 5px #ddd outset;        
}
.f {
    box-shadow: -10px 10px 10px silver;
    border: 10px #ddd inset;
    border-radius: 5px;
    margin: 20px 0px;
    padding: 10px;
    width: 270px;    
}
#theme1:hover,#theme2:hover,#theme3:hover,#theme4:hover{
    box-shadow: -10px 10px 20px gray;
}
#theme1:active,#theme2:active,#theme3:active,#theme4:active{
    font-size: 10px;
    margin-right: 9px;
}
.disabled, .disabled:active, .disabled:hover {
    padding-top: 0px;
    background-color: #999;
    box-shadow: 0px 0px 0px grey;
    border: none;
}
details {
    color: grey;
    margin: -15px 0px 10px 10px;
}
sup {
    font-size: .65em;
}


-------JS--------


//Save as calc.js
//Feel free to copy modify and do anything you want with this code.Thanks to John Wells and all who gave some helpful suggestions for the improvement of the calculator.

//     THE SCIENTIFIC CALCULATOR 2017

//Declaring variables
var decimalPoint = enter = entered = operatorSign = rootNpower_Sign = flo = math = M = firstI = first = second = secondI = answer = theanswer = result = peSign = "";
var opsCheck = dotCounter = 0;
var removeFirstZero = "";
//To prevent printing more than one dot
function dot(b) {
    if (decimalPoint == "") {
        enter = entered = b;
        first+= enter;
        entered+= enter;
        decimalPoint = ".";
        dotCounter = 0;
        return first;
        } else {
        return first;
    }
}
//To control what happen when Pi and Euler is clicked
function PE(b) {
    decimalPoint = ".";
    dotCounter = 15;
    var cons = b;
    if (peSign == "") {
        if (operatorSign != "" && first == "" + operatorSign) {
            first = (cons = "PI") ? Math.PI: Math.E;
        } else if (operatorSign != "" && first > 0 || first < 0) {
            first = (cons == "PI") ? first + "*" + Math.PI: first + "*" + Math.E;
        } else if (first != "" && operatorSign != "") {
            first += (cons = "PI") ? Math.PI: Math.E;
        } else if (operatorSign == "" && first != "") {
            first = (cons == "PI") ? first + "*" + Math.PI: first + "*" + Math.E;
        } else {
            first = (cons == "PI") ? Math.PI: Math.E;
        }
    } else if (first !== "") {
        first = (cons == "PI") ? first + "*" + Math.PI: first + "*" + Math.E;
    } else {
        first = (cons == "PI") ? Math.PI:  Math.E;
    }
    return first;
}
function mp() {
    M = first;
    first = M;
    return first ;
}
function mr() {
    first = M;
    return first ;
}
//Cancel making all variable empty. All variable = ""
function c(c) {
    document.getElementById("display1").innerHTML = decimalPoint = operatorSign = rootNpower_Sign = entered = math = first = firstI = second = secondI = answer = theanswer = flo = M = "";
    return "";
}
//To calculate squares, cubes, factorials e.t.c. For calculations which use only one value. Variable 'firstI' was isolated by maths() function to be solved here
function mathematics() {
    if (math == "sqr") {
        result = firstI * firstI;
    } else if (math == "cube") {
        result = firstI * firstI * firstI;
    } else if (math == "Sqrt") {
        result = Math.sqrt(firstI);
    } else if (math == "cubert") {
        result = Math.cbrt(firstI);
    } else if (math == "negpos") {
        result = firstI * -1;
    } else if (math == "sine") {
        result = Math.sin(firstI);
    } else if (math == "cosine") {
        result = Math.cos(firstI);
    } else if (math == "tangent") {
        result = Math.tan(firstI);
    } else if (math == "ln") {
        result = Math.log(firstI);
    } else if (math == "logTen") {
        result = Math.log10(firstI);
    } else if (math == "rand") {
        result = Math.round(firstI);
    }else if (math == "res") {
        result = 1 / firstI;
    } else if (math == "fact") {
        n = firstI;
        firstI = 1;
        while (n > 1){
            firstI *= n;
            n -= 1;
        }
        result = firstI;
    } decimalPoint = (Math.round(result) == result) ? "": ".";
}
//To make variable 'first' and 'second' keep result of its values. e.g if it was 3 + 2 it must now be 5. This is done to prepare them for use in maths() function
function prep() {
    second = eval(second);
    first = eval(first);
}
//When sqr, cube e.t.c are clicked, this function, math(), does the following: 1. It extract the last number you entered from variable 'first' and keeps it as variable 'firstI'. 2. It calls mathematics function to work on the on variable 'firstI'. The answer is kept in 'result' variable. 3.It displays the answer of other previous numbers entered and the 'result' from mathematics e.g. 5 + 4 which was 3 + 2 + 2^2. Here 3 + 2 has become 5 and because of prep() function. 
function maths(a) {
    math = a;
    try {
        if (operatorSign == "+") {
            prep();
            firstI = first - second;
            mathematics();
            first = second + "+" + result;
        } else if (operatorSign == "-") {
            prep();
            firstI = second - first;
            mathematics();
            first = second + "-" + "(" + result + ")";
        } else if (operatorSign == "*") {
            prep();
            firstI = first / second;
            mathematics();
            first = second + "*" + result;
        } else if (operatorSign == "/") {
            prep();
            firstI = second / first;
            mathematics();
            first = second + "/" + result;
        } else {
            firstI = first;
            mathematics();
            first = result;
        }
        return first;
    } catch (first ) {
        first = second + operatorSign;
        return first;
    }
}
//This is just my notes:--> To remove first zero in second number zero must have its own function so that every entry of zero is checked to make sure that no number greater than zero should start with a zero
function digit(b) {
    opsCheck = 0;
    dotCounter++;
    if (first == Infinity || first == NaN) {
        first = 0;
    }
    peSign = "pes";
    entered = b;
    if (rootNpower_Sign != "") {
        first = (first === "0" && entered !== ".") ? entered: first + entered;
        return secondI + firstI + rootNpower_Sign + first;
    } else {
        first = (first === "0" && entered !== ".") ? entered: first + entered;
        theanswer = eval(first) + "";
        if (theanswer.length > 14) {
            theanswer = Math.abs((theanswer*1).toPrecision(14));
        }
          document.getElementById("display1").innerHTML = first;
        return theanswer;
    }
}
var thebase = "";
function base(a) {
    thebase = a;
    first *= 1;
    if (thebase == "bin") {
        firstII = first.toString(2);
    } else if (thebase == "oct") {
        firstII = first.toString(8);
    } else if (thebase == "hex") {
        firstII = first.toString(16);
    }
    return firstII;
}
//Four functions below are for themes
function themes(thm) {
    theme = thm;
    el = document.getElementsByClassName("div");
    if (theme == 1) {
        el[0].id="theme1";
    } else if (theme == 2) {
        el[0].id="theme2";
    } else if (theme == 3) {
        el[0].id="theme3";
    } else {
        el[0].id="theme4";
    }
}
//back space
function bsp() {
    first += "";
    dotCounter--;
    decimalPoint = dotCounter >= 0 ? ".": "";
    first = first.substr(0, first.length - 1);
    document.getElementById("display1").innerHTML = first;
    try{
        eval(first);
        return first;
    } catch(first) {
        eval(first);
    return "";
    }
}
//Two functions below calculate power and root
function pow() {
     first *= 1;
     result = Math.pow(firstI, first);
}
function roots() {
     first *= 1;
     result = Math.pow(first, 1 / firstI).toPrecision(12);
     result = Math.abs(result);
}
//When operators ,+ - / * are clicked op() function does a number of things. It checks if power or root were clicked. If yes, it calculates the previous numbers and the add the new operator. If not it add the operator clicked
function operators(b) {
    peSign = "";
    if (opsCheck == 0) {
    opsCheck = 1;
    document.getElementById("display1").innerHTML = first;
    try {
        if (rootNpower_Sign == "^") {
            if (operatorSign == "+") {
                pow();
                answer = result + second;
            } else if (operatorSign == "-") {
                pow();
                answer = second - result;
            } else if (operatorSign == "*") {
                pow();
                answer = result * second;
            } else if (operatorSign == "/") {
                pow();
                answer = second / result;
            } else {
                pow();
                answer = result;
            }
        } else if (rootNpower_Sign == "√") {
            if (operatorSign == "+") {
                roots();
                answer = second + result;
            } else if (operatorSign == "-") {
                roots();
                answer = second - result;
            } else if (operatorSign == "*") {
                roots();
                answer = result * second;
            } else if (operatorSign == "/") {
                roots();
                answer = second / result;
            } else {
                roots();
                answer = result;
            }
        } else if (a == "%") {
            answer = second % first;
        } else {
            operatorSign = b;
            first += operatorSign;
            decimalPoint = "";
        }
        rootNpower_Sign = "";
        operatorSign = b;
        firstI = "";
        second = answer;
        first = answer + operatorSign;
        decimalPoint = "";
document.getElementById("display1").innerHTML = first;
    return eval(second);
    } catch(x) {
        if (first != "<span class='red'>Press ON to start</span>") {
            operatorSign = b;
            second = eval(first);
            first += operatorSign;
            decimalPoint = "";
        } else {
            first = "<span class='red'>Press ON to start</span>" ;
        }
        document.getElementById("display1").innerHTML = first;
        return (second == undefined ) ? 0 : eval(second);
        }
    } else {
        operatorSign = b;
        first += "";
        first = first.substr(0, first.length - 1);
        first = first + operatorSign;
        document.getElementById("display1").innerHTML = first;
        return (second == undefined ) ? 0 : eval(second);
    }
}
function percent() {
    first = eval(first) * 100;
    return first + "%";
}
//toggles the negative sign
function negpos() {
    first = (operatorSign == "") ? first *= -1: first;
    return first ;
}
function power(b) {
    rootNpower_Sign = b;
    if (operatorSign == "+" && second != "") {
        prep();
        firstI = first - second;
        first = "";
        secondI = second + "+";
        return second + "+" + firstI + rootNpower_Sign;
    } else if (operatorSign == "-" && second != "") {
        prep();
        firstI = second - first;
        first = "";
        secondI = second + "-";
        return second + "-" + firstI + rootNpower_Sign;
    } else if (operatorSign == "*" && second != "") {
        prep();
        firstI = first / second;
        first = "";
        secondI = second + "*";
        return second + "*" + firstI + rootNpower_Sign;
    } else if (operatorSign == "/" && second != "") {
        prep();
        firstI = second / first;
        first = "";
        secondI = second + "/";
    return second + "/" + firstI + rootNpower_Sign;
    } else {
        rootNpower_Sign = b;
        firstI = first;
        first = "";
        return firstI + rootNpower_Sign;
    }
}
function equal() {
document.getElementById("display1").innerHTML = first;
    try {
        if (rootNpower_Sign == "^") {
            if (operatorSign == "+") {
                pow();
                first = result + second;
            } else if (operatorSign == "-") {
                pow();
                first = second - result;
            } else if (operatorSign == "*") {
                pow();
                answer = result * second;
                first = answer;
            } else if (operatorSign == "/") {
                pow();
                first = second / result;
            } else {
                pow();
                first = result;
            }
        } else if (rootNpower_Sign == "√") {
            if (operatorSign == "+") {
                roots();
                first = result + second;
            } else if (operatorSign == "-") {
                roots();
                first = second - result;
            } else if (operatorSign == "*") {
                roots();
                first = result * second;
            } else if (operatorSign == "/") {
                roots();
                first = second / result;
            } else {
                roots();
                first = result;
            }
        } else if (operatorSign == "%") {
            answer = second % first;
        } else {
            if (first == "") {
                first = first ;
            } else {
                try{
                    first = eval(first) + "";
                    if (first.length > 14)  {
                        first = Math.abs((first*1).toPrecision(14));
                    }
                } catch (first) {
                    first = "<small><small>Enter number or delete operator<!--Incorrect input. Click C to clear--></small></small>";
                    return first;
                    first = "";
                }
            }
        }
        rootNpower_Sign = operatorSign = answer = firstI = second = "";
        flo = first;
        flo = Math.floor(flo);
        decimalPoint = (flo == first) ? "": ".";
        return first;
    } catch(operatorSign) {
        operatorSign = "";
        first = eval(first) + "";
        if (first.length > 14) {
            first = Math.abs((first*1).toPrecision(14));
        }
        flo = first;
        flo = Math.floor(flo);
        decimalPoint = (flo == first) ? "": ".";
        return first;
    }
}

8. By Don’t Know

Made by Don’t Know. A beautiful looking red and black calculator. ( Source )

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!--
		If you want to use Max/Min you should write like this 3.5.7
		this means which number is bigger/smaller 3,5 or 7.

		for example
		3.5.7 => *click max* => output 7
		3.5.7 => *click min* => output 3

		You can also write expression: 64*35.72*31,
		this means which expression is bigger/smaller 64*35 or 72*31
		as output you will get: expression(result);

		for example
		64*35.72*31 => *click max* => output 64*35(2240)
		64*35.72*31 => *click min* => output 72*31(2232)

		if two expressions are equal you will get =(result);

		for example
		25*4.10*10 => *click max* => output =(100)
		25*4.10*10 => *click min* => output =(100)

		If you want to use y√ you should write like this
		For example 625.4 => output 5
		625 - number
		4 - exponent
	-->

	<!--
		If something does not work please tell me
	-->

	<!--
		If you liked my calculator, give me an upvote please 😊
	-->

	<!--
		Author: ★ Don’t Know ★
	-->

	<title>Calculator</title>
  </head>
  <body>
	<div id="calculator">
	  <div id="container1">
		<input type="text" value="0" readonly />
		<span id="helper">Deg</span>
	  </div>
	  <div id="container2">
		<span id="leftBr" onclick='insert("(")'>(</span>
		<span id="rightBr" onclick='insert(")")'>)</span>
		<span id="factorial" onclick="factorial()">x!</span>
		<span id="fibonacci" onclick="fib(inp.value)">Fib</span>
		<span id="sin" onclick="showSinDeg()">sin</span>
		<span id="cos" onclick="showCosDeg()">cos</span>
		<span id="tan" onclick="showTanDeg()">tan</span>
		<span id="ctg" onclick="showCtgDeg()">ctg</span>
		<span id="PI" onclick="showMathPI()">&pi;</span>
		<span id="sinh" onclick="showSinh()">sinh</span>
		<span id="E" onclick="showMathE()">e</span>
		<span id="cosh" onclick="showCosh()">cosh</span>
		<span id="min" onclick="showMinInteger()">Min</span>
		<span id="tanh" onclick="showTanh()">tanh</span>
		<br />
		<span id="xPowY" onclick="xPowY()">x<sup>y</sup></span>
		<span id="arcsin" onclick="showArcsinDeg()">sin<sup>-1</sup></span>
		<span id="tenPowX" onclick="tenPowX()">10<sup>x</sup></span>
		<span id="arccos" onclick="showArccosDeg()">cos<sup>-1</sup></span>
		<span id="powE" onclick="powMathE()">e<sup>x</sup></span>
		<span id="arctan" onclick="showArctanDeg()">tan<sup>-1</sup></span>
		<span id="oneDiv" onclick="oneDivByX()">1 / x</span>
		<span id="arcctg" onclick="showArcctgDeg()">ctg<sup>-1</sup></span>
		<span id="xPow2" onclick="xPowTwo()">x<sup>2</sup></span>
		<span id="xPow3" onclick="xPowThree()">x<sup>3</sup></span>
		<span id="twoPowX" onclick="twoPowX()">2<sup>x</sup></span>
		<span id="threePowX" onclick="threePowX()">3<sup>x</sup></span>
		<span id="max" onclick="showMaxInteger()">Max</span>
		<span id="ctgh" onclick="showCtgh()">ctgh</span>
		<br />
		<span id="sqrt" onclick="showSQRT()">&#8730;</span>
		<span id="asinh" onclick="showAsinh()">sinh<sup>-1</sup></span>
		<span id="cbrt" onclick="showCBRT()">&#8731;</span>
		<span id="acosh" onclick="showAcosh()">cosh<sup>-1</sup></span>
		<span id="root" onclick="showRoot()">y<sub>&#8730;</sub></span>
		<span id="atanh" onclick="showAtanh()">tanh<sup>-1</sup></span>
		<span id="ln" onclick="showLn()">ln</span>
		<span id="actgh" onclick="showActgh()">ctgh<sup>-1</sup></span>
		<span id="log2" onclick="showLog2()">log<sub>2</sub></span>
		<span id="log10" onclick="showLog10()">log<sub>10</sub></span>
		<span id="toggle">2<sup id="sup">nd</sup></span>
		<span id="random" onclick="showMathRandom()">Rand</span>
		<span id="rad">Rad</span>
		<br />
	  </div>
	  <div id="container3">
		<p id="cleaner" onclick="clearValue()">C</p>
		<p id="delNum" onclick="deleteNumber()">&#8592;</p>
		<p id="percent" onclick="showPercent()">%</p>
		<p id="divide" onclick='insert("/")'>&divide;</p>
		<br />
		<p id="one" onclick="insert(7)">7</p>
		<p id="two" onclick="insert(8)">8</p>
		<p id="three" onclick="insert(9)">9</p>
		<p id="mult" onclick='insert("*")'>&times;</p>
		<br />
		<p id="four" onclick="insert(4)">4</p>
		<p id="five" onclick="insert(5)">5</p>
		<p id="six" onclick="insert(6)">6</p>
		<p id="minus" onclick='insert("-")'>-</p>
		<br />
		<p id="seven" onclick="insert(1)">1</p>
		<p id="eight" onclick="insert(2)">2</p>
		<p id="nine" onclick="insert(3)">3</p>
		<p id="plus" onclick='insert("+")'>+</p>
		<br />
		<p id="zero" onclick="insert(0)">0</p>
		<p id="point" onclick='insert(".")'>,</p>
		<p id="equal" onclick="equal()">=</p>
	  </div>
	</div>
  </body>
</html>



------CSS-------


@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:[email protected]&display=swap");

span,
p,
input {
  color: white;
  font-family: "Montserrat Alternates", sans-serif;
  user-select: none;
}

input:focus {
    outline: none;
    border: none;
}

#PI {
  font-weight: 100;
}

html {
  position: relative;
  margin: 0;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  background: linear-gradient(180deg, #222 0%, #111 45%, #000);
  overflow: auto;
  padding: 15px;
  min-width: 333px;
  min-height: 500px;
  user-select: none;
}

body {
  max-height: 500px;
  max-width: 350px;
  position: relative;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

#calculator {
  width: 333px;
  height: 500px;
  background: transparent;
  overflow: hidden;
}

#container1 {
  position: relative;
  top: 0;
  width: auto;
  height: 10%;
}

#container2 {
  position: absolute;
  white-space: nowrap;
  width: auto;
  left: 0;
  top: 13%;
  height: 24%;
  bottom: 0;
  padding-right: 0;
  padding-left: 0;
  padding-top: 0;
  overflow: hidden;
  text-align: center;
}

#container3 {
  position: absolute;
  white-space: nowrap;
  width: auto;
  left: 0;
  height: auto;
  background: transparent;
  overflow: hidden;
  text-align: center;
  top: 195px;
}

input {
  position: absolute;
  margin: 0;
  width: 94%;
  height: 50px;
  font-size: 24px;
  text-align: right;
  background: transparent;
  border: none;
  padding: 0;
  top: 0;
  left: 0;
}

#helper {
  position: absolute;
  color: white;
  background: transparent;
  cursor: auto;
  top: 45px;
  width: auto;
  height: auto;
  border-radius: 0;
  margin: 0;
  padding: 0;
  left: 5px;
  box-shadow: none;
  opacity: 0;
}

p {
  display: inline-block;
  position: relative;
  top: 0;
  left: 0;
  margin: 5px;
  width: 70px;
  height: 40px;
  border-radius: 10px;
  background: transparent;
  text-align: center;
  padding-top: 10px;
  cursor: pointer;
  font-size: 24px;
  vertical-align: middle;
}

#zero {
  width: 154px;
}

#zero,
#one,
#two,
#three,
#four,
#five,
#six,
#seven,
#eight,
#nine,
#point {
  background: #171818;
  transition-property: background-color;
  transition-duration: 750ms;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

#zero:hover,
#one:hover,
#two:hover,
#three:hover,
#four:hover,
#five:hover,
#six:hover,
#seven:hover,
#eight:hover,
#nine:hover,
#point:hover {
  background-color: #363636;
}

#cleaner,
#delNum,
#percent {
  background: #848385;
  transition-property: background-color;
  transition-duration: 750ms;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

#cleaner:hover,
#delNum:hover,
#percent:hover {
  background-color: #373638;
}

#divide,
#mult,
#minus,
#plus,
#equal {
  background: #c90000;
  transition-property: background-color;
  transition-duration: 750ms;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

#divide:hover,
#mult:hover,
#minus:hover,
#plus:hover,
#equal:hover {
  background: #800000;
}

span {
  vertical-align: text-top;
  left: 0;
  text-align: center;
  border-radius: 50%;
  padding-top: 10px;
  position: relative;
  display: inline-block;
  width: 40px;
  height: 25px;
  background: #3a3a3a;
  font-size: 12px;
  cursor: pointer;
  margin: 3px 2px;
  box-shadow: inset 0px -2px 5px #605959;
  transition: background-color 750ms cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
}

#toggle {
  transition: background-color 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0s,
	color 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
}

span:hover {
  background-color: #626262;
}

#helper:hover {
  background-color: transparent;
}

#helper {
  transition: opacity 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
}

#xPow2,
#xPow3,
#xPowY,
#tenPowX,
#twoPowX,
#threePowX,
#powE,
#toggle,
#root,
#arcsin,
#arccos,
#arctan,
#arcctg,
#asinh,
#acosh,
#atanh,
#actgh {
  padding-top: 8px;
  height: 27px;
}



------JS------


let inp, spans, toggle, elements, sup, rad, helper;

const {
    PI,
    E,
    random,
    max,
    min,
    log2,
    log10,
    log,
    sqrt,
    cbrt,
    pow,
    sin,
    floor,
    cos,
    tan,
    sinh,
    cosh,
    tanh,
    asin,
    acos,
    atan,
    asinh,
    acosh,
    atanh
} = Math;

const infinity = '∞';
const minusInfinity = '-∞';
const error = 'Error';

const inputIsNaN = () => inp.value = inp.value === 'NaN' ? error : inp.value;
const inputIsInfinity = () => inp.value = inp.value === 'Infinity' ? infinity : inp.value;
const inputIsMinusInfinity = () => inp.value = inp.value === '-Infinity' ? minusInfinity : inp.value;

const insert = str => inp.value[0] === '0' && inp.value.length < 3 ? inp.value = str : inp.value += str;

const clearValue = () => inp.value = '0';

const equal = () => {
    try {
        if (inp.value.includes(error)) {
            inp.value = error;
            return;
        }
        inp.value = inp.value ? eval(inp.value) : inp.value.length > 17 ? inp.value.toFixed(10) : inp.value == 'undefined' ? error : inp.value;

        inputIsNaN();
        inputIsInfinity();
        inputIsMinusInfinity();

    } catch (e) {
        inp.value = error;
    }
}

const showPercent = () => {
    inp.value = eval((inp.value / 100));

    inputIsNaN();
}

const deleteNumber = () => inp.value = inp.value.slice(0, inp.value.length - 1);

const factorial = () => {
    let result = 1;

    if (inp.value < 0) result = error;
    if (inp.value == 0) result = 1;

    for (let i = 1; i <= inp.value; i++) result = result * i;

    if (inp.value.includes('*') || inp.value.includes('/') || inp.value.includes('-') || inp.value.includes('+') || inp.value.includes('.')) result = error;
    if (result == 'Infinity') result = infinity;
    if (inp.value == infinity || inp.value.includes(error) || inp.value.includes('(') || inp.value.includes(')')) result = error;

    inp.value = result;
}

const fib = n => {
    let a = 1,
        b = 1;

    for (let i = 3; i <= n; i++) {
        let c = a + b;
        a = b;
        b = c;
    }

    if (inp.value.includes('*') || inp.value.includes('/') || inp.value.includes('-') || inp.value.includes('+') || inp.value.includes('.')) b = error;
    if (b == 'Infinity') b = infinity;
    if (inp.value == infinity || inp.value.includes(error) || inp.value.includes('(') || inp.value.includes(')')) b = error;

    inp.value = b;

    inputIsInfinity();
}

const showMathPI = () => inp.value = PI;
const showMathE = () => inp.value = E;

const powMathE = () => {
    inp.value = E ** inp.value;

    inputIsInfinity();
    inputIsNaN();
}

const showMathRandom = () => inp.value = random();

const xPowTwo = () => {
    inp.value = inp.value ** 2;

    inputIsInfinity();
    inputIsNaN();
}

const xPowThree = () => {
    inp.value = inp.value ** 3;

    inputIsInfinity();
    inputIsMinusInfinity();
    inputIsNaN();
}

const xPowY = () => {
    if (inp.value.startsWith('-')) inp.value = '(' + inp.value + ')';

    inp.value = inp.value + '**';
}

const tenPowX = () => {
    inp.value = 10 ** inp.value;

    inputIsInfinity();
    inputIsNaN();
}

const twoPowX = () => {
    inp.value = 2 ** inp.value;

    inputIsInfinity();
    inputIsNaN();
}

const threePowX = () => {
    inp.value = 3 ** inp.value;

    inputIsInfinity();
    inputIsNaN();
}

const oneDivByX = () => {
    inp.value = 1 / inp.value;

    inputIsInfinity();
    inputIsMinusInfinity();
    inputIsNaN();
}

const showInteger = (func) => {
    try {
        let counter = 0;
        let strArr = inp.value.split('.');
        let maxOrMinInt = eval(`func(${strArr})`);
        let result = '';
        strArr.forEach(str => {
            let resStr = eval(str);
            if (resStr == maxOrMinInt) {
                counter++;
                result = `${str}(${maxOrMinInt})`
            };
        });

        if (counter === strArr.length) result = `=(${maxOrMinInt})`
        inp.value = result;
        inputIsMinusInfinity();
    } catch (e) {
        inp.value = error;
    }
}

const showMaxInteger = () => showInteger(max);
const showMinInteger = () => showInteger(min);

const showLog2 = () => {
    inp.value = log2(inp.value);

    inputIsMinusInfinity();
    inputIsNaN();
}

const showLog10 = () => {
    inp.value = log10(inp.value);

    inputIsMinusInfinity();
    inputIsNaN();
}

const showLn = () => {
    inp.value = log(inp.value);

    inputIsMinusInfinity();
    inputIsNaN();
}

const showSQRT = () => {
    inp.value = sqrt(inp.value);
    inputIsNaN();
}

const showCBRT = () => {
    inp.value = cbrt(inp.value);
    inputIsNaN();
}

const showRoot = () => {
    let result = inp.value.split('.').filter(el => el != '');
    inp.value = pow(result[0], 1 / result[1]);

    if (result.length > 2) inp.value = error;
    inputIsNaN();
    inputIsInfinity();
}

const showSinDeg = () => {
    let deg = inp.value / (180 / PI);
    let res = sin(deg);
    let str = (deg / PI).toString();
    if (isNaN(deg)) res = error;
    if (deg % PI == 0) res = 0;

    if (str.includes('.16666') && deg > 0 && floor((deg / PI)) % 2 == 0 || str.includes('.833333') && deg > 0 && floor((deg / PI)) % 2 == 0 || str.includes('.16666') && deg < 0 && floor(-(deg / PI)) % 2 == 1 || str.includes('.833333') && deg < 0 && floor(-(deg / PI)) % 2 == 1) {
        res = 0.5;
    }

    if (str.includes('.16666') && deg < 0 && floor((-deg / PI)) % 2 == 0 || str.includes('.833333') && deg < 0 && floor(-(deg / PI)) % 2 == 0 || str.includes('.16666') && deg > 0 && floor((deg / PI)) % 2 == 1 || str.includes('.833333') && deg > 0 && floor((deg / PI)) % 2 == 1) {
        res = -0.5;
    }

    inp.value = res;
}

const showCosDeg = () => {
    let deg = inp.value / (180 / PI);
    let res = cos(deg);
    let str = (deg / PI).toString();

    if (isNaN(deg)) res = error;

    if (str.includes('.33333') && deg > 0 && floor((deg / PI)) % 2 == 0 || str.includes('.66666') && deg > 0 && floor((deg / PI)) % 2 == 1 || str.includes('.33333') && deg < 0 && floor(-(deg / PI)) % 2 == 0 || str.includes('.66666') && deg < 0 && floor(-(deg / PI)) % 2 == 1) {
        res = 0.5;
    }

    if (str.includes('.33333') && deg > 0 && floor((deg / PI)) % 2 == 1 || str.includes('.66666') && deg > 0 && floor((deg / PI)) % 2 == 0 || str.includes('.66666') && deg < 0 && floor(-(deg / PI)) % 2 == 0 || str.includes('.33333') && deg < 0 && floor(-(deg / PI)) % 2 == 1) {
        res = -0.5;
    }

    if (str.slice(str.indexOf('.')) === '.5') {
        res = 0;
    }

    inp.value = res;
}

const showTanDeg = () => {
    let deg = inp.value / (180 / PI);
    let res = tan(deg);

    if (isNaN(deg)) res = error;

    if (deg % PI == 0) res = 0;

    if ((deg / PI).toFixed(5).toString().includes('.25000') && deg > 0 || -(deg / PI).toFixed(5).toString().includes('.75000') && deg < 0) {
        res = 1;
    }

    if ((deg / PI).toFixed(5).toString().includes('.25000') && deg < 0 || (deg / PI).toFixed(5).toString().includes('.75000') && deg > 0) {
        res = -1;
    }

    if ((deg / PI).toFixed(5).toString().includes('.50000') && deg > 0) {
        res = infinity;
    }

    if (-(deg / PI).toFixed(5).toString().includes('.50000') && deg < 0) {
        res = minusInfinity;
    }

    inp.value = res;
}

const showCtgDeg = () => {
    let deg = inp.value / (180 / PI);
    let res = tan(deg);
    let ctg = 1 / res;

    if (isNaN(deg)) ctg = error;

    if (-(deg) % PI == 0 && deg < 0 || ctg == '-Infinity') {
        ctg = minusInfinity;
    }

    if (deg % PI == 0 && deg > 0 || ctg == 'Infinity') {
        ctg = infinity;
    }

    if ((deg / PI).toFixed(5).toString().includes('.25000') && deg > 0 || -(deg / PI).toFixed(5).toString().includes('.75000') && deg < 0) {
        ctg = 1;
    }

    if (-(deg / PI).toFixed(5).toString().includes('.25000') && deg < 0 || (deg / PI).toFixed(5).toString().includes('.75000') && deg > 0) {
        ctg = -1;
    }

    if (-(deg / PI).toFixed(5).toString().includes('.50000')) {
        ctg = 0;
    }

    inp.value = ctg;
}

const showSinh = () => {
    inp.value = sinh(inp.value);

    inputIsNaN();
    inputIsInfinity();
    inputIsMinusInfinity();
}

const showCosh = () => {
    inp.value = cosh(inp.value);

    inputIsNaN();
    inputIsInfinity();
}

const showTanh = () => {
    inp.value = tanh(inp.value);

    inputIsNaN();
}

const showCtgh = () => {
    inp.value = cosh(inp.value) / sinh(inp.value);

    inputIsNaN();
    inputIsInfinity();
    inputIsMinusInfinity();
}

const showArcsinDeg = () => {
    let sin = inp.value;
    let arcsin = asin(sin) * (180 / PI);

    if (isNaN(arcsin)) arcsin = error;

    if (sin == 0.5) arcsin = 30;
    if (sin == -0.5) arcsin = -30;

    inp.value = arcsin;
}

const showArccosDeg = () => {
    let cos = inp.value;
    let arccos = acos(cos) * (180 / PI);

    if (isNaN(arccos)) arccos = error;

    if (cos == 0.5) arccos = 60;
    if (cos == -0.5) arccos = -60;

    inp.value = arccos;
}

const showArctanDeg = () => {
    let tan = inp.value;
    let arctan = atan(tan) * (180 / PI);

    if (isNaN(arctan)) arctan = error;

    inp.value = arctan;
}

const showArcctgDeg = () => {
    let ctg = inp.value;
    let arcctg = atan(1 / ctg) * (180 / PI);

    if (isNaN(arcctg)) arcctg = error;

    inp.value = arcctg;
}

const showAsinh = () => {
    inp.value = asinh(inp.value);

    inputIsNaN();
}

const showAcosh = () => {
    inp.value = acosh(inp.value);

    inputIsNaN();
}

const showAtanh = () => {
    inp.value = atanh(inp.value);

    inputIsNaN();
    inputIsInfinity();
    inputIsMinusInfinity();
}

const showActgh = () => {
    inp.value = atanh(1 / inp.value);

    inputIsNaN();
    inputIsInfinity();
    inputIsMinusInfinity();
}


inp = document.querySelector('input');
	  spans = document.querySelectorAll('#leftBr, #rightBr, #factorial, #fibonacci, #xPow2, #twoPowX, #log2, #PI, #E, #min, #xPowY, #tenPowX, #powE, #oneDiv, #max, #sqrt, #cbrt, #root, #ln, #random');
	  toggle = document.querySelector('#toggle');
	  elements = document.querySelectorAll('#sin, #cos, #tan, #ctg, #xPow3, #threePowX, #log10, #sinh, #cosh, #tanh, #ctgh, #arcsin, #arccos, #arctan, #arcctg, #asinh, #acosh, #atanh, #actgh, #rad');
	  sup = document.querySelector('#sup');
	  rad = document.querySelector('#rad');
	  helper = document.getElementById('helper');

	  rad.style.display = 'none';
	  elements.forEach(el => el.style.display = 'none');

	  toggle.addEventListener('click', function(e) {
	  	helper.style.opacity = helper.style.opacity === '0' || helper.style.opacity === '' ? '1' : '0';
	  	spans.forEach(span => span.style.display = span.style.display === 'none' ? 'inline-block' : 'none');
	  	elements.forEach(el => el.style.display = el.style.display === 'none' ? 'inline-block' : 'none');

	  	this.style.background = this.style.background === 'gray' ? '' : 'gray';
	  	this.style.color = this.style.color === 'black' ? '' : 'black'
	  });

	  rad.addEventListener('click', function(e) {
	  	rad.textContent = rad.textContent === 'Rad' ? 'Deg' : 'Rad';
	  	helper.textContent = helper.textContent === 'Rad' ? 'Deg' : 'Rad';

	  	const onElemClicked = (action, ...funcs) => {
	  		inp.value = action;
	  		funcs.forEach(func => func());
	  	}

	  	if (rad.innerHTML == 'Deg') {
	  		elements[0].onclick = e => onElemClicked(sin(inp.value), inputIsNaN);
	  		elements[1].onclick = e => onElemClicked(cos(inp.value), inputIsNaN);
	  		elements[2].onclick = e => onElemClicked(tan(inp.value), inputIsNaN);
	  		elements[3].onclick = e => onElemClicked(cos(inp.value) / sin(inp.value), inputIsNaN, inputIsInfinity);
	  		elements[7].onclick = e => onElemClicked(asin(inp.value), inputIsNaN);
	  		elements[8].onclick = e => onElemClicked(acos(inp.value), inputIsNaN);
	  		elements[9].onclick = e => onElemClicked(atan(inp.value), inputIsNaN);
	  		elements[10].onclick = e => onElemClicked(1 / atan(inp.value), inputIsNaN);
	  	}

	  	if (rad.innerHTML == 'Rad') {
	  		elements[0].onclick = showSinDeg;
	  		elements[1].onclick = showCosDeg;
	  		elements[2].onclick = showTanDeg;
	  		elements[3].onclick = showCtgDeg;
	  		elements[7].onclick = showArcsinDeg;
	  		elements[8].onclick = showArccosDeg;
	  		elements[9].onclick = showArctanDeg;
	  		elements[10].onclick = showArcctgDeg;
	  	}
	  });

9. By Aya Km

Made by Aya Km. A simple calculator with pink color theme. ( Source )

<!--Create by  :)
^~^ -->
<!DOCTYPE html>
<html>
    <head>
        <title>Calculator</title>
            
    </head>
       <body >

<div class="main">
<table border="1"><tr><td>
<form name="form">
<input type="text" name="textview" class="textview">

<div class="clearfix">
<div class="col-3">
<input type="button" value="C" class="button top" onclick="clean();"></div>
 
<div class="col-3">
<input type="button" value="Del" class="button top" onclick="back();"></div>
</div> 


<div class="clearfix">
<div class="col-3">
<input type="button" value="cos" class="button top-button" onclick="cosine();"/>
</div> 

<div class="col-3">
<input type="button" value="sin" class="button top-button" onclick="sine();"/>
</div> 

<div class="col-3">
<input type="button" value="tan" class="button top-button" onclick="tg();"/>
</div> 

<div class="col-3">
<input type="button" value="Log" class="button top-button" onclick="funLog();"/>
</div> 
</div>


<div class="clearfix">
<div class="col-3">
<input type="button" value="x^3" class="button top-button" onclick="power2();"></div>

<div class="col-3">
<input type="button" value=" √ " class="button top-button" onclick="sq();"></div> 

<div class="col-3">
<input type="button" value="x^2" class="button top-button" onclick="power();"></div>

<div class="col-3">
<input type="button" value="&#247;" class="button operator" onclick="insert('/');"></div>
   </div>  
           
<div class="clearfix">
<div class="col-3">
<input type="button" value="7" class="button" onclick="insert(7);"></div>
    
<div class="col-3">
<input type="button" value="8" class="button"onclick="insert(8);"></div>

<div class="col-3">
<input type="button" value="9" class="button" onclick="insert(9);"></div>

<div class="col-3">
<input type="button" value="&#215;" class="button operator" onclick="insert('*');"></div>
</div>


<div class="clearfix">
<div class="col-3">
<input type="button" value="4" class="button" onclick="insert(4);"></div>

<div class="col-3">
<input type="button" value="5" class="button" onclick="insert(5);"></div>
    
<div class="col-3">
<input type="button" value="6" class="button" onclick="insert(6);"></div>

<div class="col-3">
<input type="button" value="&#8722;" class="button operator" onclick="insert('-');"></div>
</div>
 
 
 
<div class="clearfix">
<div class="col-3">
<input type="button" value="1" class="button" onclick="insert(1);"></div>

<div class="col-3">
<input type="button" value="2" class="button" onclick="insert(2);"></div>

<div class="col-3">
<input type="button" value="3" class="button" onclick="insert(3);"></div>

<div class="col-3">
<input type="button" value="&#43;" class="button operator" onclick="insert('+');"></div>
</div>
    
        
<div class="classfix">
<div class="col-3">
<input type="button" value="." class="button" onclick="insert('.');"></div>

<div class="col-3">
<input type="button" value="0" class="button" onclick="insert(0);"></div>
    
<div class="col-3">
<input type="button" value="&#61;" class="button equal" onclick="equal();"></div>
  
<div class="col-3">
<input type="button" value="%" class="button operator" onclick="insert('%');"></div>
  

</div> 
</form>     
    </div>
   </td></tr></table> 
    <!--javascript functions-->
    
    </body>
</html>



------CSS-------


*{
margin:0px;
padding:0px;
box-sizing:border-box;
outline:none;
 } 

.main{
background:white;  
text-align:center;
width:500px;
height:500px;
margin:50px auto;
padding:50px; 
 } 
 
table{
border-radius:20px;
border:solid ;
background:black;
width:370px;
height:450px;
align:center;
 }
 
form
{
padding:1px;
margin-bottom:1px;
}

.textview
{
width:340px;
height:70px;
padding:0 10px;
pointer-events:none;
background:pink; 
border-color:white;
border-radius:5px;
font-size:30px;
font-family:tahoma;
}

.clearfix:before , .clearfix:after{
content:" " ;
display:table; 
clear:both;
width:50%;
border-radius:5px;
}

.col-3
{
width:25%;
padding:1px;
float:left;
color:#000000;
border-color:white;
}

.button
{
width:70px;
height:40px;
outline:nane;
border-radius:5px;
border-color:white;
font-weight:bold;
font-size:20px;
background:pink;
color:#000000;
}

.button.top{
background:#D38;
border-color:white;
color:#000000;
font-weight:bold;
font-size:20px; 
cursor:pointer;
}


.button.top-button{
background:#D38;
border-color:white;
color:#000000;
font-weight:bold; 
font-size:20px;
cursor:pointer;
}
         
.button.equal{
background:#D38;
color:#000000;
font-size:22px;
border-color:white;
cursor:pointer;
}

.button.operator
{
background:#D38;
color:#000000;
border-color:white;
font-size:20px;
cursor:pointer; 
}

.button:focus
{
  border:0;
  background:white;
}


-----JS-----



function insert(num){
var myString = document.form.textview.value;
var lastChar=myString[myString.length-1];
   if(myString.length <30){ if(!isNaN(lastChar) || lastChar==null || !isNaN(num)){            document.form.textview.value=myString +num;
          }
else if(num!=lastChar){              document.form.textview.value=myString.replace(lastChar,num); }}}     
        
function equal(){
var sum=document.form.textview.value;
   if(sum){           document.form.textview.value=eval(sum); }
    }
 
 function power(){
  /*   num=document.form.textview.value;
     num=Math.pow(num,y);
     document.form.textview.value=num;*/
     document.form.textview.value=Math.pow(document.form.textview.value,2);
 }
 
 function power2(){
  /*   num=document.form.textview.value;
     num=Math.pow(num,y);
     document.form.textview.value=num;*/
     document.form.textview.value=Math.pow(document.form.textview.value,3);
 }
    
 function sq(){
document.form.textview.value=Math.sqrt(document.form.textview.value);
 }
 function cosine(){
     document.form.textview.value=Math.cos(document.form.textview.value );  
 } 
 function sine(){
     document.form.textview.value=Math.sin(document.form.textview.value);
 }
 
 function tg(){
     document.form.textview.value=Math.tan(document.form.textview.value);
 }
 function funLog() 
 {
 document.form.textview.value=Math.log(document.form.textview.value); 
 }
 
function clean(){ document.form.textview.value=' ';} 
 
     
function back(){
var exp=document.form.textview.value;        document.form.textview.value=exp.substring(0,exp.length -1);}

10. By VECTOR 7

Made by VECTOR 7. ( Source )

<!doctype html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="bg"></div>
 <div class="main">
   <form name="form">
   <input class="textview" name="textview"><br>
   </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="×" 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 rowspan=5><input class="button equal" type="button" value="=" onclick="equal()"></td>
   </tr>
   <tr>
   <td colspan=2><input class="button zero" 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>



------CSS-------


*{
 margin: 0;
 padding: 0;
}
.button {
margin: 2px;
height: 50px;
width: 50px;
font-size: 25px;
cursor: pointer;
border: none;
color: white;
background-color: gray;
}
.textview {
margin: 5px;
width: 205px;
font-size: 25px;
padding: 5px;
color: black;
border: none;
}
.zero {
height: 50px;
width: 106px;
}
.equal {
width: 50px;
height: 106px;
}
.main {
position: absolute;
top: 150px;
left: 90px;
transform: traslateX(-50%)translateY(-50%);
}
.bg {
background: linear-gradient(90deg, #e684ae, #79cbca, #77a1d3);
background-size: cover;
height: 690px;
width: 400px;

}


------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);
}

11. By Rapt Demure

Made by Rapt Demure. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body bgcolor="purple" text="black">
        <hr/>
        <table border=2 align=center>
            <tr>
                <td colspan=4><input type="text" value="0" id="t1"style="text-align:right;"</td>
            </tr>
            <tr>
                <td><input type="button" value="7" id="b7" onclick="insert('7');"</td>
                  <td><input type="button" value="8" id="b8" onclick="insert('8');"</td>
                    <td><input type="button" value="9" id="b9" onclick="insert('9');"</td>
                      <td><input type="button" value="C" id="bc" onclick="ce( );"</td>
            </tr>
            
            <tr>
                <td><input type="button" value="4" id="b4" onclick="insert('4');"</td>
                  <td><input type="button" value="5" id="b5" onclick="insert('5');"</td>
                    <td><input type="button" value="6" id="b6" onclick="insert('6');"</td>
                      <td><input type="button" value="+" id="ba" onclick="cal('+');"</td>
            </tr>
            
            <tr>
                <td><input type="button" value="1" id="b1" onclick="insert('1');"</td>
                  <td><input type="button" value="2" id="b2" onclick="insert('2');"</td>
                    <td><input type="button" value="3" id="b3" onclick="insert('3');"</td>
                      <td><input type="button" value="-" id="bs" onclick="cal('-');"</td>
            </tr>
            
            <tr>
                <td><input type="button" value="/" id="bd" onclick="cal('/');"</td>
                  <td><input type="button" value="0" id="b0" onclick="insert('0');"</td>
                    <td><input type="button" value="*" id="bm" onclick="cal('*');"</td>
                      <td><input type="button" value="=" id="be" onclick="res( );"</td>
            </tr>
        </table>
    </body>
</html>



-----CSS-------


        button
        {
            width:50px;
            height:60;
        }
        td
        {
            width:20px;
            padding:10px;
            background-color:pink;
            text:green;
        }



-----JS------


     var  v1=0,v2=0,v3=0,oper;
            function insert(b)
            {
                var x=document.getElementById('t1').value;
                if(x=="0")
                {
                    document.getElementById('t1').value=b;
                }
                else
                {
                    document.getElementById('t1').value+=b;
                }
            }
            function ce( )
            {
                document.getElementById('t1').value="0";
                v1=v2=v3=0;
            }
            function cal(op)
            {
                v1=parseInt(document.getElementById('t1').value);
                document.getElementById('t1').value="0";
                oper=op;
                
            }
            function res( )
            {
                v2=parseInt(document.getElementById('t1').value);
                switch(oper)
                {
                    case '+':
                                    v3=v1+v2;
                                    break;
                    case '-':
                                    v3=v1-v2;
                                    break;
                    case '/':
                                    v3=v1/v2;
                                    break;
                    case '*':
                                    v3=v1*v2;
                                    break;
                }
                document.getElementById('t1').value=v3;
            }

12. By Shaikh Shamaeel

Made by Shaikh Shamaeel. Simple calculator with history that shows the previous calculations you did. ( Source )


    
<!doctype html>
<html>
 <head>
  <title></title>
  <link rel="stylesheet" href="style.css">
  <link
   href="https://fonts.googleapis.com/css2?family=MuseoModerno:[email protected]&display=swap"
   rel="stylesheet">
 </head>
 <body>
  <input id='result' placeholder="0" disabled>
  <div class='pad_calculator'>
   <div class='conteneir'>
    <tr>
     <td><button class='pad'
       id='clear_button'>C</button></td>
     <td><button class='pad' id='back_btn'>></button>
     </td>
     <td><button class='pad'
       id='change-sign-btn'>±</button>
     </td>
     <td><button class='right' id='plus-btn'
       onclick="calc(' / ');">÷</button>
     </td>
     <td><button class='special'
       onclick='Paren()'>()</button>
     </td>
    </tr>
    <br>
    <tr>
     <td><button class='pad'
       onclick='calc(7)'>7</button>
     </td>
     <td><button class='pad'
       onclick='calc(8)'>8</button>
     </td>
     <td><button class='pad'
       onclick='calc(9)'>9</button>
     </td>
     <td><button class='right'
       onclick="calc(' * ')">×</button>
     </td>
     <td><button class='special'
       onclick='round()'>R</button>
     </td>
    </tr>
    <br>
    <tr>
     <td><button class='pad'
       onclick='calc(4)'>4</button>
     </td>
     <td><button class='pad'
       onclick='calc(5)'>5</button>
     </td>
     <td><button class='pad'
       onclick='calc(6)'>6</button>
     </td>
     <td><button class='right'
       onclick="calc(' - ')">-</button>
     </td>
     <td><button class='special'
       onclick='calc("-")'>-</button>
     </td>
    </tr>
    <br>
    <tr>
     <td><button class='pad'
       onclick='calc(1)'>1</button>
     </td>
     <td><button class='pad'
       onclick='calc(2)'>2</button>
     </td>
     <td><button class='pad'
       onclick='calc(3)'>3</button>
     </td>
     <td><button class='right'
       onclick="calc(' + ')">+</button>
     </td>
     <td><button class='special'
       onclick='RootSquare()'>√</button>
     </td>
    </tr>
    <br>
    <tr>
     <td><button class='large'
       onclick='calc(0)'>0</button>
     </td>
     <td><button class='pad'
       onclick='calc(".")'>.</button>
     </td>
     <td><button class='right'
       onclick="result()">=</button>
     </td>
     <td><button class='special'
       onclick="calc('²')">e²</button>
     </td>
    </tr>
    <p id='msg_alert'><span>× Error -
     </span><span id='alert'></span> -
     <button class='cancel_alert'
      onclick="cancel()">OK</button></p>
   </div>
  </div>
  <button class='style1' id='btn_history'
   onclick='historyAnimations()'>Show
   history</button>
  <div class='histoty' id='histoty'>
   <div class='contener-history'>
    <h1>Your history : </h1>
    <div>
     <h3 id='message-h3'>You haven't done
      any calculations</h3>
     <ol id='ol-history' type='I'>
     </ol>
    </div>
   </div>
  </div>
  <div class='new-up' id='new-up'>
   <span> Info : </span><span class='btn-cancel-news'
    id='btn-cancel-news'>×</span>
   <ul>
    <li>If parentheses is bugged please
     clear the calculs</li>
   </ul>
  </div>
 </body>
</html>


-----CSS------



body {
 background-color: black;
 color: white;
 font-family: 'ms sans sherif', cursive;
}
#result{
  font-size: 75px;
  background-color: black;
  border: none;
  color: white;
  outline: none;
}
#result::placeholder{
  color: white;
}
button{
  font-family: 'Arial', cursive;
  border: circle;
  outline: none;
  height: 50px;
  width: 50px;
  margin: 5px;
  font-size: 20px;
  color:fb0;
}
.right{
  background-color: orange;
  color: white;
}
.pad{
  background-color: grey;
  transition: 0.3s;
  -webkit-transition: 0.3s;
}
.pad:focus{
  color: rgb(190, 190, 190);
}
.large{
  background-color: grey;
  width: 115px;
}
#msg_alert{
  display: none;
  background-color: rgba(255, 0, 0, 0.500);
  width: 250px;
}
.cancel_alert{
  background-color: red;
  font-size: 12px;
  height: 20px;
  width: 30px;
  border-radius: 25px;
}
.style1{
  border: none;
  height:  3em;
  width: 10em;
  background-color: rgb(102, 102, 102);
  color: rgb(207, 207, 207);
  margin: 20px;
}
#histoty{
  opacity: 0;
  color: rgb(170, 170, 170);
}
.calc-type{
  color: orange;
}
.calcule{
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  border-radius: 5px;
}
.special{
  background-color: Green;
}
.new-up{
  width: 95%;
  border: 1.5px solid white;
}
.btn-cancel-news{
  float: right;
  margin-right: 1.5%;
}



------JS-------


function calc(num) {

 document.getElementById('result')
  .value += num;

}

function clear() {

 document.getElementById('result')
  .value = '';

 paren_bolean = false;

}

function back() {

 var x = document.getElementById(
  'result').value;

 document.getElementById('result')
  .value = x.substring(0, x.length -
   1);

 if (document.getElementById(
   'result').value === '') {

  paren_bolean = false;

 }

}
function change() {

 var x = document.getElementById(
  'result').value;

 document.getElementById('result')
  .value = (x - 2 * x);

 if (document.getElementById(
   'result').value === 'NaN') {

  document.getElementById('result')
   .value = alert_msg(
    "The calculations don't work");

 }

}
function alert_msg(msg) {

 document.getElementById('alert')
  .innerHTML = msg;

 document.getElementById('msg_alert')
  .style.display = 'block';

}

function cancel() {

 document.getElementById('msg_alert')
  .style.display = 'none';

}
var paren_bolean = false;

function Paren() {

 var x = document.getElementById(
  'result').value;

 if (paren_bolean === false) {

  calc('(');

 } else {

  calc(')');

 }

 paren_bolean = !paren_bolean;

}
function RootSquare() {

 calc('√');

 Paren();

}

var typeOfCalc = [];

function result() {

 typeOfCalc = []

 var x = document.getElementById(
  'result').value;

 var caclHistory = document
  .getElementById('result').value;

 

 if (x.includes('²') === true) {

  do {

   const k = x.substring(0, x
    .indexOf('²'));

   const atReplace = x.substring(k
    .lastIndexOf(' ') + 1, x
    .indexOf('²') + 1);

   const result = k.substring(k
     .lastIndexOf(' '), k.length) * k
    .substring(k.lastIndexOf(' '), k
     .length);

   x = x.replace(atReplace
    .toString(), result.toString());

  } while (x.includes('²') === true);

  document.getElementById('result')
   .value = x;

  typeOfCalc.push(' square');

 }



 if (x.includes('√') === true) {

  do {

   x = x.replace('√(' + x.substring(x
     .indexOf('√') + 2, x.length)
    .substring(x.substring(x
      .indexOf('√') + 2, x.length),
     x.substring(x.indexOf('√') + 2,
      x.length).indexOf(')')) + ')',
    Math.sqrt(x.substring(x.indexOf(
     '√') + 2, x.length).substring(
     x.substring(x.indexOf('√') +
      2, x.length), x.substring(x
      .indexOf('√') + 2, x.length)
     .indexOf(')'))));

  } while (x.includes('√') === true);

  document.getElementById('result')
   .value = x;

  typeOfCalc.push(' square root');

 }

 

 function history() {

  document.getElementById(
    'message-h3').style.display =
   'none';

  if (x.includes('+') === true) {

   typeOfCalc.push(' addition');

  }

  if (x.includes('-') === true) {

   var y = x;

   do {

    if (y.startsWith('-') === true) {

     y = y.substring(y.length, 1);

    } else if (y.includes('-') ===
     true) {

     typeOfCalc.push(' subtraction');

     y = 'nothing';

    }

   } while (y.includes('-') ===
    true);

  }

  if (x.includes('*') === true) {

   typeOfCalc.push(
    ' multiplication');

  }

  if (x.includes('/') === true) {

   typeOfCalc.push(' division');

  }

  document.getElementById(
    'message-h3').style.display =
   'none';

  document.getElementById(
    'ol-history').innerHTML +=
   '<li><span class="calcule">' +
   caclHistory +
   '</span><span class="calc-type"> ' +
   typeOfCalc +
   ' </span><span class="calcule">Result : ' +
   eval(x) + '</span></li>';

 }

 history();

 if (x) {

  document.getElementById('result')
   .value = eval(x);

 }

}

var hide = true;

function historyAnimations() {

 hide = !hide;

 document.getElementById('histoty')
  .style.transition = '0.5s';

 document.getElementById('histoty')
  .style.webkitTransition = '0.5s';

 if (hide === false) {

  document.getElementById('histoty')
   .style.opacity = '1';

 } else if (hide === true) {

  document.getElementById('histoty')
   .style.opacity = '0';

 }

}

function round() {

 document.getElementById(
   'message-h3').style.display =
  'none';

 var x = document.getElementById(
  'result').value;

 if (x === 0 || x.includes('.') ===
  false) {

  document.getElementById('result')
   .value = alert_msg(
    "You can't round that !");

  document.getElementById('result')
   .value = 'impossible';

  paren_bolean = false;

 } else if (x !== 0 || x.includes(
   '.') === true) {

  document.getElementById('result')
   .value = Math.round(x);

  document.getElementById(
    'ol-history').innerHTML +=
   '<li><span class="calcule"> Round(' +
   x +
   ')</span><span class="calc-type"> round </span><span class="calcule">Result : ' +
   Math.round(x) + '</span></li>';

 } else {

 }

}

function newsHide() {

 document.getElementById('new-up')
  .style.display = 'none';

}

document.getElementById(
 'clear_button').onclick = clear;

document.getElementById('back_btn')
 .onclick = back;

document.getElementById(
 'change-sign-btn').onclick = change;

document.getElementById(
  'btn-cancel-news')
 .addEventListener('click',
  newsHide);

13. By Jaagrav

Made by Jaagrav. Calculator with Darkmode, you can enable the Darkmode by clicking on the blue line at the bottom. ( Source )

<!doctype html>
<!--Have made this on my phone because my laptop stopped working...The better version would be out soon, tap on the line for dark mode...-->
<html>
    <head style="overflow:hidden;">
        <link href="https://fonts.googleapis.com/css?family=Saira+Semi+Condensed&display=swap" rel="stylesheet">
        <title>Calculator</title>
        <link href="calculator.css" rel="stylesheet">
        <script src="calculator.js"></script>
    </head>
    <body id="body">
        <div class="container">
            <div id="display"></div>
            <button id="d0" onclick="join('0')">0</button>
            <button id="d1" onclick="join('1')">1</button>
            <button id="d2" onclick="join('2')">2</button>
            <button id="d3" onclick="join('3')">3</button>
            <button id="d4" onclick="join('4')">4</button>
            <button id="d5" onclick="join('5')">5</button>
            <button id="d6" onclick="join('6')">6</button>
            <button id="d7" onclick="join('7')">7</button>
            <button id="d8" onclick="join('8')">8</button>
            <button id="d9" onclick="join('9')">9</button>    
            <button id="dpoint" onclick="join('.')">•</button>    
            <button id="dplus" onclick="join('+')">+</button>
            <button id="dsub" onclick="join('-')">-</button>
            <button id="dpro" onclick="join('*')">x</button>
            <button id="dquo" onclick="join('/')">/</button>
            <button id="dequal" onclick="equal()">=</button>
            <button id="clear" onclick="document.getElementById('display').innerHTML='';navigator.vibrate(100);">C</button>    
            <button id="clearL" onclick="clearL()"><</button>    
            <button id="mode" onclick="change()"></button>
            </div>
    </body>
</html>



--------CSS--------


#body{transition:1s;background-color:white;overflow:hidden;}
.container{
    position:absolute;
    height:250pt;width:200pt;
    margin:auto;display:flex;
    top:0;right:0;left:0;bottom:0;
    background-color:transparent;
    border-radius:10px;
    transform:scale(1.2);
    justify-content:center;align-items:center;
    
}
#display{
    position:absolute;
    height:70px;
    width:190pt;
    top:5pt;
    background-color:black;
    border-radius:10px;
    color:orange;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    font-weight:900;
    overflow:scroll;
    font-size:30px;
    font-family: 'Saira Semi Condensed', sans-serif;
}
#dsub,#d1,#d2,#d3,#dplus{
    position:absolute;
    height:40px;width:40px;
    top:30%;
}
#dplus{left:2%;}
#d1{left:22%;}
#d2{left:42%;}
#d3{left:62%;}
#dsub{left:82%;}
#dpro,#d4,#d5,#d6,#dquo{
    position:absolute;
    height:40px;width:40px;
    top:50%;
}
#dquo{left:2%;}
#d4{left:22%;}
#d5{left:42%;}
#d6{left:62%;}
#dpro{left:82%;}
#dpoint,#d7,#d8,#d9,#clearL{
    position:absolute;
    height:40px;width:40px;
    top:70%;
}
#dpoint{left:2%;}
#d7{left:22%;}
#d8{left:42%;}
#d9{left:62%;}
#clearL{left:82%;}
#d0,#dequal,#clear{
position:absolute;
    height:40px;width:65px;
    top:87%;
}
#d0{left:9%;}
#dequal{left:38%;}
#clear{left:67%;}
button{transition:.1s;color:white;border-radius:50px;border:0;outline:none;background-color:#00a1ff;font-weight:900;
    font-family: 'Saira Semi Condensed', sans-serif;}
button:active{background-color:black;color:white;}
#mode{
    position:absolute;
    bottom:-10%;
    width:100%;
}



-----JS------


alert("Coded with Krish, do go follow him, link in comments...Tap on blue line for dark mode...")
function join(arg){
    document.getElementById('display').innerHTML+=arg;
    navigator.vibrate(80);
}
function equal(){
if(document.getElementById('display').innerHTML!='')    
document.getElementById('display').innerHTML=eval(document.getElementById('display').innerHTML);
navigator.vibrate(80);
}
function clearL(){
    var y = document.getElementById('display').innerHTML;
    document.getElementById('display').innerHTML=y.substring(0,y.length-1);
    navigator.vibrate(80);
}
var j=0;
function change(){
    j++;
    if(j%2==0)
        document.getElementById('body').style.backgroundColor="white";
    else
        document.getElementById('body').style.backgroundColor="black";
        navigator.vibrate([100,100,100,100,100,100,100,100,100]);
}

14. By Abdirahman Mohamed Ibrahim

Made by Abdirahman Mohamed Ibrahim. ( Source )

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/stel.css">
    <title> calculator</title>
</head>
<body>
<fieldset id="calculate">

    <h1>Calculator</h1>
 <input type="num" style="height:10px !important" placeholder="" id="placeholder" readonly >
    <input type="num" value="0" id="screen" readonly name="txtname">
    <div id="turyare">
    <button id="a" onclick="num('1')">1</button>
    <button id="b" onclick="num('2')">2</button>
    <button id="c" onclick="num('3')">3</button>
    <button id="d" title="Backspace" onclick="bs()"><=</button>
    <br><button id="e" onclick="num('4')">4</button>
    <button id="f" onclick="num('5')">5</button>
    <button id="g" onclick="num('6')">6</button>
    <button id="h" onclick="op('+')">+</button>
    <br><button id="i" onclick="num(7)">7</button>
    <button id="j" onclick="num('8')">8</button>
    <button id="k" onclick="num('9')">9</button>
    <button id="l" onclick="op('-')">-</button>
    <br><button id="m" onclick="num('.')">.</button>
    <button id="n" onclick="num('0')">0</button>
    <button id="o" onclick="num(00)">00</button>
    <button id="p" title="multiply" onclick='op("x")'>x</button>
    <br><button id="q" onclick="c()">c</button>
    <button id="y" onclick="equal();">=</button>
    <button id="n" onclick="sq()">^</button>
    <button id="s" onclick="op('/')">/</button>

</fieldset>
</div>
</body>
</html>


------CSS-------


#calculate{
    background-color: #660066;
    width: 150px;
    height: 300px;
    margin-left: 100px;
    border-radius: 55px;
    border-top: 100px;
    
}
#calculate h1{
    color: white;
    text-align: center;

}
input{
    width: 145px;
    height: 30px;
    text-align: right;
}
#turyare{
    background-color: orange;
    height: 150px; 
    width: 150px;
    margin-top: 10px;
}
#a{
    margin-top: 5px;
    background-color: #0033cc;
    color: white;
    margin-left: 5px;

}
#b{
    background-color: #0033cc;
    color: white;
    margin-left: 5px;
}
#c{
    background-color: #0033cc;
    color: white;
    margin-left: 5px;
}
#d{
    background-color: red;
    color: white;
    margin-left: 7px;
}
#e{
    background-color: #0033cc;
    color: white;
    margin-left: 5px;
    margin-top: 5px;
}
#f{
    background-color: #0033cc;
    color: white;
    margin-left: 5px;
}
#g{
    background-color: #0033cc;
    color: white;
    margin-left: 5px;
}
#h{
    background-color: #0033cc;
    color: white;
    width: 32px;
    margin-left: 7px;
}
#i{
    background-color: #0033cc;
    color: white;
    margin-left: 5px;
    margin-top: 5px;

}
#j{
    background-color: #0033cc;
    color: white;
    margin-left: 5px;
    }
#k{
    background-color: #0033cc;
    color: white;
    margin-left: 5px;
}
#l{
    background-color: #0033cc;
    color: white;
    width: 32px;
    margin-left: 7px;
}
#m{
    background-color: #0033cc;
    color: white;
    width: 24px;
    margin-left: 5px;
}
#n{
    background-color: #0033cc;
    color: white;
    width: 24px;
    margin-left: 5px;
}
#o{
    background-color: #0033cc;
    color: white;
    margin-left: 5px;
    width: 24px;

}
#p{
    background-color: #0033cc;
    color: white;
    width: 32px;
    margin-left: 5px;
    margin-top: 5px;
}
#q{
    background-color: red;
    color: white;
    width: 24px;
    margin-left: 5px;
}
#r{
    background-color: green;
    color: white;
    margin-left: 5px;
    width: 58px;

}
#s{
    background-color: #0033cc;
    color: white;
    width: 32px;
    margin-left: 4px;
    margin-top: 5px;

}



------JS------


 var no1 = "",no2 = "", cleared = "", opr = "", old_no = "" ;
    
    function c(){
    document.getElementById("screen").value = "";
    document.getElementById("placeholder").value = "";
     no1 = "";
     no2 = "";
     cleared = "";
     opr = "";
     old_no = "";
    }
    
    function num(no) {
    
     old_no = document.getElementById('screen').value;
        
        
        if(old_no.includes(".") && no == "."){
            return false;
        }
        
        if(old_no == "0" && no != "."){
                document.getElementById('screen').value = no;

        }else if(old_no == "0" && no == "."){
                document.getElementById('screen').value = old_no+no;

        }
        else if(opr == "" ){
            
        document.getElementById('screen').value = old_no + no;
        
        }else if (cleared == "true"){
        document.getElementById('screen').value = old_no + no;
        }
        else{
        cleared = "true";
        document.getElementById('screen').value = no;
        }
        
    
    }
    
    function op(o){
        opr = o;
        no1 = document.getElementById("screen").value;
        document.getElementById("placeholder").value= no1+ o;
    }
    
    function equal(){
        var res ;
        no2 = document.getElementById("screen").value;
        
        if(opr == "+"){
            res = (parseFloat(no1)+parseFloat(no2));
        }
        else if (opr == "-"){
            res = (no1-no2);
        }else if (opr == "x"){
            res = (no1*no2);
        }else{
            res = (no1/no2);
        } 
        
        document.getElementById("screen").value = (res);
        document.getElementById("placeholder").value="";
    }
    function bs(){
        var old = document.getElementById("screen").value;
        
        document.getElementById("screen").value = old.substring(0,old.length-1);
    }
    

15. By Yash Arora

Made by Yash Arora. Scientific calculator with amazing animation, open the rest of the operators by clicking the arrow icon at the right side. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="display">
                <form name="calc">
                    <input class="value" type="text" name="txt" readonly="">
                    <input class="result-value" type="text" name="txt1" readonly="">
                </form>
            </div>
            <div class="keypad">
                <div class="numbers">
                    <div onclick=input(7)>7</div>
                    <div onclick=input(8)>8</div>
                    <div onclick=input(9)>9</div>
                    <div onclick=input(4)>4</div>
                    <div onclick=input(5)>5</div>
                    <div onclick=input(6)>6</div>
                    <div onclick=input(1)>1</div>
                    <div onclick=input(2)>2</div>
                    <div onclick=input(3)>3</div>
                    <div onclick=input(0)>0</div>
                    <div onclick=input('.')>.</div>
                    <div onclick=displayresult()>=</div>
                </div>
                <div class="operators">
                    <div onclick=backspace()><i class="fas fa-backspace"></i></div>
                    <div onclick=input("/")>÷</div>
                    <div onclick=input("*")>×</div>
                    <div onclick=input("-")>-</div>
                    <div onclick=input("+")>+</div>
                </div>
            </div>
            <div class="side-operators">
                <div onclick=show()><i id="lol" class="fas fa-chevron-left"></i></div>
                <div onclick=change()>1/2</div>
                <div onclick=degorrad()>DEG</div>
                <div onclick=input("%")>%</div>                
                <div onclick=input("sin(")>sin</div>                
                <div onclick=input("cos(")>cos</div>               
                <div onclick=input("tan(")>tan</div>                
                    <div onclick=input("ln(")>ln</div>                                
                    <div onclick=input("log(")>log</div>                
                <div onclick=input("√(")>√</div>
                                
                <div onclick=input("π")>π</div>
                <div onclick=input("e")>e</div>
                <div onclick=input("^")>^</div>
                <div onclick=input("(")>(</div>
                <div onclick=input(")")>)</div>
                <div onclick=input("!")>!</div>
            </div>
        </div>
    </body>
</html>


------CSS------


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    overflow:hidden ;
}
body{
    width:100vw;
    height:100vh;
    overflow:hidden;
}
.container{
    width:100vw;
    height:100vh;
    overflow:hidden;
}
.display{
    width:100%;
    height:40vh;
}
.display .value{
    width:100%;
    height:30vh;    
    font-size:40px;
    text-align:right;
    outline:none;    
    border:none;
    overflow:scroll;
}
.display .result-value{
    width:100%;
    height:10vh;    
    font-size:20px;
    text-align:right;
    border:none;
    outline:none;    
}
.container .keypad{
    display:grid;
    grid-template-columns:3fr 1fr;
    width:92%;
}
.container .keypad .numbers{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:15vh 15vh 15vh 15vh;
    overflow:hidden ;
}
.container .keypad .numbers div{
    display:flex;
    justify-content:center;
    align-items:center;
    background:#202124;
    color:white;
    font-size:30px;
    overflow:hidden;
}
.container .keypad .operators{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:12vh 12vh 12vh 12vh 12vh;
    border-left:3px solid #aaa;
}
.container .keypad .operators div{
    display:flex;
    justify-content:center;
    align-items:center;
    background:#202124;
    color:#8ab4f8 ;
    font-size:20px;
    overflow:hidden ;    
}
/*.container .keypad .numbers div:active{
    background:#74ff3b;
}
.container .keypad .operators div:active{
    background:#74ff3b;
}*/
.side-operators{
    position:absolute ;
    top:40vh;
    left:92vw;
    display:grid;
    grid-template-columns:13% 29% 29% 29%;    
    background:#174ea6;
    width:80vw;
    height:60vh;
    color:white;
    transition:left 0.5s;
    overflow:hidden ;
}
.side-operators div{
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    font-size:20px;
    overflow:hidden;
}
.side-operators div:nth-child(1){
    grid-row:1/6;
    transform:scaleX(1);
    transition:transform 1s;
}
.show{
    position:absolute ;
    left:20vw;    
}
.arrow{
    transform:scaleX(-1);
    transition:transform 1s;
}
sup{
    font-size:10px;
    position:relative;
    top:-5px;
}
.container .keypad .numbers div span{
    position: absolute ; 
    background: #fff;
    transform: translate(-50%,-50%);
    pointer-events:none;
    border-radius:50%;
    animation: animate 0.5s linear;

}
@keyframes animate{
    0%{
        width:0vw;
        height:0vh;
        opacity:0.5;
    }
    100%{
        width:17vh;
        height:17vh;
        opacity:0;
    }
}
.container .keypad .operators div span{
    position: absolute ; 
    background: #fff;
    transform: translate(-50%,-50%);
    pointer-events:none;
    border-radius:50%;
    animation: animate1 0.5s linear;

}
@keyframes animate1{
    0%{
        width:0vw;
        height:0vh;
        opacity:0.5;
    }
    100%{
        width:14vh;
        height:14vh;
        opacity:0;
    }
}


-----JS-----


var k=0,h=1;
function backspace(){
    k=1;
    let some=document.calc.txt.value;
    if(some.endsWith("asin(")||some.endsWith("atan(")||some.endsWith("acos(")){
        document.calc.txt.value = document.calc.txt.value.slice(0,-5);
    }else{
        if(some.endsWith("sin(")||some.endsWith("tan(")||some.endsWith("cos(")||some.endsWith("log(")||some.endsWith("exp("))
         {
            document.calc.txt.value = document.calc.txt.value.slice(0,-4);
         }else{
             if(some.endsWith("ln(")){
                 document.calc.txt.value = document.calc.txt.value.slice(0,-3);
             }else
             {
              document.calc.txt.value = document.calc.txt.value.slice(0,-1);
             }
         }          
    }    
    let l=document.calc.txt.value.length;
    if(l===0)
    {
        document.calc.txt.value+=0;        
    }
    answerdisplay();
}






function input(x){
   let l=document.calc.txt.value.length;
   let last=document.calc.txt.value[l-1]; if(k===1&&document.calc.txt.value[0]==="0"&&x!=="*"&&x!=="/"&&x!=="+"&&x!=="-"){ 
       document.calc.txt.value=document.calc.txt.value.slice(0,-1);
               
    }
    k=2;
    if(document.calc.txt.value.length===0){
        if(x!=="*"&&x!=="/"){
            document.calc.txt.value+=x;
        }
        else{
            document.calc.txt.value+=0;
            document.calc.txt.value+=x;
        }
    }
    else{
        if(((last==="*"||last==="/"||last==="+"||last==="-")&&(x==="*"||x==="/"))||((last==="+"||last==="-")&&(x==="+"||x==="-")))
        {
            document.calc.txt.value=document.calc.txt.value.slice(0,-1);
        }
        document.calc.txt.value+=x;
    }    
    /*if(!isNaN(x)){
        answerdisplay();
    }*/
    answerdisplay();
}





function displayresult(){
    let str1=document.calc.txt.value;
    str1=addclosingbracket(str1);
    let str=eva(str1);
    document.calc.txt.value=eval(str);
}

function addclosingbracket(str){
    let v=0,w=0,x,y;
    let l=str.length;
    if(str.includes("π")){
        x=str[str.indexOf("π")+1];
        y=str.indexOf("π")+1;
        l=str.length;
        if(x!=="*"&&x!=="/"&&x!=="+"&&x!=="-"&&x!=="^"&&x!=="!"&&x!==")"&&y!==l){
            str=str.slice(0,y)+"*"+str.slice(y);
            document.calc.txt.value=str;
            alert(str+"  "+x);
        }
    }
    if(str.includes("e")){
        
        y=str.indexOf("e")+1;
        x=str[str.indexOf("e")+1];
        if(x!=="*"&&x!=="/"&&x!=="+"&&x!=="-"&&x!=="^"&&x!=="!"&&x!==")"&&y!==l){
            str=str.slice(0,y)+"*"+str.slice(y);
            document.calc.txt.value=str;
        }
    }
    if(str.includes("!")){
        y=str.indexOf("!")+1;
        let x=str[str.indexOf("!")+1];
        if(x!=="*"&&x!=="/"&&x!=="+"&&x!=="-"&&x!=="^"&&x!=="!"&&x!==")"&&y!==l){
            str=str.slice(0,y)+"*"+str.slice(y);
            document.calc.txt.value=str;
        }
    }
    if(str.includes(")")){
        y=str.indexOf(")")+1;
        let x=str[str.indexOf(")")+1];
        if(x!=="*"&&x!=="/"&&x!=="+"&&x!=="-"&&x!=="^"&&x!=="!"&&x!==")"&&y!==l){
            str=str.slice(0,y)+"*"+str.slice(y);
            document.calc.txt.value=str;
        }
    }
    
    
    
    for(let i=0;i<str.length;i++){
        if(str[i]==="("){
            v++;
        }
        if(str[i]===")"){
            w++;
        }
    }
    if(v!==w){
        for(let i=0;i<(v-w);i++){
            str+=")";
        }
    }
    
    
    
    return str;
}



function toknow(a,str){
    //let str=document.calc.txt.value;
    let l=str.length; 
    //alert(str);   
    if(str.includes(")")){
        for(;l>=a;l--){
            if(str[l]===")"){
                break;
            }
        }
    }
    
    //alert("l "+l);
    return l;
}





function kode(a,str){
    //let str=document.calc.txt.value;
    let str1=str;
    let substring,index,index1,b,c;
    b = str1.indexOf(a);
    if(a==="sin"||a==="cos"||a==="tan"||a==="asin"||a==="acos"||a==="atan"||a==="√"||a==="log"||a==="ln"||a==="exp"){
        c = a.length+1;
    }else{
        c=a.length;
    }
    index=toknow(b+c,str);
    index1=index+1;
    //alert("b "+b+" c "+c+" index "+index)
    substring = evaluate(a,str1.slice(b+c,index));
    //alert(substring )
    str = str.slice(0,b)+substring+str.slice(index1);
    return str;
}






function eva(str){
    let str1=str;
    let substring;
    let index,index1;
    let b;
    
     ///////for asin
    if(str.includes("asin")){
        str=kode("asin",str);
    }
    
    ///////for acos
    if(str.includes("acos")){
        str=kode("acos",str);
    }
    
    ///////for atan
    if(str.includes("atan")){
        str=kode("atan",str);
    }
            
    /////for sin
    if(str.includes("sin")){
        str=kode("sin",str);
    }
    
    ////for tan
    if(str.includes("tan")){
        str=kode("tan",str)
    }
    
    ////for cos
    if(str.includes("cos")){
        str=kode("cos",str);
    }
    
    /////for log 10//////////
    if(str.includes("log")){
        str=kode("log",str);  
              
    }
    
    ////for natural log
    if(str.includes("ln")){
        str=kode("ln",str);        
    }
    
    ///////for square root
    if(str.includes("√")){
        str=kode("√",str);
    }
    
    ///////for π
    if(str.includes("π")){
        let f=str.indexOf("π");
        str=str.slice(0,f)+Math.PI+str.slice(f+1);
    }
    //////for e
    if(str.includes("e")&&str[str.indexOf("e")+1]!=="x"){
        let f=str.indexOf("e");
        str=str.slice(0,f)+Math.E+str.slice(f+1);
    }
    
    ///////for ^(power)
    if(str.includes("^")){
        str=forpow(str);
    }
        
    ///////for !(factorial)
    if(str.includes("!")){
        str=forfactorial(str);
    }

    if(str.includes("exp")){
        str=kode("exp",str);
    }
    
    
    //if(str.includes("sin")||)
    if(str.includes("sin")||str.includes("cos")||str.includes("tan")||str.includes("√")||str.includes("asin")||str.includes("acos")||str.includes("atan")||str.includes("√")||str.includes("π")||str.includes("!")||str.includes("e")||str.includes("^")){
        str=eva(str);
    }
    return str;
}






function forfactorial(str){
    let index=str.indexOf("!");
    let result=1,n;
    n=str[index-1];
    for(n;n>0;n--){
       result=n*result;
    }
    str=str.slice(0,index-1) + result + str.slice(index+1);
    return str;            
}






function forpow(str){
    let f=str.indexOf("^");
    let i,j;
    for(i=f+1;i<=str.length;i++){
        if(isNaN(str[i])){
           break; 
        }
    }
    i=i-1;
    for(j=f-1;j>=0;j--){
        if(isNaN(str[j])){
           break; 
        }
    }
    j=j+1;
    let v=str.substring(j,f);
    let w=str.substring(f+1,i+1);
    str=str.slice(0,j)+Math.pow(v,w)+ str.slice(i+1);
    return str;
}





////just for evaluation
function evaluate(y,z){
    let result;
    //alert("y "+y+" z "+z)
    
    if(z.includes("sin")||z.includes("cos")||z.includes("tan")||z.includes("√")||z.includes("asin")||z.includes("acos")||z.includes("atan")||z.includes("√")||z.includes("π")||z.includes("!")||z.includes("e")||z.includes("^")||z.includes("log")||z.includes("ln")){
        //alert("lol")
        z=eva(z);
        //alert(z)
        z=eval(z);
    }else{
        z=eval(z);
    }
    
    
    switch(y){
        case "asin":z=check(z);
                    result=Math.asin(z);
                    break;
        case "acos":z=check(z);
                    result=Math.acos(z);
                    break;
        case "atan":z=check(z);
                    result=Math.atan(z);
                    break;
        case "sin":z=check(z);
                   result=Math.sin(z);
                   //alert("evasin "+z+"  "+result)
                   break;
        case "tan":z=check(z);
                   result=Math.tan(z);
                   break;
        case "cos":z=check(z);
                   result=Math.cos(z);
                   break;
        case "ln":result=Math.log(z);
                   break;
        case "log":result=Math.log10(z);
                   break;
        case "√":result=Math.sqrt(z);
                   break;
        case "square":result=z*z;
                   break;
        case "π":result=Math.PI;
                   break;
        case "exp":result=Math.exp(z);           
    }
    result=result.toString();
    //alert(typeof(result));
    
    if(result.includes("e"))
    {
        result=result.slice(0,result.indexOf("e"))+"E"+result.slice(result.indexOf("e")+1);
    }
    return result;
}



function check(z){
    const e=$(".side-operators").children();
    const check=e.eq(2).html();
    if(check==="RAD"){
        z=(z*Math.PI)/180;
    }
    return z;
}






////for the sink in answer 
function answerdisplay(){
   let l=document.calc.txt.value.length;
   let y=document.calc.txt.value[l-1];
   if(!isNaN(y)||y==="π"||y==="e"||y==="!")
   {
       let str1=document.calc.txt.value;
       str1=addclosingbracket(str1 );
      //alert("answerdisplay "+str1)
       let str =eva(str1);
       //alert("answerdisplay "+str);
       document.calc.txt1.value=eval(str);
   }else{
       if(l===0){
         document.calc.txt1.value=  document.calc.txt1.value.slice(0,0);
       }
   } 
}






//for side operators showing
function show(){
    $(".side-operators").toggleClass("show");
    $("#lol").toggleClass("arrow");
    
}



function change(){
    const e=$(".side-operators").children();
    const check=e.eq(1).html();
    if(check==="1/2"){
        changetwo();
    }else{
        changeone();
    }
}


function changeone(){
    const e=$(".side-operators").children();
    e.eq(1).html("1/2").css("background","#174ea6 ");
    e.eq(4).attr("onclick","input('sin(')").html("sin");
    e.eq(5).attr("onclick","input('cos(')").html("cos");
    e.eq(6).attr("onclick","input('tan(')").html("tan");
    e.eq(7).attr("onclick","input('ln(')").html("ln");
    e.eq(8).attr("onclick","input('log(')").html("log");
    e.eq(9).attr("onclick","input('√')").html("√");
    
    
}



function changetwo(){
    const e=$(".side-operators").children();
    e.eq(1).html("2/2").css("background-color", "#2f60af");
    e.eq(4).attr("onclick","input('asin(')").html("sin<sup>-1</sup>");
    e.eq(5).attr("onclick","input('acos(')").html("cos<sup>-1</sup>");
    e.eq(6).attr("onclick","input('atan(')").html("tan<sup>-1</sup>");
    e.eq(7).attr("onclick","input('exp(')").html("e<sup>x</sup>");
    e.eq(8).attr("onclick","input('10^')").html("10<sup>x</sup>");
    e.eq(9).attr("onclick","input('^2')").html("x<sup>2</sup>");
    
    
}







function degorrad(){
    const e=$(".side-operators").children();
    const check=e.eq(2).html();
    if(check==="DEG"){
        e.eq(2).html("RAD");
    }else{
        e.eq(2).html("DEG");
    }
    answerdisplay();
}


$(function(){
    $(".numbers div,.operators div").click(function(event) {
        var ripple=$("<span></span>");
        $(event.target).append(ripple);
        let w=$(event.target).css("width");
        let h=$(event.target).css("height");
        
        w=w.slice(0,w.indexOf("px"));
        h=h.slice(0,h.indexOf("px"));
       //alert("w:"+w+"h:"+h)
        let x=w/2+event.target.offsetLeft+"px";
        let y=h/2+event.target.offsetTop+"px";
        //alert(x)
        $(ripple).css({"left": x,"top": y});
        
    });
})

16. By Leul

Made by Leul. Simple JavaScript Calculator. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <input type="text" placeholder="0" id="input" editable="false"/>
            </div>
              <div>
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td><button id="clr">C</button></td>
                    <td><button onclick="put('/')">/</button></td>
                    <td><button onclick="put('*')">&times;</button></td>
                    <td><button id="del"><</button></td>
                </tr>
                <tr>
                    <td><button onclick="put('7')">7</button></td>
                    <td><button onclick="put('8')">8</button></td>
                    <td><button onclick="put('9')">9</button></td>
                    <td><button onclick="put('+')">+</button></td>
                </tr>
                <tr>
                    <td><button onclick="put('4')">4</button></td>
                    <td><button onclick="put('5')">5</button></td>
                    <td><button onclick="put('6')">6</button></td>
                    <td><button onclick="put('-')">-</button></td>
                </tr>
                <tr>
                    <td><button onclick="put('1')">1</button></td>
                    <td><button onclick="put('2')">2</button></td>
                    <td><button onclick="put('3')">3</button></td>
                    <td rowspan="2"><button style="background: #89D" onclick="calc()">=</button></td>
                </tr>
                <tr>
                    <td colspan="2"><button onclick="put('0')">0</button></td>
                    <td><button onclick="put('.')">.</button></td>
                </tr>
            </table>
          </div>
        </div>
    </body>
</html>



------CSS-------


@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

* {
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    margin:0;
    padding:0;
}

body {
    background-color:#111;
    color:#fff;
}

.container {
    width:100vw;
    height:100vh;
    min-width:300px;
    min-height:400px;
}

input {
    box-sizing:border-box;
    width:100%;
    height:20vh;
    min-height:60px;
    margin:0px;
    padding: 1em;
    border:none;
    color:#fff;
    background:#1a1a1a;
    border-bottom:2px solid #8C9;
    text-align:right;
    letter-spacing:3px;
    font-size: 2.3em;
    outline:none;
    font-weight:100;
    text-shadow: 0 0 2px rgba(0,0,0,1);
}

table {
    width:100%;
    height:70vh;
    min-width:300px;
    min-height:300px;
    background:#111;
}

td {
    border: 0.2px solid rgba(200,200,200,0.2);
}


button {
    width:100%;
    height:100%;
    font-size:1.5em;
    border:none;
    background:transparent;
    color:#fff;
    outline-color:rgba(200, 200, 200, 0.8);
}


-----JS------


window.addEventListener("DOMContentLoaded", function() {
    var input = document.getElementById("input");
    document.getElementById("clr").addEventListener("click", function() {
        input.value = null;
    });       
          
                            document.getElementById("del").addEventListener("click", function() {
        var str = input.value;
        input.value = str.slice(0, str.length-1);
    });
})

function put(put) {
    input.value += put;
}

function calc() {
    input.value = eval(input.value)
}

17. By Nor’wester

Made by Nor’wester . Calculator with nice design. ( Source )

<!-- Brought to you by Nor'wester! -->

<!DOCTYPE html>
<html>
    <head>
        <title>Calculator</title>
          <link href="https://fonts.googleapis.com/css?family=Iceberg&display=swap" rel="stylesheet">
          <link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
          <link href="https://fonts.googleapis.com/css?family=Orbitron&display=swap" rel="stylesheet">
    </head>
    <body>
<center><br><br>       
<div id=main><br><i>JavaScript Syntax</i>
<div id=title>Double A C-17</div>

<div id=screen>Brought to you by Nor'wester!</div><div id=ans><br></div>
    
<br>    
<table>    
<tr>
    <td><button onclick="cal('7')">7</button></td>
    <td><button onclick="cal('8')">8</button></td>
    <td><button onclick="cal('9')">9</button></td>
    <td><button onclick="bck()">&#8592;</button></td>
    <td><button onclick="ac()">AC</button></td>
</tr>
<tr>
    <td><button onclick="cal('4')">4</button></td>
    <td><button onclick="cal('5')">5</button></td>
    <td><button onclick="cal('6')">6</button></td>
    <td><button onclick="cal('*')">×</button></td>
    <td><button onclick="cal('/')">÷</button></td>
</tr>
<tr>
    <td><button onclick="cal('1')">1</button></td>
    <td><button onclick="cal('2')">2</button></td>
    <td><button onclick="cal('3')">3</button></td>
    <td><button onclick="cal('+')">+</button></td>
    <td><button onclick="cal('-')">-</button></td>
<tr>
    <td><button onclick="cal('.')">.</button></td>
    <td><button onclick="cal('0')">0</button></td>
    <td><button onclick="brc()">(</button></td>
    <td><button onclick="cal(')')">)</button></td>
    <td><button onclick="eql()">=</button></td>
</tr>
</table>  <br> <br>
  
</div>       
</center>       
       </body>
</html>


------CSS------


body {
    background-color:#dedede;
    background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcScjVMyuTRYaTBRM9X_VFzmNKkvlbnwShBNw_DuFsvoPFY1rT7f");
    background-attachment:fixed;
}

div#screen{
    background-color:#115;
    width:85%;
    padding:10px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    text-align:right;
    color:#efefef;
    font-size:120%;
    font-family:"Iceberg";
    word-wrap:break-word;
}
div#ans{
    background-color:#115;
    width:85%;
    padding:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    text-align:right;
    overflow-y:scroll;
    color:#efefef;
    font-family:"Orbitron";
}

table{
    width:85%;
}
td{
    width:19%;
    min-height:100%;
}    
button{
    width:100%;
    font-size:200%;
    font-weight:bolder;
    padding:10px;
    border-radius:15px;
    outline:none;
    color:#efefef;
    background-color:red;
    border:0;
    box-shadow:inset 3px 3px 5px #FF9999, inset -3px -3px 10px black;
}
button:hover{
    color:white;
    box-shadow: inset -5px -5px 15px black ,inset 5px 5px 5px #EE8888;
}
div#title{
    text-align:left;
    width:85%;
    padding:3px;
}


div#main{
    background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcToIpd0IxWD_bEurrk5BxYZ4X37-Rq_i2KuaJx5AP6wRBRtnbFm");
    background-color:black;
    border-radius:15px;
    color:#efefef;
    font-family:"Sofia", cursive;
    box-shadow:inset 5px 5px 10px #444444, inset -5px -5px 10px black, 8px 8px 10px #333;
}


----JS-----


function vibrate(sec){
    try{navigator.vibrate(sec);}
    catch(err){}
}
var i = "";
var ans = "";            
function cal(a){
    i += a;
    
switch (a) {
    case "*":
    ans += "×";
    break;
    case "/":
    ans += "÷"
    break;
    default:
    ans += a;
    break;
}
    
     document.getElementById("screen").innerHTML = ans;
         vibrate(70);    
}

function bck(){
    i = i.substr(0, i.length-1);
    ans = ans.substr(0, ans.length-1);
    if(i==""){
        ans = "";
        document.getElementById("screen").innerHTML = "<br>";
     document.getElementById("ans").innerHTML = "<br>";   
    } 
    else{
    document.getElementById("screen").innerHTML = ans;
   }  
    vibrate(70);
}

function ac(){
    i = "";
    ans = "";
     document.getElementById("screen").innerHTML = "<br>";
     document.getElementById("ans").innerHTML = "<br>";   
     vibrate(100);
}
function eql(){
   var x = eval(i);
     document.getElementById("ans").innerHTML = x;
     i = "" + x;
     ans = "" + x;
      vibrate(110);   
}

function brc(){
if(i==""){i+="("; ans+="(";}else{
    var lst = i[i.length-1];
    if(lst=="+"||lst=="-"||lst=="*"||lst=="/"||lst=="("){
        i += "(";
        ans+= "(";}
    else{i += "*(";
        ans+= "×(";}
    }

document.getElementById("screen").innerHTML = ans;
         vibrate(70);    
}

18. By addy

Made by Addy. Black and red themed calculator. ( Source )



<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>

<div class="hmm">
    <div class="calc">

        <input id="box" value="" type="text" readonly placeholder="0"><br/>

        <div class="btn-bck">
        <div class="row">
                <button class="btn" onclick="shownum('1')"><strong>1</strong></button>
                <button class="btn" onclick="shownum('2')"><strong>2</strong></button>
                <button class="btn" onclick="shownum('3')"><strong>3</strong></button>
                <button class="btn cbtn" onclick="delback()"><strong>C</strong></button>
        </div>
        <div class="row">
                <button class="btn" onclick="shownum('4')"><strong>4</strong></button>
                <button class="btn" onclick="shownum('5')"><strong>5</strong></button>
                <button class="btn" onclick="shownum('6')"><strong>6</strong></button>
                <button class="btn" onclick="shownum('+')"><strong>+</strong></button>
        </div>
        <div class="row">
                <button class="btn" onclick="shownum('7')"><strong>7</strong></button>
                <button class="btn" onclick="shownum('8')"><strong>8</strong></button>
                <button class="btn" onclick="shownum('9')"><strong>9</strong></button>
                <button class="btn" onclick="shownum('-')"><strong>-</strong></button>
        </div>
        <div class="row">
                <button class="btn" onclick="shownum('.')"><strong>.</strong></button>
                <button class="btn" onclick="shownum('0')"><strong>0</strong></button>
                <button class="btn" onclick="shownum('00')"><strong>00</strong></button>
                <button class="btn" onclick="shownum('*')"><strong>*</strong></button>
                
        </div>
        <div class="row">
                <button class="btn cbtn" onclick="clearme()"><strong>AC</strong></button>
                <button class="btn ansbtn" onclick="solve()"><strong>=</strong></button>
                <button class="btn" onclick="shownum('/')"><strong>/</strong></button>
        </div>    
        </div>
    </div>
</div>
</body>
</html>


------CSS------



h1 {color:black;}

body {
    background:#222;
}

.hmm{
        margin: 0 auto;
        
        }  
.calc {
        padding: 20px;
        background:#222;
        width: 300px;
        border-radius: 20px;  
        
        margin: 10px auto;
        margin-top:10vmin;
        box-shadow:0 0 2vmin 2vmin #333;
        }
#box {
        width:100%; 
        height: 60px; 
        border:1px solid #000; 
        background: white; 
        font-size: 40px; 
        text-align: right;
        color: black;
        margin: 0 auto;
    
        } 
.btn-bck {
        margin: 10px 5px;
        background:transparent ;
}

.btn {
        height: 60px;
        width: 60px;
        padding: 1px; 
        background:transparent; 
        border:2px solid #f00;
        margin: 4.5px; 
        font-size: 15px;    
        border-radius:10px;
        color:#fff;
        outline:none;
        font-size:20px;
}

.btn:hover {
    background-color: #333
}

.ansbtn {
        width:132px;
}
.ansbtn:hover {background-color:red;}

.cbtn {
        background:red; 
}




------JS------



function screen(val)
        {
        document.getElementById("box").value=val;
        }
function shownum(val)   {
        document.getElementById("box").value+=val;
        }

function solve() { 
    try     { 
            screen(eval(document.getElementById("box").value)) 
            } 
    catch(e) {
            screen('err') 
            } 
                 }
function clearme() {
                document.getElementById("box").value = "";
                } 
function delback() {
                var valueNeeded = document.getElementById("box").value;
                var finalValueNeeded = valueNeeded.substr(0, valueNeeded.length-1); 
                document.getElementById("box").value=finalValueNeeded;
                
                }

19. By NiKi

Made by NiKi. A beautiful calculator with three themes that you can switch between. ( Source )

<!--
It is a VERY basic calculator!!
I created the button-click effect with jquery. 
But I also make  button-click effect with CSS, found in the css comment in inactive mode.


UPDATED: 
   👉 ERROR HANDLING 
   👉 MAX INPUT CHARACTER (number, op); you can set the input limit in JS part at line 8.
-->

<!DOCTYPE html>
<html>
	<head>
	       <meta charset="UTF-8"> 
		<title>calculator</title>
		        <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
	             <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
                <link href="https://fonts.googleapis.com/css?family=Rajdhani" rel="stylesheet">


	</head>
	<body>
	    
	   <div class="container">
		<form class="calc" name=calculator>
		    <input class="disp" readonly type=text name=texta value="0"><br> <!--a kijelzőn jobb oldalon jelenjen meg a szám; a screenbe nem tudnak beleírni-->
		    <!--display(backsp.value)"-->
		    <input class="button2" type=button name=clear style="width: 87px;" value=C onclick="cl()">
		    <input class="button2" type=button name=backsp value="<" onclick="backspa()"><!--display(backsp.value)"-->
		   	 <input class="button2" type=button name=add value=+ onclick="display('+')">
		     <input class="button2" type=button name=square value=√ onclick="sqr()"> 
		 <!-- <input class="button" type=button name=square value=√ onclick="display('√')"> -->
		    <br>
		    
		    <input class="button" type=button name=btn7 value=7 onclick="display(7)">
		    <input class="button" type=button name=btn8 value=8 onclick="display(8)">
		    <input class="button" type=button name=btn9 value=9 onclick="display(9)">
		    <input class="button2" type=button name=sub value=- onclick="display('-')">
		    <input class="button2" type=button name=square value=x² onclick="sq()">
		    <br>
		    
		    <input class="button" type=button name=btn4 value=4 onclick="display(4)">
		    <!-- vagy input class="button" type=button name=btn4 value=4 onclick="display(btn4.value)"-->
		    <input class="button" type=button name=btn5 value=5 onclick="display(5)">
		    <input class="button" type=button name=btn6 value=6 onclick="display(6)">
		    <input class="button2" type=button name=mul value=* onclick="display('*')">
		    <input class="button2" type=button name=leftpar value=( onclick="display('(')">
		    <br>
		    
		    <input class="button" type=button name=btn1 value=1 onclick="display(1)">
		    <input class="button" type=button name=btn2 value=2 onclick="display(2)">
		    <input class="button" type=button name=btn3 value=3 onclick="display(3)">
		    <input class="button2" type=button name=divi value="/" onclick="display('/')">
		   <input class="button2" type=button name=leftpar value=) onclick="display(')')">
		    <br>
		    
		    <input class="button" type=button name=btn0 value=0 onclick="display(0)">
		    <input class="button" type=button name=btndot value=. onclick="display('.')">
		    <input class="button" type=button name=negativ value="+/-" onclick="negative()">

		    <input class="button1" type=button name=btnequal value="=" onclick="equal()"><!-- onclick="texta.value=eval(texta.value)" az matek művelet eredményének megjelenítése az egyenlőség jel megnyomásával-->
		    <br>
		    
		</form>
	
	    <div class="dispchange">
	        <div class="dispchange1"></div>
	        <div class="dispchange2"></div>
	        <div class="dispchange3"></div> 
	    </div>
	</div>
	</body>
</html>



-----CSS------


body {
	margin:0;
	padding:0;
	background-color: #eef4f6;
}


.container{ /*absolute center*/
    position:absolute;
    margin:auto;
    width: 242px;
    height:340px; 
    left:0;  
    right:0;
    top:0;
    bottom:0;
    opacity:0.9;
    background:#33334d;/*3d3d5c;*/
    border-radius:20px;
    box-shadow: 14px 12px 10px  #a6a6a6;
    border: 6px #df80ff inset;


}
.disp{
    width:215px;
    margin:10px 0 7px 9px; /*a alul, felül, jobb, bal táv*/
    padding:40px 4px 0 4px;  /*belső magasság*/
    color:white;
    font-size:38px;
    font-family: 'Rajdhani', sans-serif;
    text-align:right;
    background-color:#3d3d5c;
    border-bottom: 1px solid grey;
    border-left:0; border-right:0; border-top:0;
}

/*-------------------------------------*/

/*DISPLAY STYLE CHANGING BUTTON*/
.dispchange{
    position:absolute;
    cursor:pointer;
    padding-left:10px;
    top:10px;
    
}
.dispchange1, .dispchange2, .dispchange3{
    width:20px;
    height:20px;
    border-radius:20px;
    border:1px solid lightblue;
    float:left; /*egymás mellé kerüljenek*/
    margin-right:15px;
}
.dispchange1{
    background:#3d3d5c;
}
.dispchange2{
    background: rgb(238,61,12);
    background: linear-gradient(90deg, rgba(238,61,12,1) 0%, rgba(241,27,178,1) 0%, rgba(223,143,21,1) 99%); 
}
.dispchange3{
    background: rgb(112,100,222);
    background: linear-gradient(90deg, rgba(112,100,222,1) 0%, rgba(144,140,200,1) 0%, rgba(223,52,171,1) 94%);  
}
/*---*/
.dispchange1.active6,
.dispchange2.active6,
.dispchange3.active6{
    border:4px dotted  #4d4d4d;
    animation: move 6s 6;
}
@keyframes move{
   100% { transform: rotate(360deg); } 
}
.disp.active3{
    background:#3d3d5c;
}

.disp.active4{
    background: rgb(238,61,12);
    background: linear-gradient(90deg, rgba(238,61,12,1) 0%, rgba(241,27,178,1) 0%, rgba(223,143,21,1) 99%);
}
.disp.active5{
    background: rgb(112,100,222);
    background: linear-gradient(90deg, rgba(112,100,222,1) 0%, rgba(144,140,200,1) 0%, rgba(223,52,171,1) 94%);  
    color:black;
}
/*-------------------------------------*/
.button, .button2{
    width:39px;
    height:41px;
    margin:2px 3px; /*a buttonok közti táv*/
    cursor:pointer;
    border-radius:8px;
    color:black;
 }

.button{
    box-shadow: 3px 1px 0 white;
    border: 2px solid #737373;/*#a6a6a6;*/ /*#bfbfbf;*//*#808080;*/
    background: rgb(177,176,201);
    background: linear-gradient(90deg, rgba(177,176,201,1) 0%, rgba(190,190,208,1) 20%, rgba(190,85,186,1) 100%); 
    font-family: 'Lobster', cursive;
    font-size:17px;
}

.button2{ /*operators*/
  background: rgb(184,194,221);
    background: linear-gradient(51deg, rgba(184,194,221,1) 0%, rgba(219,108,171,1) 100%, rgba(232,87,15,1) 240%); 
    border: 4px solid #595959 inset;
   box-shadow: 4px 2px 0 #595959;
    font-size:20px;
    font-family:"Comic Sans" ;
    font-weight:bold;
}

.button1{ /*=*/
    width: 88px;
    height:41px;
    background: rgb(180,58,171);
    background: linear-gradient(90deg, rgba(180,58,171,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); opacity: 0.8;
    margin:3px;
    border-radius:10px;
     font-family:"Comic Sans" ;
    font-weight:bold;
    font-size:25px;
    border: 4px solid  #595959 inset;
    box-shadow: 4px 4px 0 #595959;
}

.button:focus {outline:0;} /*remove blue border on chrome, on mobile*/
.button1:focus {outline:0;}
.button2:focus {outline:0;}

/*----------------------------------------*/

/*BUTTON-CLICK EFFECT WITH CSS*/
/*.button:active{
    opacity:0.7;
    background: rgb(241,183,194);
    background: linear-gradient(90deg, rgba(241,183,194,1) 17%, rgba(203,190,195,1) 100%, rgba(241,31,31,1) 100%, rgba(255,243,243,1) 100%); 
    box-shadow: 2px 0 0  #999999;
     transition: background-color .2s;
       border: 2px #f2ccff inset;
}*/
/*operators click effect*/
/*.button2:active{
    opacity:0.7;
    background: rgb(241,183,194);
    background: linear-gradient(90deg, rgba(241,183,194,1) 17%, rgba(203,190,195,1) 100%, rgba(241,31,31,1) 100%, rgba(255,243,243,1) 100%); 
    box-shadow: 2px 0 0  #999999;
    transition: background-color .1s;
    border: 3px #df80ff inset;
}*/


/*-------------------------------------------*/

/*BUTTON-CLICK EFFECT WITH JQUERY*/

input:nth-child(n+8):nth-child(-n+10).active1,  /*from to*/
input:nth-child(n+14):nth-child(-n+16).active1,
input:nth-child(n+20):nth-child(-n+22).active1,
input:nth-child(n+26):nth-child(-n+28).active1{
    opacity:0.9;
    background: rgb(241,183,194);
    background: linear-gradient(90deg, rgba(241,183,194,1) 17%, rgba(203,190,195,1) 100%, rgba(241,31,31,1) 100%, rgba(255,243,243,1) 100%); 
    box-shadow: 2px 0 0  white;
    transition: background-color .1s;
    border: 4px #f2ccff inset;
}

input:nth-child(n+3):nth-child(-n+6).active2, /*3th clear button*/
input:nth-child(n+11):nth-child(-n+12).active2,
input:nth-child(n+17):nth-child(-n+18).active2,
input:nth-child(n+23):nth-child(-n+24).active2,
input:nth-child(29).active2{
     opacity:0.6;
     background: rgb(177,168,218);
    background: linear-gradient(51deg, rgba(177,168,218,1) 37%, rgba(204,119,167,1) 100%, rgba(236,206,234,1) 240%);   
    box-shadow: 2px 0 0 white;
    border: 3px #df80ff inset;
}



-----JS-----


function display(Num){
   	if (calculator.texta.value == "0"){ 
             calculator.texta.value = Num; //ha új számot ütnek be, akkor a 0 íródjon át
    } else{
            calculator.texta.value += Num; //több szám beírható legyen
    }
    
  /*if(calculator.texta.value.length>10){ //👉MAX INPUT CHARACTER👈
  	    	var maxdigit=calculator.texta.value;
  	    	 calculator.texta.value =maxdigit.substring(0,maxdigit.length-1);
  	}*/
}


//----------------------------------	    
function equal(){ //
	var nound= calculator.texta.value;
	if(nound){
		calculator.texta.value=eval(nound);
	}
}
//----------------------------------	    
		   
//backspace
function backspa(){ 
    var bck = calculator.texta.value;
    calculator.texta.value = bck.substring(0,bck.length-1);
}
		   
//negatív jel  
function negative(){ //A parseFloat egy szöveget lebegõpontos számmá kovertál, ha lehetséges
  calculator.texta.value=parseFloat(calculator.texta.value)* -1;
}
//square 
function sq(){
     calculator.texta.value=parseFloat(calculator.texta.value) * parseFloat(calculator.texta.value) ;
}
//sqrt
function sqr(){
  // calculator.texta.value = "√"+calculator.texta.value; 
    calculator.texta.value=Math.sqrt(parseFloat(calculator.texta.value));
}
//törlés
 function cl(){
   calculator.texta.value="0";
}
		    
/*with jquery: $(".buttonC").click(function(){
  $(".disp").val("0");  });*/
		  
//-----------

//error handling
window.onerror = function(){
 calculator.texta.value=calculator.texta.value;
// calculator.texta.value="Ooops!";
};

//-------------------------------

//BUTTON CLICK EFFECT WITH JQUERY    	    
$(document).ready(function() {
     $(":input").click(function(){  //numbers click style
    	    $(":input.active1").removeClass("active1"); 
            $(":input.active2").removeClass("active2");
            $(this).addClass("active1"); 
    });
    $("input:nth-child(n+3):nth-child(-n+6), input:nth-child(n+11):nth-child(-n+12), input:nth-child(n+17):nth-child(-n+18), :input:nth-child(n+23):nth-child(24), :input:nth-child(29)").click(function(){  //operators click style
    	    $(":input.active1").removeClass("active1"); 
            $(":input.active2").removeClass("active2");
            $(this).addClass("active2"); 
    });
    
    //-----------------------
    
     $(".dispchange1").click(function(){
            $(".disp").removeClass("active4");
            $(".disp").removeClass("active5");
            
            $(".dispchange2, .dispchange3").removeClass("active6");
            $(".disp").addClass("active3");
            $(this).addClass("active6");
    });
    
    $(".dispchange2").click(function(){
            $(".disp").removeClass("active3, active5");
            $(".dispchange1, .dispchange3").removeClass("active6");
            $(".disp").addClass("active4");
            $(this).addClass("active6");
    });
    
     $(".dispchange3").click(function(){
            $(".disp").removeClass("active4. active3");
            $(".dispchange1, .dispchange2").removeClass("active6");
            $(".disp").addClass("active5");
            $(this).addClass("active6");

    });

});

//-----------------------------------



/*function display(dis){
	calculator.texta.value=calculator.texta.value+dis;*több szám egymás után megjeleníthető legyen
		    }*/

20. By Slava

Made by Slava. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <input type="text" placeholder="0" id="input" editable="false"/>
            </div>
              <div>
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td><button id="clr">C</button></td>
                    <td><button onclick="put('/')">/</button></td>
                    <td><button onclick="put('*')">&times;</button></td>
                    <td><button id="del">←</button></td>
                </tr>
                <tr>
                    <td><button onclick="put('7')">7</button></td>
                    <td><button onclick="put('8')">8</button></td>
                    <td><button onclick="put('9')">9</button></td>
                    <td><button onclick="put('+')">+</button></td>
                </tr>
                <tr>
                    <td><button onclick="put('4')">4</button></td>
                    <td><button onclick="put('5')">5</button></td>
                    <td><button onclick="put('6')">6</button></td>
                    <td><button onclick="put('-')">-</button></td>
                </tr>
                <tr>
                    <td><button onclick="put('1')">1</button></td>
                    <td><button onclick="put('2')">2</button></td>
                    <td><button onclick="put('3')">3</button></td>
                    <td rowspan="2"><button style="background: #333" onclick="calc()">=</button></td>
                </tr>
                <tr>
                    <td colspan="2"><button onclick="put('0')">0</button></td>
                    <td><button onclick="put('.')">.</button></td>
                </tr>
            </table>
          </div>
        </div>
    </body>
</html>


-----CSS------

* {
    font-family:"Courier New", Courier, monospace;
    margin:0;
}

body {
    background-color:#111;
    color:#fff;
}

.container {
    width:100vw;
    height:100vh;
    min-width:300px;
    min-height:400px;
}

input {
    box-sizing:border-box;
    width:100%;
    height:20vh;
    margin:0px;
    padding: 1em;
    border:none;
    color:#fff;
    background:#111;
    border-bottom:2px solid #FFF;
    text-align:right;
    letter-spacing:3px;
    font-size: 2.3em;
    outline:none;
    font-weight:100;
}

table {
    width:100%;
    height:450px;
    min-width:300px;
    min-height:300px;
    background:#111;
}
button {
    width:100%;
    height:100%;
    font-size:1.5em;
    border:none;
    background:transparent;
    color:#fff;
    outline-color:rgba(200, 200, 200);
}


-----JS------


window.addEventListener("DOMContentLoaded", function() {
    var input = document.getElementById("input");
    document.getElementById("clr").addEventListener("click", function() {
        input.value = null;
    });       
          
                            document.getElementById("del").addEventListener("click", function() {
        var str = input.value;
        input.value = str.slice(0, str.length-1);
    });
})

function put(put) {
    input.value += put;
}

function calc() {
    input.value = eval(input.value)
}

21. By Mohammad

Made by Mohammad. Calculator with simplistic design. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
        <div id="par">
            <div id="result"></div>
            <button onclick="a('/')" id="f">÷</button>
            <button onclick="a('-')" id="f">–</button><br />
            <button onclick="a(1)">1</button>
            <button onclick="a(2)">2</button>
            <button onclick="a(3)">3</button>
            <button onclick="del()">AC</button>
            <br />
            <button onclick="a(4)">4</button>
            <button onclick="a(5)">5</button>
            <button onclick="a(6)">6</button>
            <button onclick="a('*')">×</button>
            <br />
            <button onclick="a(7)">7</button>
            <button onclick="a(8)">8</button>
            <button onclick="a(9)">9</button>
            <button onclick="a('+')">+</button>
            <br />
            <button id="i0" onclick="a(0)">0</button>
            <button onclick="a('.')">.</button>
            <button id="ty" onclick="eq()">=</button>
        </div>
    </body>
</html>




----CSS----

body {
    background-color:#111;
}
#par{
    position:absolute ;
    left:50%;
    top:20%;
    transform:translate(-50%);
    border:3px solid #999;
    padding:20px;
    border-radius:9px;
    background-color:#222;
    height:335px;
    width:255px;
}
button{
    width:50px;
    height:40px;
    margin:10px 5px 5px 5px;
    background-color:#444;
    border:none;
    color:#c0c0c0;
    outline:none;
}
button:hover{
    background-color:#333;
}
#i0{
    width:115px;
    margin:none;
}
#result{
    width:233px;
    height:20px;
    border:3px solid #999;
    border-radius:9px;
    padding:15px 0px 15px 10px;
    color:#c0c0c0;
    margin-bottom:10px;
    display:block;
}
#f{
    width:115px;
}



-----JS------


function a(i){
    var b = $("#result");
    b.append(i);
}
function del(){
    $("#result").empty();
}
function eq(){
    var h = $("#result").text();
    var g = eval(h);
    $("#result").text(g);
}

22. By Sanjay Soni

Made by Sanjay Soni. It has a preloader screen and a on / off switch. ( Source )

<!-- Creator Sanjay Soni
    follow me -
              facebook.com/imsanjaysoni
              github.com/imsanjaysoni
              twitter.com/imsanjaysoni
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        calculator
    </title>
      <meta charset="utf-8">
      <!--google font & ionic iconpacs CND -->

    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!--<link href="https://fonts.googleapis.com/css?family=Supermercado+One|Ubuntu" rel="stylesheet">
-->
    <link href="https://fonts.googleapis.com/css?family=Ubuntu|Wendy+One" rel="stylesheet">
    
    

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


<script type="text/javascript" src="script.js"  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    
</script>

</head>

<body id='body'>

   <button class='setting' id="setting">•••</button>
   
 <div class='settingContainer' id="setting"><button  style='float:right; font-size:14px; width:20px; height:20px; border-radius:50%; text-align:center;' onclick='closeSetting()'>X</button><h2>Settings</h2><br />
  <div><label><span class='title'>Night Mode</span><input type='checkbox' id='check' name='theme'></input><span class='radioContainer'></span></label></div></div>
  
     <div id='splash' class='splash'><h1>Calculator</h1> <div class='lodding'><div class='value'></div></div> </div>
               
    <div class="calculator">

        <input type="text"  class="viewer" id="screen" placeholder="0" disabled style="border:none;   border-radius:5px; font-size: 40px; width:260px; background-color: #ccff90;
 "></input><br>
 

        <button class="option" onclick="onOff()" style="font-size: 16px; width: 60px; height: 26px; background-color: #d32f2f; color: #fff; border-radius: 8px; "  onclick="off()" >Off</button> 

        <button class="option" onclick="clearAll()" style="font-size: 16px; width: 60px; height: 26px;  background-color:#00c853; color: #fff; border-radius: 8px; " >Clear</button>

        <button class="option" onclick="deleteLastNum()" style="font-size: 16px; width: 60px; height: 26px; font-style:bold; background-color:#fdd835; color: #fff; border-radius: 8px; margin-right: 20px;" >&#8592;</button> 


        <button value="7"  onclick="getNumber(7)">7</button>
        <button value="8" onclick="getNumber(8)">8</button>
        <button value="9" onclick="getNumber(9)">9</button>
        <button value="plus" class="oprator" onclick="getOparator('plus')">+</button><br>

        <button value="4" onclick="getNumber(4)">4</button>

        <button value="5" onclick="getNumber(5)">5</button>
        <button value="6" onclick="getNumber(6)">6</button>
        <button value="minus" class="oprator" onclick="getOparator('minus')">&#x2212;</button><br>

        <button value="1" onclick="getNumber(1)">1</button>
        <button value="2" onclick="getNumber(2)">2</button>
        <button value="3" onclick="getNumber(3)">3</button>
        <button value="multiply" class="oprator" onclick="getOparator('multiply')"> &#x00D7;</button>
        <button value="dot" onclick="getNumber('dot')">.</button>
        <button value="0" onclick="getNumber(0)">0</button>
        <button value="plusminus" onclick="getOparator('plusminus')">&#x00B1;</button>
        <button value="division" class="oprator" onclick="getOparator('division')">&#247;</button>


        <button class="equal" style="width: 67%" onclick="calculate()">=</button>
        <button class="oprator" onclick="setBracket()">&#40; &#41;</button><br>

        
    
        <h6 style="color: #9e9e9e; position: absolute; left:40%; letter-spacing:0em;
        
        top:96%; font-size:10px; background:transparent">made with <span style='color:pink; background:none'>&#10084;</span> by Sanjay Soni</h6>

</div>

<a class="bmi" href="https://code.sololearn.com/W6qQ4HbbN6Bl/?ref=app">BMI APP</a>

<script>var screen = document.getElementById("screen");

function splash() {
    var splashContainer = document.getElementById('splash');
    splashContainer.style.display = 'none';
}
setTimeout(splash,4000);


var check =document.getElementById("check");
if(check.checked){
    console.log("chek");
}

</script>
</body>
</html>


-----CSS------



*{
    padding:0;
    margin:5px;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    outline:none;
    
    user-select:none ;

}
body{
    background-color:#333;
    
    
}

.night{
    background-color:blue;
}
button{
    width: 50px;
    height: 45px;
    border:0;
    background-color: #e0e0e0;
    
    color: #333;
    font-size: 28px;
    border-radius: 3px;
    cursor: pointer;
    
outline:none;
}

button:hover{
    background-color: #3f51b5;
    color: #fff;
    
}




.calculator{
    
    font-size: 30px;
    width: 278px;
    height: 410px;
    background-color:#fff;
    border-radius: 10px;
    position:absolute;

    left:50%;
    top:50%;
       transform:translate(-50%,-50%);
    z-index:0;
}


.viewer{
    outline-style:none;
    height: 60px;
    background-color: #fff;
    margin-top:15px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    text-align: right;
    padding-right: 3px;
    border-bottom: 1px silver solid;
    border-width: 1.5px;
    line-height: -.1em;
    padding-bottom: 5px;
}


.oprator:hover{
    background-color: #ee6e73;
}


.equal:hover{
    background-color:#00c853;
}


.splash{
    width:100hw;
    height:100vh;
    background: linear-gradient(180deg, #1CB5E0 0%, #000851 100%);
    color:gold;
    z-index:2;
    position:relative;
    top:0%;
    left:0%;
    color:#fafafa;
    letter-spacing:.04em;
    margin:-10px;
    animation-duration:1s;
    animation-name:dis;
    animation-delay:3s;
    display:;
}


.lodding{
    position:absolute;
    top:52%;
    left:15%;
    width:70%;
    height:6px;
    border-radius:5px;
    background-color:#ddd;
    
}

.lodding .value{
    width:100%;
    margin:0px;
    border-radius:5px;
     background-color:gold;
    height:100%;
    animation-duration:3s;
    animation-name:lodding;
}


@keyframes lodding {
    0% {width: 0%; }
    10% {width:10% }
    25% {width:25%;}
    50%{width:50%;} 
    75% {width:75%;}
    89%{width:89%;}
    96%{width:96%;}
    98%{width:100%;}

    }
    
  @keyframes dis{
     0%{opacity:1;}
     10%{opacity:.9;}
     20%{opacity:.8;}
     30%{opacity:.7;}
     40%{opacity:.6;}
     50%{opacity:.5;}
     60%{opacity:.4;}
     70%{opacity:.3;}
     80%{opacity:.2;}
     90%{opacity:.1;}
     100%{opacity:.0;}
     
     
     
} 

.splash h1{
    position:absolute;
    top:40%;
    left:20%;
    color:#fff;
    font-size:48px;
    font-style:bold;
    
}


.settingContainer{
    width:45%;
    height:50%;
    background-color:#fafafa;
    color:#333;
    border-radius:5px;
    z-index:1;
    position:absolute;
    top:1%;
    left:50%;
    display:inline-block;
    padding:5px;
    box-shadow:-2px 2px 5px #ddd;
    visibility:hidden;
}


.settingContainer input{
    display:none;
}

.settingContainer span{
    display:inline;
    
}


.settingContainer .radioContainer{
    width:32px;
    height:11px;
    border-radius:10px;
    background-color:#ddd;
    display:inline-block;
    border:.5px solid #999;
    position:relative;
    left:0%;
    top:3px;
}

.radioContainer::after{
    content:'';
    position:absolute;
    width:17px;
    height:17px;
    border-radius:50%;
    background-color:#777;
    display:inline;
    top:-3px;
    left:0%;
 
}
    
.settingContainer input:checked + .radioContainer:after{
    left:50%;
    background-color:royalblue;
}

   
.settingContainer input:checked + .radioContainer{
   border-color:royalblue;
  }
  
.title{
    float:left;
}

.setting{
    width:20px;
    height:20px;
    border-radius:50%;
    position:absolute;
    top:1%;
    z-index:1;
    left:91%;
    text-align:center;
    font-size:14px;
    
}

.bmi{
    position:absolute;
    left:100px;
    bottom:20px;
    width:200px;
    height:20px;
    border:1px solid #e74c3c;
    opacity:.5;
    color:#ededed;
    text-decoration:none;
    padding:10px 5px 10px 5px;
    border-radius:5px;
    letter-spacing:0.2em;
}



----JS-----



alert("🔅  If you like please upVote 👍\n\n ✳️ Please also check my BMI calculater app. 😊 ")



var allowDot = true;

function lastIsOperator() {
    if (screen.value[screen.value.length - 1] == '+' |
        screen.value[screen.value.length - 1] == '-' |
        screen.value[screen.value.length - 1] == '*' |
        screen.value[screen.value.length - 1] == '/' |
        screen.value[screen.value.length - 1] == '.') {
            return true;
        } else {
            return false;
        }
        
}


function getNumber(num) {

    switch (num) {
        case 1:
            screen.value += '1';
            break;
        case 2:
            screen.value += '2';
            break;
        case 3:
            screen.value += '3';
            break;
        case 4:
            screen.value += '4';
            break;
        case 5:
            screen.value += '5';
            break;
        case 6:
            screen.value += '6';
            break;
        case 7:
            screen.value += '7';
            break;
        case 8:
            screen.value += '8';
            break;
        case 9:
            screen.value += '9';
            break;

        case 0:
            screen.value += '0';
            break;

        case 'dot':
            if (allowDot & !lastIsOperator()) {
                    
                if (screen.value == '') {
                    screen.value += '0.';
                } else {
                    screen.value += '.';
                }
                
                allowDot = false;
                break;
            }
    }

};


function getOparator(opt) {

    if (!lastIsOperator()) {

        if (screen.value != '') {

            switch (opt) {
                case 'plus':
                    screen.value += '+';
                    break;
                case 'minus':
                    screen.value += '-';
                    break;
                case 'multiply':
                    screen.value += '*';
                    break;
                case 'division':
                    screen.value += '/';
                    break;
            }
        }
        
        allowDot = true;
        
        switch (opt) {
            case 'plusminus':
                screen.value += '-';
                break;
        }

    }
};

function calculate() {

    /*        
       screen.value=  screen.value.replace(/[A-Za-z]/q,"");
       */
    if (screen.value != '') {
        result = eval(screen.value);

        result = parseFloat(result);
        screen.value = result;

    } else {
        result = '0';
    }
    
    allowDot = false;

}


function clearAll() {
    screen.placeholder = '0';
    
    screen.value = '';
    allowDot = true;

};

function onOff() {
    screen.placeholder = '';

    var text = "";
    screen.value = text;
    allowDot = true;
};

function deleteLastNum() {
    var x = screen.value;
    if (x.length > 0) {
        x = x.substring(0, x.length - 1);
        screen.value = x;
    }

};
var i = 0;

function setBracket() {
    if (i == 0) {
        screen.value += '(';
        i = 1;
    } else if (i == 1) {
        screen.value += ')';
        i = 0;

    }
    
}

//document.getElementById("setting").addEventListener("click",changeTheame);

const body = document.querySelector("body");
function changeTheame(){

    body.toggleClass("night");
    alert("w")
}

23. By Guerrero

Made by Guerrero. A Basic JavaScript Calculator. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body align= center>
     <alert>You need to delete your equation <i>Before</i>,you enter your new equation follow AJBScout</alert>
     
   
    
  <meta name="viewport" content="width = device-width ;initial-scale=1.0;"/>  

  
</head>
<body>
<p><h1>Calculator</h1></p>
 
  <input id="boxControl" type="text" value="">
   <p id="result">Result will show in here!</p>

 
  <div>
    <input id="num7" type="button" value="7" onclick="numberClick(this.id)"
   style="width:70px;height:70px";>
    <input id="num8" type="button" value="8" onclick="numberClick(this.id)"
   style="width:70px;height:70px";>
    <input id="num9" type="button" value="9" onclick="numberClick(this.id)"
  style="width:70px;height:70px"; >
    <input id="back" type="button" value="DEL" onclick="deleteNumber()"
   style="width:70px;height:70px";>
  </div>
  <div>
    <input id="num4" type="button" value="4" onclick="numberClick(this.id)"
   style="width:70px;height:70px";>
    <input id="num5" type="button" value="5" onclick="numberClick(this.id)"
   style="width:70px;height:70px";>
    <input id="num6" type="button" value="6" onclick="numberClick(this.id)"
   style="width:70px;height:70px";>
    <input id="add" type="button" value="+" onclick="numberClick(this.id)"
  style="width:70px;height:70px"; >
  </div>
  <div>
    <input id="num1" type="button" value="1" onclick="numberClick(this.id)"
  style="width:70px;height:70px"; >
    <input id="num2" type="button" value="2" onclick="numberClick(this.id)"
  style="width:70px;height:70px"; >
    <input id="num3" type="button" value="3" onclick="numberClick(this.id)"
 style="width:70px;height:70px";  >
    <input id="minus" type="button" value="-" onclick="numberClick(this.id)"
 style="width:70px;height:70px";  >
  </div>
  <div>
    <input id="equal" type="button" value="=" onclick="calculate()"
  style="width:70px;height:70px"; >
    <input id="num0" type="button" value="0" onclick="numberClick(this.id)"
   style="width:70px;height:70px";>
    <input id="divi" type="button" value="/" onclick="numberClick(this.id)"
 style="width:70px;height:70px";  >
    <input id="multi" type="button" value="*" onclick="numberClick(this.id)"
style="width:70px;height:70px";   >
  </div>
</body>
</html>
     
     
</script>
    </body>
</html>


-----CSS------


body {
    background-color:white;
    }
    input{
  width:50%;
  height:65px;
  margin:2px 2px 5px 2px;
  box-shadow:0 0 5px 1px black;
  border-radius:10px;
  background-color:lightgray;

 font-size:22px;
 font-family: 'Allerta Stencil', sans-serif;
}
#boxControl{
  width:99%;
  height:65px;
  font-size:60px;
  margin-left:0px;
  padding-left:0px;
  display:block;
  text-align:justify;
}

#result{
    border-style:solid;
    background-color:orange;
}
#brand{
    font-size:20px;
    font-weight:bold;
}
#brand sub{
    font-weight:lighter ;
    font-size:10px;
}



-----JS------


alert(" me and my firends are having a competition,    @ajbscout      @emperorbob      check out their codes, this is my entry and up vote your favorite☺👍the one with the most upvotes win!")



window.onload = function() {
    box=document.getElementById("boxControl");
}

function calculate(){
  x=document.getElementById("result");
  var endNum=box.value.slice(box.value.length-1);
  try {
  if (checkDivideZero(box.value)=="Valid") {
       while (checkNumberValid(endNum)!=="Number"){
         box.value=box.value.slice(0,box.value.length-1);
         endNum=box.value.slice(box.value.length-1);
         }
     x.style.fontSize="30px;"
     x.innerHTML= eval(box.value);
  }else {
    
      x.innerHTML=" 0";
  }
  }
 catch (e) {
     
     }
 
}

function numberClick(itsID){
 var addNumber=document.getElementById(itsID);
  box.value+=addNumber.value;
  changeFontsize(box.value.length);
  }
function changeFontsize(displayLength){
    switch (displayLength){
    
      case 10: box.style.fontSize="50px";break;
      case 15: box.style.fontSize="40px";break;
      case 20: box.style.fontSize="30px";break;
      case 25: box.style.fontSize="20px";break;
      case 30: box.style.fontSize="15px";break;
    }
}
function deleteNumber(){
  var textF= box.value;
  var textE= textF.slice(0,textF.length - 1 );
  box.value= textE;
  changeFontsize(box.value.length);
}
function checkNumberValid(endNumber){
  
  var vReturn;
  switch (endNumber){
      case "0":
      case "1":
      case "2":
      case "3":
      case "4":
      case "5":
      case "6":
      case "7":
      case "8":
      case "9":
      vReturn= "Number";
      break;
      default :
      vReturn= "NaN";
  }
  return vReturn;
}
function checkDivideZero(textInput){
   if (textInput.slice(textInput.indexOf("/")+1,textInput.indexOf("/")+2)=="0") {
       return "notValid";
   } else{
       return "Valid";
   }
    
}

24. By AteFish

Made by AteFish. ( Source )

<!--
    Made By AteFish[DARK MODE] UPDATED
    
    Helped by Nasif Al Araf
    
    First HTML CSS JS combined code.I know there are lot of bugs but I am learning and one day I will be able to fix those
    And if the design of bootstrap isn't working your phone may have lower version of browser.its also a problem.Any Suggestions are welcome.

-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AteCalculator</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div class="calculator">
        <form action="" id="form">
            <input id="input" type="text" class="form-control main-bar" name="display" value="" placeholder="0" readonly="">
            
            
            <div class="button-area">
                <div class="line">
                <button type="button" name="btn" value="0" class="btn btn-outline-light" onclick="calculate(this.value)">0</button>
                <button type="button" name="btn" value="1" class="btn btn-outline-light" onclick="calculate(this.value)">1</button>
                <button type="button" name="btn" value="2" class="btn btn-outline-light" onclick="calculate(this.value)">2</button>
                <button type="button" name="btn" value="+" class="btn btn-outline-success" onclick="calculate(this.value)">+</button>
            </div>



                <div class="line mt-4">
                <button type="button" name="btn" value="3" class="btn btn-outline-light" onclick="calculate(this.value)">3</button>
                <button type="button" name="btn" value="4" class="btn btn-outline-light" onclick="calculate(this.value)">4</button>
                <button type="button" name="btn" value="5" class="btn btn-outline-light" onclick="calculate(this.value)">5</button>
                <button type="button" name="btn" value="-" class="btn btn-outline-success" onclick="calculate(this.value)">-</button>
            </div>



                <div class="line mt-4">
                <button type="button" name="btn" value="6" class="btn btn-outline-light" onclick="calculate(this.value)">6</button>
                <button type="button" name="btn" value="7" class="btn btn-outline-light" onclick="calculate(this.value)">7</button>
                <button type="button" name="btn" value="8" class="btn btn-outline-light" onclick="calculate(this.value)">8</button>
                <button type="button" name="btn" value="*" class="btn btn-outline-success" onclick="calculate(this.value)">*</button>
                </div>

                <div class="line mt-4">
                <button type="button" name="btn" value="9" class="btn btn-outline-light"onclick="calculate(this.value)">9</button>
                <button id="answer" type="button" name="btn" value="=" class="btn btn-outline-success" onclick="evol();">=</button>
                <button type="button" name="btn" value="" class="btn btn-outline-success" onclick="display.value=null">C</button>
                <button type="button" name="btn" value="/" class="btn btn-outline-success" onclick="calculate(this.value)">/</button>
                <button type="button" name="btn" value="." class="btn btn-outline-success mt-2" onclick="calculate(this.value)">.</button>

            </div>
            </div>
            </form>
            </div>
            <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>




----CSS-----




body{
    background-color:white;
}
.calculator{
    height: 370px;
    width: 300px;
    background-color: #232B2B;
    margin:auto;
    margin-top:20px;
    padding: 10px;
    border-radius: 20px;
    box-shadow:0 0 10px 5px;
}

.calculator:hover{
transition-duration:0.5s;
    box-shadow:0 0 15px 10px;
}
.main-bar{
    text-align: right;
    border-bottom: none;
    outline: none;
    font-size: 100%;
    height: 60px;
    margin-bottom: 20px;
}
.btn{
    font-size: 100%;
    cursor: pointer;
    width: 65px;
}
.main2{
    border: none;
    color: green;
    margin-bottom: 10px;
    text-align: right;
}



-----JS------


function calculate(x){
        form.display.value=form.display.value+x;
}
function evol(){
    try{
        form.display.value=eval(form.display.value);
    }
    catch(err){
            form.display.value="wrong input :(";
    }
}
function sell(){
    try{
        from.display.value=eval(form.display.value);
        throw 1;
    }
    catch(err){
        form.display.value="Wrong Input :(";
    }
}

25. By Darkness

Made by Darkness. Calculator with a clear button for clearing the screen. ( Source )

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  
<div class="calc">
  <div class="calc-title">
    <span class="calc-title-span">
      Calculator
    </span>
    <div class="calc-title-hr"></div>
  </div>
  <div class="calc-display">
    <div class="calc-display-span secondary-display" id="secondary-display">
    </div>
    <div class="calc-display-span primary-display" id="display">
    </div>
  </div>
  <div class="calc-display-hr"></div>
  <div class="calc-btn" id="btn">
    <button class="calc-btn-primary" id="seven">7</button>
    <button class="calc-btn-primary" id="eight">8</button>
    <button class="calc-btn-primary" id="nine">9</button>
    <button class="calc-btn-primary btn-bg" id="divide">/</button>
    <button class="calc-btn-primary" id="four">4</button>
    <button class="calc-btn-primary" id="five">5</button>
    <button class="calc-btn-primary" id="six">6</button>
    <button class="calc-btn-primary btn-bg" id="multiply">*</button>
    <button class="calc-btn-primary" id="one">1</button>
    <button class="calc-btn-primary" id="two">2</button>
    <button class="calc-btn-primary" id="three">3</button>
    <button class="calc-btn-primary btn-bg" id="add">+</button>
    <button class="calc-btn-primary btn-bg" id="decimal">.</button>
    <button class="calc-btn-primary" id="zero">0</button>
    <button class="calc-btn-primary btn-bg-equal" id="equals">=</button>
    <button class="calc-btn-primary btn-bg" id="subtract">-</button>
    <button class="calc-btn-clear" id="clear">clear</button>
  </div>
</div>

</body>
</html> 


------CSS-------



 @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900');
body {
  width : 100%;
  height : 750px;
  display: flex;
  flex-direction : column;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  background-color: #ebedef;
  padding: 0;
  margin: 0;
}

.calc {
  display: flex;
  flex-direction : column;
  width: 330px;
  height: 600px;
  margin : 10px;
  background-color: #000000;
  background-image: linear-gradient(315deg, #000000 0%, #414141 104%);
  border-radius: 20px;
  box-shadow : 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.calc-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 40px;
  align-items: center;
}

.calc-title-span {
  color: #fb7454;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 700;
  line-height: 20px;
}

.calc-title-hr {
  width: 200px;
  height: 3px;
  background-color: #fb7454;
  opacity: 0.8;
}

.calc-display {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100px;
  color: #fff; 
}


.secondary-display{
  font-size:20px;
  opacity : 0.8;
  overflow-x : hidden;
}
/* ScrollBar Style*/
.secondary-display::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
.secondary-display::-webkit-scrollbar {
  height : 4px;
    background-color: #bdbdbd;
  opacity: 0.7;
}
.secondary-display::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #000000;
      border: 3px solid #555555;
}

.primary-display::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
.primary-display::-webkit-scrollbar {
  height : 4px;
    background-color: #bdbdbd;
  opacity: 0.7;
}
.primary-display::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #000000;
      border: 3px solid #555555;
}

.calc-display-hr {
  width: 250px;
  height: 2px;
  margin-top: 10px;
  align-self: center;
  background-color: #bdbdbd;
  opacity: 0.4;
}

.calc-btn {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 20px;
}

.calc-btn-primary {
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  margin: 10px 5px;
  outline: none;
  border: none;
  background-color: transparent;
  color: #fff;
  font-size: 30px;
  width: 60px;
  height: 60px;
  border: 2px solid #616161;
  border-radius: 100%;
}

.btn-bg{
  background-color:#424242 !important;
  opacity : 0.9;
  border : none !important;
}
.btn-bg-equal{
  background-color:#ff7555 !important;
  border : none !important;
}
.calc-btn-primary:focus {
  outline:none
}
.calc-btn-primary:active {
  transform: scale(0.9);
}

.calc-btn-clear {
  margin: 20px 5px;
  outline: none;
  border: none;
  background-color: transparent;
  color: #fff;
  font-size: 30px;
  padding: 10px 90px;
  border: 3px solid #ff7555;
  border-radius: 10px;
}
.calc-btn-clear:active {
  transform: scale(0.9);
}


------JS-------


console.clear();
const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");
let currentString = '';
let resultString = '';
let evalResult;
let lastOperator = false;
const primaryRender = (value) => {
  primaryDisplay.innerText = value;
}

const secondaryRender = (value) => {
  secondaryDisplay.innerText = value;
}
secondaryRender('0');
primaryRender('0');

const evaluate = (e) => {
  let width = secondaryDisplay.scrollWidth;
  if(width > 310){
    secondaryDisplay.style.overflowX = 'scroll';
    secondaryDisplay.scrollLeft = width;
  }
  else{
    secondaryDisplay.style.overflowX = 'hidden';
  }
  
  let value = e.target.innerText;
  if (value >= '0' && value <= '9') {
    let len = currentString.length;
    let lastOp = isOp(currentString[len - 1]);
    if (lastOperator) {
      currentString = currentString.concat(value);
      resultString = "".concat(value);
      secondaryRender(currentString);
      primaryRender(resultString);
      lastOperator = false;
    } else {
      currentString = currentString.concat(value);
      resultString = resultString.concat(value);
      secondaryRender(currentString);
      primaryRender(resultString);
    }

  } else if (isOp(value)) {
    if (currentString.length == 0 && (value == '/' || value == '*'));
    else {
      resultString = "";
      primaryRender(value);
      lastOperator = true;
      let len = currentString.length;
      let lastOp = isOp(currentString[len - 1]);
      if (lastOp) {
        currentString = currentString.substr(0, len - 1) + value;
        console.log(currentString);
        secondaryRender(currentString);
        decimal = false;
      } else {
        currentString = currentString.concat(value);
        secondaryRender(currentString);
      }
    }

  } else if (value == '.') {
    if (resultString.indexOf('.') < 0) {
      if (resultString.length == 0) {
        currentString = currentString.concat('0.');
        resultString = resultString.concat('0.');
        secondaryRender(currentString);
        primaryRender(resultString);
      } else {
        currentString = currentString.concat(value);
        resultString = resultString.concat(value);
        secondaryRender(currentString);
        primaryRender(resultString);
      }
    }
  } else if (value == '=') {
    secondaryDisplay.style.overflowX = 'hidden';
    
    if (currentString.length == 0);
    else {
      let result = eval(currentString);
      resultString = '';
      currentString = '';
      secondaryRender('0');
      primaryRender(result);
    }
  } else if (value == 'clear') {
    currentString = '';
    resultString = '';
    secondaryRender('0');
    primaryRender('0');
  }
    let width1 = primaryDisplay.scrollWidth;
    if(width1 > 310){
      primaryDisplay.style.overflowX = 'scroll';
    }
    else{
      primaryDisplay.style.overflowX = 'hidden';
    }
}


//Adding Event Listener to all buttons
for (let elem of btns.children) {
  elem.addEventListener('click', evaluate);
}

function isOp(value) {
  return (/\+|\-|\*|\//).test(value);
}

26. By TOLUENE

Made by TOLUENE. White and blue themed calculator. ( Source )

<!--
Md sayed
after half a year made a web code . it isn't responsive
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="display">
        <span class="input"></span>
            <span class="output"></span>
        </div>
        <div class="button">
        <div class="number" onclick="cc()">c</div>
        <div class="number a">/</div>
        <div class="number a">*</div>
        <div class="number" onclick="del()">del</div>
        <div class="number a">7</div>
        <div class="number a">8</div>
        <div class="number a">9</div>
        <div class="number a">-</div>
        <div class="number a">4</div>
        <div class="number a">5</div>
        <div class="number a">6</div>
        <div class="number a">+</div>
        <div class="number a">1</div>
        <div class="number a">2</div>
        <div class="number a">3</div>
        <div class="number height" onclick="ans()">=</div>
        <div class="number width a">0</div>
        <div class="number a">.</div>
        </div>
    </body>
</html>


------CSS-------



div.display .input{
    font-size:40px;
    display:block;
    text-align:right;
}
div.display .output{
    font-size:40px;
    display:block;
    position:absolute;
    bottom:-10px;
    text-align:right;
    right:0;
}
div.display{
    max-width:500px;
    height:100px;
    background-color:#263238;
    position:relative;
    top:0px;
    color:#fff;
    margin:10px;
}
div.button{
    max-width:500px;
    position:relative;
    padding:10px;
    box-sizing:border-box ;
    height:400px;
    margin-top:20px;
}
div.number{
    box-sizing:border-box;
    width:80px;
    display:inline-block ;
    background-color:#20c2ff;
    color:rgba(255,255,255,.8);
    height:45px;
    border:1px solid #ddd;
    border-collapse:collapse;
    margin:auto;
    padding:10px;
    text-align:center;
    font-size:25px;
    position:absolute ;
    margin-left:10px;
    
}
div.number:nth-child(1){
    top:10px;
    left:0;
}
div.number:nth-child(2){
    top:10px;
    left:80px;
}
div.number:nth-child(3){
    top:10px;
    left:160px;
}

div.number:nth-child(4){
    top:10px;
    left:240px;
}
div.number:nth-child(5){
    top:55px;
    left:0;
}
div.number:nth-child(6){
    top:55px;
    left:80px;
}

div.number:nth-child(7){
    top:55px;
    left:160px;
}
div.number:nth-child(8){
    top:55px;
    left:240px;
}
div.number:nth-child(9){
    top:100px;
    left:0;
}

div.number:nth-child(10){
    top:100px;
    left:80px;
}
div.number:nth-child(11){
    top:100px;
    left:160px;
}
div.number:nth-child(12){
    top:100px;
    left:240px;
}
div.number:nth-child(13){
    top:145px;
    left:0;
}

div.number:nth-child(14){
    top:145px;
    left:80px;
}
div.number:nth-child(15){
    top:145px;
    left:160px;
}
div.number:nth-child(16){
    top:145px;
    left:240px;
}
div.number:nth-child(17){
    top:190px;
    left:0;
}

div.number:nth-child(18){
    top:190px;
    left:160px;
}



.number:hover{
    background-color:rgba(255,255,255,.5);
    color:#000;
    
}
div.width{
    width:164px;
}
div.height{
 height:90px;

}


----JS-----


var inp= document.querySelector(".input");
var out= document.querySelector(".output");
var num = document.getElementsByClassName("a");
for(let i=0;i<num.length;i++){
num[i].addEventListener("click",function(){inp.innerHTML+=this.innerHTML})
}
function cc(){
    inp.innerHTML ="";
}
function ans(){
out.innerHTML=eval(inp.innerHTML);
out.style.bottom=0;
cc();
}
function del(){
    inp.innerHTML = inp.innerHTML.substring(0,inp.innerHTML.length-1);
}

27. By Aɴᴋᴜsʜ

Made by Aɴᴋᴜsʜ. ( Source )

<!DOCTYPE html>
<html>
    <title>Calculator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <head>
    </head>
    <body>
        <div id="calculator">
            <div id="display">
                <div id="result"></div>
            </div>
            <div id="keys">
            <input type="button" value="1" id="press1" class="btns">
            <input type="button" value="2" id="press2" class="btns">
            <input type="button" value="3" id="press3" class="btns">
            <input type="button" value="+" id="add" class="btns">
            <input type="button" value="4" id="press4" class="btns">
            <input type="button" value="5" id="press5" class="btns">
            <input type="button" value="6" id="press6" class="btns">
            <input type="button" value="-" id="subtract" class="btns">
            <input type="button" value="7" id="press7" class="btns">
            <input type="button" value="8" id="press8" class="btns">
            <input type="button" value="9" id="press9" class="btns">
            <input type="button" value="&#215;" id="multiply" class="btns">
            <input type="button" value="00" id="press00" class="btns">
            <input type="button" value="&#247;" id="divide" class="btns">
            <input type="button" value="C" id="clear" class="btns">
            <input type="button" value="0" id="press0" class="btns"><br>
            <input type="button" value="=" id="equal" class="btns">
            <input type="button" value="." id="dot" class="btns">
            </div>
        </div>
      
    </body>
</html>



-----CSS-----


*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body
{
    display: grid;
    place-items: center;
    height: 100vh;
    background:gray;
}
#calculator
{
    height: 440px;
    width: 300px;
    background: #efecec;
    box-shadow: 1px -1px 2px #ff98006d, -1px 1px 2px #28d7006d;
    position: relative;
    overflow: hidden;
}
#display
{
    height: 90px;
    width: 300px;
    background: rgb(6 6 6 / 5%);
}
#result
{
    height: 90px;
    width: 300px;
    padding: 0px 20px;
    display: flex;
    align-items: center;
    font-size: 25px;
    color: #000;
    font-weight: 500;
}
#keys
{
    margin: 10px 0px 0px 0px;
    height: 300px;
    width: 300px;
    padding: 0px 15px;
}
.btns
{
    height: 58px;
    width: 58px;
    color: #000;
    background: rgb(6 6 6 / 5%);
    margin: 0px 6px 10px 0px;
    font-size: 22px;
    border-radius: 50%;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.2s;
}
.btns:hover
{
    background: rgb(6 6 6 / 30%);
}
#clear
{
    height: 126px;
    position: absolute;
    bottom: 9px;
    right: 18px;
    border-radius: 70px;
    background: #28d7007d;
    transition: 0.2s;
}
#clear:hover
{
    background: #28d700b2;
}
#equal
{
    width: 126px;
    border-radius: 70px;
    background: #ff98006b;
    transition: 0.2s;
}
#equal:hover
{
    background: #ff9800a6;
}



----JS-----


window.onload=function(){
let result = document.querySelector("#result");

document.querySelector("#press1").addEventListener("click",()=>{
    result.innerText += "1";
});
document.querySelector("#press2").addEventListener("click",()=>{
    result.innerText += "2";   
});
document.querySelector("#press3").addEventListener("click",()=>{
    result.innerText += "3"; 
});
document.querySelector("#press4").addEventListener("click",()=>{
    result.innerText += "4"; 
});
document.querySelector("#press5").addEventListener("click",()=>{
    result.innerText += "5";  
});
document.querySelector("#press6").addEventListener("click",()=>{
    result.innerText += "6"; 
});
document.querySelector("#press7").addEventListener("click",()=>{
    result.innerText += "7";  
});
document.querySelector("#press8").addEventListener("click",()=>{
    result.innerText += "8";  
});
document.querySelector("#press9").addEventListener("click",()=>{
    result.innerText += "9";  
});
document.querySelector("#press0").addEventListener("click",()=>{
    result.innerText += "0";  
});
document.querySelector("#press00").addEventListener("click",()=>{
    result.innerText += "00";  
});
document.querySelector("#dot").addEventListener("click",()=>{
    result.innerText += "."; 
});
document.querySelector("#add").addEventListener("click",()=>{
    result.innerText += "+";  
});
document.querySelector("#subtract").addEventListener("click",()=>{
    result.innerText += "-";  
});
document.querySelector("#multiply").addEventListener("click",()=>{
    result.innerText += "*";  
});
document.querySelector("#divide").addEventListener("click",()=>{
    result.innerText += "/"; 
});
document.querySelector("#clear").addEventListener("click",()=>{
    result.innerText = "";  
});
document.querySelector("#equal").addEventListener("click",()=>{
    if(result.innerText === ""){
        alert("Please Enter Any Value To Calculate");
    }
    else
        {
            result.innerText = eval(result.innerText);
        }
              });
}

28. By Madhav

Made by Madhav. ( Source )

<!DOCTYPE html>
<html>
    <head>
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
    
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
             
        
    <title>Simple Calculator</title>
    
    </head>
    
    <body>
   
    <!-- Container  --> 
    <div id="container">
        
        <div id="output" >
        <div id="output1" ></div>     
        <div id="output2" ></div>
        </div>
        
         <!-- Keypad  -->
         <div id="keypad" >
          
          <div class="set">
              
           <button type="text" id="back" class="button" onclick="back()"><i class="fas fa-backspace"></i></button>
          <button type="text" id="operators" class="button" onclick="view('*')"><i class="fas fa-times"></i></button>
           <button type="text" id="operators" class="button" onclick="view('/')"><i class="fas fa-divide"></i></button>
            <button type="text" id="operators" class="button" onclick="view('+')"><i class="fas fa-plus"></i></button>   
          </div>
          
          <div class="set">
              
           <button type="number" id="numbers" class="button" onclick="view(7)">7</button>
          <button type="number" id="numbers" class="button" onclick="view(8)">8</button>
           <button type="number" id="numbers" class="button" onclick="view(9)">9</button>
            <button type="text" id="operators" class="button" onclick="view('-')"><big><b>-</b></big></button>   
          </div>
          
          <div class="set">
              
           <button type="number" id="numbers" class="button" onclick="view(4)">4</button>
          <button type="number" id="numbers" class="button" onclick="view(5)">5</button>
           <button type="text" id="numbers" class="button" onclick="view(6)">6</button>
            <button type="number" id="operators" class="button" onclick="view('%')"><b><i class="fas fa-percent"></i></b></button>   
          </div>
          
          <div class="set">
              
           <button type="number" id="numbers" class="button" onclick="view(1)">1</button>
          <button type="number" id="numbers" class="button" onclick="view(2)">2</button>
           <button type="number" id="numbers" class="button" onclick="view(3)">3</button>
            <button type="text" id="equal" onclick="eq()"><i class="fas fa-equals"></i></button>
          </div>
          
          
          <div class="set">
           <button type="text" id="Snumber" class="button" onclick="view('.')">.</button>
          <button type="number" id="numbers" class="button" onclick="view(0)">0</button>
           <button type="text" id="Snumber" class="button" onclick="clr()">C</button>
            
          </div>
          
         
             
         </div>
    </div>
   
    
    </body>
</html>



----CSS----


body 
{
    margin:0; padding:5px;
    background-color:#efefef;
    user-select:none;
}

#container
{   display:block;
    position:relative  ;
    background-color:#fff;
    width:285px; height:auto;
    top:0;  left:0;
    margin:auto;
    margin-top:15px;
    border-radius:10px;
    box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.3);
    padding:5px;
}

#output
{
    display:block ;
    position:relative  ;
    background-image:-webkit-linear-gradient(left,#EECDA3,#EF629F);
    width:80%; height:80px;
    margin:5%;
    border-radius:10px;
    padding:5%;
    text-align:right;
    user-select:auto;
}
#output1
{
    color:gray; font-size:17px;
    margin-top:20px;
}
#output2
{
    color:white; font-size:28px;
    overflow:auto;
}

#keypad
{
    display:block ;
    position:relative  ;
    width:90%; height:65%;
    margin:5%;
    border-radius:10px;
}

.set
{
    display:block; position:relative;
}

.button
{
    display:inline-block ;
    position:relative ;
    height:50px; width:50px;
    border-radius:50%;
    margin:5px;
    border:none; outline:none;
    transistion:.15s;
    font-size:20px;
}
.button:active
{
    transform:scale(0.8);
}

#equal
{
    display:inline-block  ;
    position:absolute;
    height:112px; width:50px;
    border-radius:30px;
    margin:7px auto 5px 12px;
    border:none; outline:none;
    transistion:.15s; 
    background-color:tomato;
    color:white;
    z-index:2;
}
#equal:active
{
    transform:scale(0.8);
}

#operators,#back
{
    background-color:#03346C;
    color:white;
    font-size:18px;
    padding-top:3px;
}
#back
{
    padding-top:5px;
    padding-right:7px;
}
#numbers
{
    background-color:pink;
    color:black;
}
#Snumber
{
    background-color:white;
    color:black;
    border:2px solid pink;
}


----JS-----


//Global value
var value = " " ; 

//function to assign values
function view(input)
{
  input=String(input);  value+=input;
   document.getElementById("output2").innerHTML = value ;
   
}

//To clear everything on output display
function clr()
{
    document.getElementById("output2").innerHTML = "" ;
document.getElementById("output1").innerHTML = "" ;    

      value = " ";
}

//To cancel last digit
function back()
{
value=String(value);

if(value.length-1==0||value=="INVALID"||value=="undefined"||value=="Infinity")
{    clr();     }
else
{
value =value.substring(0,value.length-1);
}   
    document.getElementById("output2").innerHTML = value ;
    
}

//To evaluate
function eq()
{ 

var len = value.length-1;
 document.getElementById("output1").innerHTML = value ;

//to catch any error
try 
{    value = String(eval(value)) ;    }
catch(e) 
{    value = "INVALID";    }  
 

//To show output 
document.getElementById("output2").innerHTML = value ;
   
}

29. By Spl

Made by Spl. ( Source )

<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body>
<div class=title>Calculator</div>
<table border="1">
<tr>
<td colspan="3"><input type="text" id="result"/></td>
<!--clr() function to clear all values-->
<td><input type="button" value="c" onclick="clr()"/></td>
</tr>
<tr>
<!--create button and assignvalues to button-->
<!--dis() will call function to display value-->
<td><input type="button" value="1" onclick="dis('1')"/></td>
<td><input type="button" value="2" onclick="dis('2')"/></td>
<td><input type="button" value="3" onclick="dis('3')"/></td>
<td><input type="button" value="/" onclick="dis('/')"/></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="dis('4')"/></td>
<td><input type="button" value="5" onclick="dis('5')"/></td>
<td><input type="button" value="6" onclick="dis('6')"/></td>
<td><input type="button" value="-" onclick="dis('-')"/></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="dis('7')"/></td>
<td><input type="button" value="8" onclick="dis('8')"/></td>
<td><input type="button" value="9" onclick="dis('9')"/></td>
<td><input type="button" value="+" onclick="dis('+')"/></td>
</tr>
<tr>
<td><input type="button" value="." onclick="dis('.')"/></td>
<td><input type="button" value="0" onclick="dis('0')"/></td>
<!--solve function to call solve and evaluate value-->
<td><input type="button" value="=" onclick="solve()"/></td>
<td><input type="button" value="*" onclick="dis('*')"/></td>
</tr>
</table>
</body>
</html>



-----CSS------



     .title{
         margin-bottom:10px;
         text-align:center;
         width:222px;
         color:blue;
         border:solid black 2px;
         background-color:lightyellow;
     }
     input[type="button"]
     {
         background-color:lightblue;
         width:100%;
         color:blue;
         border:solid black 2px;
     }
     input[type="button"]
     {
        //background-color:white;
         width:100%;
         border:solid black 2px;
     }


-----JS-----



//function to display value
function dis(val)
{
      document.getElementById("result").value+=val
 }
//function to evaluates the digit and return result
function solve()
{
let x = document.getElementById("result").value   

let y = eval(x)
document.getElementById("result").value=y
 }
//function to clear the display
function clr()
{
document.getElementById("result").value=""
 }

30. By Ayush

Made by Ayush. ( Source )

<!-- A web code for a normal calculator with all the functions
       Author = Ayush 
       Created on = 4th march 2020
       Subject = Calculator 
       Special thanks to AJ #level 20End game and 
       RK 8 for their help.
       -->
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
     <center>
     <div class="calc">
     <p id="all"></p>
     <br><br>
     <button onclick="ak()" style="background-color:red;">INFO</button>
     <button onclick="del()" id="del">DEL</button>
     <button onclick="ac()" id="del">AC</button>
     <button onclick="aper()" id="sy">%</button>
     <br>
     <button onclick="a7()" id="num">7</button>
     <button onclick="a8()" id="num">8</button>
     <button onclick="a9()" id="num">9</button>
     <button onclick="add()" id="sy">+</button>
     <br>
     <button onclick="a4()" id="num">4</button>
     <button onclick="a5()" id="num">5</button>
     <button onclick="a6()" id="num">6</button>
     <button onclick="multiply()" id="sy">×</button>
     <br>
     <button onclick="a1()" id="num">1</button>
     <button onclick="a2()" id="num">2</button>
     <button onclick="a3()" id="num">3</button>
     <button onclick="subtract()" id="sy">-</button>
     <br>
     <button onclick="dot()" id="ks">•</button>
     <button onclick="a0()" id="num">0</button>
     <button onclick="equal()" id="ks">=</button>
     <button onclick="divide()" id="sy">÷</button>
     </center>
     <div class="copy">2020&copy Ayush blog all right reserved</div>
     </div>
    </body>
</html>


-----CSS------


body {
    background-color:green;
}
.calc{
    border-style:solid;
    height:450px;
    width:100%;
    border-radius:10px;
    background-color:purple;
}


#del{
    background-color:orange;
}
p{
    height:60px;
    width:85%;
    background-color:gray;
    overflow-x:scroll;
    font-size:15px;
    font-weight:bold;
    font-family:cursive;
}
button{
    height:50px;
    width:60px;
    margin:6px;
    border-radius:2px;
    color:blue;
    font-weight:bolder;
    font-size:12px;
}
#num{
    background-color:pink;
}
#ks{
    background-color:lightgreen;
}
#sy{
    background-color:skyblue;
}
.copy{
    margin-top:30px;
    font-size:2px;
    text-align:right ;
}


----JS-----


/* Javascript code goes here */


var arr = [];

function del(){
    arr.splice(-1,1);//cut last digit 
    total();//sends the value to p after cutting last degit
}
function ac(){
    document.getElementById("all").innerHTML="";
    arr = new Array ;//clear Array along with p
}
function aper(){
    var b1 = "%";
    arr.push(b1);
    total();
}
function ak(){
    document.getElementById("all").innerHTML="Hi guys this is my new web project . which is a simple calculator. I hope that you may all love it.";
}
function a1(){
    var b1 = "1";
    arr.push(b1);
    total();
}
function a2(){
    var b1 = "2";
    arr.push(b1)
    total();
}
function a3(){
    var b1 = "3";
    arr.push(b1);
    total();
}
function a4(){
    var b1 = "4";
    arr.push(b1);
    total();
}
function a5(){
    var b1 = "5";
    arr.push(b1);
    total();
}
function a6(){
    var b1 = "6";
    arr.push(b1);
    total();
}
function a7(){
    var b1 = "7";
    arr.push(b1);
    total();
}
function a8(){
    var b1 = "8";
    arr.push(b1);
    total();
}
function a9(){
    var b1 = "9";
    arr.push(b1);
    total();
}
function a0(){
    var b1 = "0";
    arr.push(b1);
    total();
}
function dot(){
    var b1 = ".";
    arr.push(b1);
    total();
}
function add(){
    var b1 = "+";
    arr.push(b1);
    total();
}
function multiply(){
    var b1 = "*";
    arr.push(b1);
    total();
}
function divide(){
    var b1 = "/";
    arr.push(b1);
    total();
}
function subtract(){
    var b1 = "-";
    arr.push(b1);
    total();
}

function total(){
    x = (arr.toString()).replace(/,/g,"");
    document.getElementById("all").innerHTML=x;
    // convert Array in string and replace the , with empty ""
}

function equal(){
    p = eval(x);//calculates the string
    document.getElementById("all").innerHTML=p;//sends the value of eval function 
    arr = new Array ;//creates new Array 
    arr.push(p);//return the valueOf p
}

31. By Tran Huu Dang

Made by Tran Huu Dang. Basic JavaScript calculator. ( Source )

<!DOCTYPE html>
<html>
<head>
  <title>Calculator</title>
  <meta name="viewport" content="width = device-width ;initial-scale=1.0;"/>
  <link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet"> 
</head>
<body>
<p id="brand"><i>Calculator</i></p>
 
  <input id="boxControl" type="text" value="">
   <center><p id="result">Result will show in here!</p></center>
 
  <div>
    <input id="num7" type="button" value="7" onclick="numberClick(this.id)">
    <input id="num8" type="button" value="8" onclick="numberClick(this.id)">
    <input id="num9" type="button" value="9" onclick="numberClick(this.id)">
    <input id="del" type="button" value="DEL" onclick="deleteNumber()">
  </div>
  <div>
    <input id="num4" type="button" value="4" onclick="numberClick(this.id)">
    <input id="num5" type="button" value="5" onclick="numberClick(this.id)">
    <input id="num6" type="button" value="6" onclick="numberClick(this.id)">
    <input id="add" type="button" value="+" onclick="numberClick(this.id)">
  </div>
  <div>
    <input id="num1" type="button" value="1" onclick="numberClick(this.id)">
    <input id="num2" type="button" value="2" onclick="numberClick(this.id)">
    <input id="num3" type="button" value="3" onclick="numberClick(this.id)">
    <input id="minus" type="button" value="-" onclick="numberClick(this.id)">
  </div>
  <div>
    <input id="equal" type="button" value="=" onclick="calculate()">
    <input id="num0" type="button" value="0" onclick="numberClick(this.id)">
    <input id="divi" type="button" value="/" onclick="numberClick(this.id)">
    <input id="multi" type="button" value="*" onclick="numberClick(this.id)">
  </div>
</body>
</html>


-----CSS------


input{
  width:23%;
  height:65px;
  margin:2px 2px 5px 2px;
  box-shadow:0 0 5px 1px black;
  border-radius:10px;
  background-color:lightgray;
 outline:none;
 font-size:22px;
 font-family: 'Allerta Stencil', sans-serif;
}
#boxControl{
  width:99%;
  height:65px;
  font-size:60px;
  margin-left:0px;
  padding-left:0px;
  display:block;
  text-align:justify;
}

#result{
    width:98%;
    height:80px;
    font-size:30px;
    text-align:center;
    font-family: 'Allerta Stencil', sans-serif;
    border:solid 1px;
    margin-top:10px;
    margin-bottom:10px;
}
#brand{
    font-size:20px;
    font-weight:bold;
    margin-top:10px;
    margin-bottom:10px;
}
body{
    background-color:gray;
}


----JS----


/*
What's new:
✨6/2/2018 - divide with zero fixed
✨20/1/2018- font size fit with device width
✨18/1/2018- now you can calulate even if you type something wrong like "1+1-*+" the calculator will auto fix this wrong to "1+1".
*/
/*Code by 💡 julius.yp . Vote if you like it^^ */
// have not solve the problem 1.2-1 in JS yet !!

var box;
alert("Don't forget upvote if you enjoy it 🎆🎉");
window.onload = function() {
    box=document.getElementById("boxControl");
}

function calculate(){
  x=document.getElementById("result");
  var endNum=box.value.slice(box.value.length-1);
  try {
  if (checkDivideZero(box.value)=="Valid") {
       while (checkNumberValid(endNum)!=="Number"){
         box.value=box.value.slice(0,box.value.length-1);
         endNum=box.value.slice(box.value.length-1);
         }
     x.style.fontSize="30px;"
     x.innerHTML= eval(box.value);
  }else {
     // x.style.fontSize="1px;" not work ??
      x.innerHTML="Out of control when divide with 0";
  }
  }
 catch (e) {
     
     x.innerHTML="Look what you make me do :("
 }
 
}

function numberClick(itsID){
 var addNumber=document.getElementById(itsID);
  box.value+=addNumber.value;
  changeFontsize(box.value.length);
  }
function changeFontsize(displayLength){
    switch (displayLength){
        /*this function change the font size when overflow in display */
      case 10: box.style.fontSize="50px";break;
      case 15: box.style.fontSize="40px";break;
      case 20: box.style.fontSize="30px";break;
      case 25: box.style.fontSize="20px";break;
      case 30: box.style.fontSize="15px";break;
    }
}
function deleteNumber(){
  var textF= box.value;
  var textE= textF.slice(0,textF.length - 1 );
  box.value= textE;
  changeFontsize(box.value.length);
}
function checkNumberValid(endNumber){
  /*this function use to check whether the end of box is number, if not, it will return NaN*/
  var vReturn;
  switch (endNumber){
      case "0":
      case "1":
      case "2":
      case "3":
      case "4":
      case "5":
      case "6":
      case "7":
      case "8":
      case "9":
      vReturn= "Number";
      break;
      default :
      vReturn= "NaN";
  }
  return vReturn;
}
function checkDivideZero(textInput){
   if (textInput.slice(textInput.indexOf("/")+1,textInput.indexOf("/")+2)=="0") {
       return "notValid";
   } else{
       return "Valid";
   }
    
}

32. By Wisdom Abioye

Made by Wisdom Abioye. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Calculator</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="calculator">
  <h3> ELECTRONIC CALCULATOR</h3>
  <div id="console">
    <div id="console1">0</div>
    
  </div>
  <div id="control">
    <div class="row">
      <div class="button red clear">AC</div>
      <div class="button red delete">CE</div>
      <div class="button operator">/</div>
      <div class="button operator">*</div>
    </div>
    <div class="row">
      <div class="button num">7</div>
      <div class="button num">8</div>
      <div class="button num">9</div>
      <div class="button operator">-</div>
    </div>
    <div class="row">
      <div class="button num">4</div>
      <div class="button num">5</div>
      <div class="button num">6</div>
      <div class="button operator">+</div>
    </div>
    <div class="row">
      <div class="button num">1</div>
      <div class="button num">2</div>
      <div class="button num">3</div>
      <div class="button">n/a</div>
    </div>
    <div class="row">
      <div class="button num">0</div>
      <div class="button decimal">.</div>
      <div class="button">n/a</div>
      <div class="button equal">=</div>
    </div>
  </div>

</div>

<div class="credit">Design &amp; Coded by <a href="#" target="_blank"> Wisdom Abioye</a> </div>
 
    </body>
</html>


-----CSS-----


body {
  background: orangered;
  height: 100%;
  margin: auto
}

#calculator {
  width: 300px;
  height: 400px;
  background: black;
  margin: 40px auto;
  padding: 10px;
  border-radius: 20px;
  box-shadow: 10px 5px 20px 5px grey;
  border: 1px solid pink;
  color: grey;
  text-align: center;
}
#calculator h3{
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

div#console {
  width: 90%;
  height: 50px;
  background: #C3C2AB;
  margin: auto;
  padding: 5px;
  border-radius: 5px;
  color: black;
  font-family: verdana;
  font-size: 1.4em;
  overflow: hidden;
  text-align: right;
  word-wrap: break-word;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#console1 {
  font-size: 22px;
}


.row {
  width: 90%;
  display: block;
  overflow: auto;
  margin: auto;
  padding: 5px;
}

.button {
  display: inline;
  float: left;
  width: 23%;
  height: 25px;
  padding: 10px 0 6px 0;
  margin: 1%;
  background: #222;
  color: white;
  font-weight: bolder;
  text-align: center;
  vertical-align: middle;
  line-height: 100%;
  font-size: 1.5em;
  border-radius: 5px;
  box-shadow: 0 4px 1px grey;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.buttonClick {
  height: 22px;
  box-shadow: none;
}

.clear, .delete {
  background: maroon;
}

.credit{
  width: 25%;
  margin: auto;
}


-----JS-----


$(document).ready(function() {
  //variable to store all input received
  var arithmetic = "";
  
  var number = "1234567890";
  var operator = "/*+-^";
  var lastItem, result;
  /// add click effect to the buttons
  $(".button").mousedown(function() {
    $(this).addClass("buttonClick");
  }).mouseup(function(){
    $(this).removeClass("buttonClick");
  });


  //appending numbers, operator, equals, decimal
  $(".button").click(function(){
    // check if number is clicked    
      if($(this).hasClass("num")){
        $("#console1").append($(this).text());
        arithmetic += $(this).text();
      }

      //get the last item on the console or in arithmetic string
    lastItem = arithmetic.substr(arithmetic.length-1, arithmetic.length);
    //check if last item is an operator, prevent click of an operator again
      if($(this).hasClass('operator')){
          if(operator.indexOf(lastItem) > -1){
            return false;
          }
          else{
              $("#console1").append($(this).text());
              arithmetic += $(this).text();
          }

      }// end if --> checking operator ended.

      //handling click of decimal point (.), prevent multiple in a number
      if($(this).hasClass('decimal')){
        arithmetic = arithmetic.split(/(?=[-+*\/])/);
        var lastNum = arithmetic[arithmetic.length-1];
            lastNum = lastNum.slice(1);
       

        if(lastNum.indexOf($(this).text()) > -1){
          arithmetic = arithmetic.join("");
          return false;
        }
        else{
          arithmetic = arithmetic.join("");
          $("#console1").append($(this).text());
          arithmetic += $(this).text();

        }
        
      }

      //set red buttons to clear console
  if($(this).hasClass("clear")){
    $("#console1").html("0");
    arithmetic = "";
  };// end clear


       if($(this).hasClass("delete")){
    arithmetic = arithmetic.slice(0, -1);
    $('#console1').html(arithmetic);


  }; // end delete

              //adding up
  if($(this).hasClass("equal") && arithmetic.length){

    //arithmetic to array and loop to perform math operation one after the other

    arithmetic = arithmetic.split(/(?=[-+*\/])/);
    var temp = "";
    for(var i = 0; i < arithmetic.length; i++){
      temp += arithmetic[i];
      temp = eval(temp);
    }

    result = temp;
    //check if result is in decimal;
   
      if(result % 1 == 0){
         result = temp;    
      }
      else{
        result = temp.toFixed(4);
      }
      //print result to the console and assign it to arithmetic;
      $("#console1").html(result);
      arithmetic = result.toString(); // reset arithmetic to the final result;

        };
    });
  });
  alert("Please, don't forget to like. Thanks!");