Simple Calculator

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

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

Technologies

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

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

  
</head>

<body>

  <div class="container">
  <div class="calculator">
    <section>
      <span id="clear">AC</span>
      <div id="output">0</div>
    </section>
    <section>
      <span class="operand">7</span>
      <span class="operand">8</span>
      <span class="operand">9</span>
      <span class="operator">+</span>
    </section>
    <section>
      <span class="operand">4</span>
      <span class="operand">5</span>
      <span class="operand">6</span>
      <span class="operator">-</span>
    </section>
    <section>
      <span class="operand">1</span>
      <span class="operand">2</span>
      <span class="operand">3</span>
      <span class="operator">÷</span>
    </section>
    <section>
      <span class="operand">0</span>
      <span id="decimal">.</span>
      <span id="equals">=</span>
      <span class="operator">×</span>
    </section>
  </div>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/albarezj/simple-calculator-ZOQVxP */
@import url(https://fonts.googleapis.com/css?family=Julius+Sans+One);
@import url(https://fonts.googleapis.com/css?family=Fira+Mono);
body {
  font-family: 'Julius Sans One', sans-serif;
  height: 100vh;
  color: white;
  background: linear-gradient(0deg, black 40%, #2B2B58);
}

.container {
  display: flex;
  justify-content: center;
}

.calculator {
  margin-top: 50px;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 200px;
  height: 300px;
}

.calculator:hover {
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.5);
  border-top: none;
}

#output {
  font-family: monospace;
  color: orange;
  font-size: 25px;
  overflow: hidden;
}

.highlight {
  background: rgba(120, 120, 255, 0.5);
}

section {
  display: flex;
  justify-content: space-between;
}

span {
  text-align: center;
  min-width: 30px;
  line-height: 35px;
}

span:hover {
  background: rgba(100, 100, 255, 0.1);
  box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.5);
}

span:nth-child(4):hover {
  background: rgba(255, 100, 100, 0.5);
}

.calculator:hover span {
  border: 1px solid rgba(100, 100, 255, 0.1);
}

.calculator:hover span:nth-child(4) {
  border: 1px solid rgba(255, 100, 100, 0.5);
}

/*Downloaded from https://www.codeseek.co/albarezj/simple-calculator-ZOQVxP */
var output = $('#output');
var clear = $('#clear');
var equals = $('#equals');
var decimal = $('#decimal');
var operands = $('.operand');
var operators = $('.operator');
var oper = '';
var inputOperands = [];
var inputOperators = [];
var cleared = true;

$(function() {
  setClearButton();
  setEqualsButton();
  setOperandEventHandlers();
  decimalPointEventHandler();
  setOperatorEventHandlers();
});

function setClearButton() {
  clear.on('click', function() {
    output.text('0');
    clearEverything();
    output.removeClass('highlight');
  });
}

function setEqualsButton() {
  equals.on('click', function() {
    if (!output.hasClass('highlight')) {
      checkForOperand();
      calculate();
      clearEverything();
    }
  });
}

function setOperandEventHandlers() {
  //inserting numbers
  operands.each(function() {
    $(this).on('click', function() {
      if (!output.hasClass('highlight')) {
        var numIn = $(this).text();
        oper += numIn;
        //start new operand
        if (cleared) {
          output.text(numIn);
          cleared = false;
        }
        //continue current operand, display no more than 10 digits
        else {
          var displayText = output.text();
          if (displayText.length < 10) {
            output.append(numIn);
          } else {
            displayText = displayText.substr(1) + numIn;
            output.text(displayText);
          }
        }
      }
    });
  });
}

function decimalPointEventHandler() {
  decimal.on('click', function() {
    if (!output.hasClass('highlight') & !oper.includes('.')) {
      output.append('.');
      oper += '.';
      cleared = false;
    }
  });
}

function setOperatorEventHandlers() {
  //inserting operators
  operators.each(function() {
    $(this).on('click', function() {
      if (!output.hasClass('highlight')) {
        checkForOperand();
        output.text('0');
        //if operands have been entered, operator is allowed
        if (inputOperands.length > 0) {
          inputOperators.push($(this).text());
        }
      }
    });
  });
}

function checkForOperand() {
  if (oper.length > 0) {
    //decimal point entered last, then concat a 0.
    if (oper.lastIndexOf('.') === oper.length - 1) {
      oper += '0';
    }
    inputOperands.push(oper);
    oper = '';
    cleared = true;
  }
}

function clearEverything() {
  oper = '';
  inputOperands = [];
  inputOperators = [];
  cleared = true;
}

function calculate() {
  console.log('cal: ' + inputOperands);
  var cal = false;
  var operandsLength = inputOperands.length;
  var operatorsLength = inputOperators.length;

  while (operandsLength > 1 && operatorsLength > 0) {
    cal = true;
    var num1 = parseFloat(inputOperands.shift(), 10);
    var num2 = parseFloat(inputOperands.shift(), 10);
    var operator = inputOperators.shift();
    var total;
    switch (operator) {
      case '+':
        inputOperands.unshift(num1 + num2);
        break;
      case '-':
        inputOperands.unshift(num1 - num2);
        break;
      case '÷':
        inputOperands.unshift(num1 / num2);
        break;
      case '×':
        inputOperands.unshift(num1 * num2);
        break;
      default:
        cal = false;
        alert('Something went wrong in the calculation!');
    }
    operandsLength = inputOperands.length;
    operatorsLength = inputOperators.length;
  }
  if (cal && operandsLength === 1) {
    var out = checkLength(inputOperands.shift());
    output.text(out);
  }
  // else{
  //   alert('Something else went wrong!');
  // }
  output.addClass('highlight');
}

function checkLength(out) {
  if (out.toString().length > 10) {
    return out.toExponential(2);
  } else {
    return out;
  }
}

Comments