JavaScript Calculator

In this example below you will see how to do a JavaScript Calculator with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by kurtlehnardt, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kurtlehnardt ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>JavaScript Calculator</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
  <div id='container'>
    <div class='calculator' id='calculator'>
      <h3>Casio TI-83</h3>
      <input id='chain'></input>
      <input class='screen' id='screen'></input>
      <div id="buttons">
        <div>
          <button id="clearAll" onclick="clearAll()">AC</button>
          <button id="clear" onclick="clearScreen()">C</button>
          <button id="backspace" onclick="backspace()">⌫</button>
          <button id="divide" onclick='pressed("/")'>÷</button>
        </div>

        <div>
          <button id="seven" onclick="pressed(7)">7</button>
          <button id="eight" onclick="pressed(8)">8</button>
          <button id="nine" onclick="pressed(9)">9</button>
          <button id="mulitply" onclick='pressed("*")'>×</button>
        </div>

        <div>
          <button id="four" onclick="pressed(4)">4</button>
          <button id="five" onclick="pressed(5)">5</button>
          <button id="six" onclick="pressed(6)">6</button>
          <button id="subtract" onclick='pressed("-")'>-</button>
        </div>


        <div>
          <button id="one" onclick="pressed(1)">1</button>
          <button id="two" onclick="pressed(2)">2</button>
          <button id="three" onclick="pressed(3)">3</button>
          <button id="add" onclick='pressed("+")'>+</button>
        </div>

        <div>
          <button id="decimal" onclick='pressed(".")'>.</button>
          <button id="zero" onclick="pressed(0)">0</button>
          <button id="switchSign" onclick="switchSign()">±</button>
          <button id="equals" onclick="equals()">=</button>
        </div>
      </div>
    </div>
  </div>
  </div>
</body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/kurtlehnardt/javascript-calculator-xZxQjL */
body {
  background: linear-gradient(to bottom, skyblue, #AFF) no-repeat;
  height: 100%;
}

#container {
  padding: 5% 0% 5% 0%;
}

.calculator {
  background: url('https://s-media-cache-ak0.pinimg.com/736x/89/b3/fc/89b3fc5b24328d075f9f34397ee07aca.jpg');
  background-size: cover;
  border-radius: 3%;
  margin-left: auto;
  margin-right: auto;
  padding: 25px;
  min-width: 250px;
  max-width: 400px;
  height: 30%;
  -moz-box-shadow: inset 0 0 30px #000000;
  -webkit-box-shadow: inset 0 0 30px #000000;
  box-shadow: inset 0 0 30px #000000;
}

.screen,
#chain {
  font-size: 4em;
  color: #111;
  border-color: #444;
  border-width: 5px;
  border-radius: 5%;
  background: linear-gradient(to right, #142, #241);
  width: 95%;
  position: relative;
  padding: 10px;
  opacity: .97;
}
div{
  min-width: 300px;
}

#buttons {
  min-width: 200px;
  padding-top: 50px;
}

button {
  background: url('http://i66.tinypic.com/11sf1ft.png') no-repeat;
  background-size: cover;
  border-style: solid;
  border-color: #DDD;
  border-width: 3px;
  border-radius: 20%;
  font-size: 2em;
  text-shadow: 0px 1px 1px #FFF;
  color: #CCC;
  padding: 3%;
  margin 50%;
  width: 24%;
   -moz-box-shadow: inset 0 0 10px #333;
  -webkit-box-shadow: inset 0 0 10px #333;
  box-shadow: inset 0 0 10px #333;
}

button:active {
  opacity: 0.9;
}

#clearAll,
#clear, 
#backspace{
  background: linear-gradient(#F00, #A00);
  color: #222;
  text-shadow: 0px 1px 1px #333;
  border-style: solid;
  border-width: 1px;
}

#clear {
  background: linear-gradient(#C60, #A30);
}
#backspace{
  background: linear-gradient(#FFF, #AAA);
}
h3{
  padding: 0px;
  font-family: Courier New;
  font-size: 1em;
  text-align: center;
}

/*Downloaded from https://www.codeseek.co/kurtlehnardt/javascript-calculator-xZxQjL */
var input = [];
var buffer = "";
var current = 0; //TypeScript for fun
var numex = new RegExp("[0-9]");
function refresh() {
    document.getElementById('screen').value = buffer;
    $('#chain').val(input.join('') + buffer);
}
function clearScreen() {
    buffer = '';
    refresh();
}
function clearAll() {
    clearScreen();
    input = [];
    refresh();
}
function backspace() {
    buffer = buffer.substring(0, buffer.length - 1);
    refresh();
}
function switchSign() {
    buffer = buffer * -1;
    refresh();
}
function equals() {
    // adds the last number to the input
    if (!numex.test(buffer)) {
        buffer = '';
    }
    input.push(buffer);
    buffer = eval(input.join(''));
    input = [];
    refresh();
}
function pressed(value) {
    if (numex.test(value) != numex.test(buffer)) {
        input.push(buffer);
        buffer = '';
    }
    else if (!numex.test(value)) {
        buffer = '';
    }
    buffer += value;
    refresh();
}

Comments