JavaScript Calculator(FreeCodeCamp)

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>JavaScript Calculator(FreeCodeCamp)</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

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

  
</head>

<body>

  <div class="container">
  <div class="calculator">
    
    <h4 class="title"> JavaScript Calculator </h4>
    
    <div class="display well text-right">
      <h2 id="display">0</h2>
      <h5 id="log">0<h5>
    </div>

    <button id="AC" class="pushLeft redButton"> AC </button>
    <button id="CE" class="redButton" > CE </button>
    <button id="/"> / </button>
    <button id="*"> * </button>

    <button id="7" class="pushLeft"> 7 </button>
    <button id="8"> 8 </button>
    <button id="9"> 9 </button>
    <button id="-"> - </button>

    <button id="4" class="pushLeft"> 4 </button>
    <button id="5"> 5 </button>
    <button id="6"> 6 </button>
    <button id="+"> + </button>

    <button id="1" class="pushLeft"> 1 </button>
    <button id="2"> 2 </button>
    <button id="3"> 3 </button>
    <button id="=" class="equalButton"> = </button>

    <button id="0" class="zeroButton pushLeft"> 0 </button>
    <button id="." class="pushDown"> . </button>
    
  </div>
      
  <footer class="text-center">
    <h6> Design and Code by Juan Gonzalez</h6>
  </footer>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/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/1Moosey1/javascript-calculatorfreecodecamp-XjrLgK */
@font-facxe {
  
  font-family: 'Orbitron';
  src: url('https://fonts.googleapis.com/css?family=Orbitron');
}

body {
  background-color: #6f7685;
}

footer {
  color: white;
}

.calculator {
  
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  
  background-color: #babbb5;
  width: 23em;
  height: auto;

  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  margin-bottom: 5%;
  
  border-style: solid;
  border-width: 2px;
  border-color: #949590;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.5);
}

button {

  width: 4em;
  height: 4em;
  margin: .5em;
  
  border-radius: 12px;
  box-shadow: 1px 1px 1px 1px;
  outline: none;
  
  background-color: #d0c7a8;
}

.title {
  
  margin: 2em auto 0.5em auto;
  font-family: impact;
}

.display {
  
  width: 19em;
  margin: 1em auto 1em auto;
  
  box-shadow: inset 0px 0px 8px 1px;
  background-color: rgba(255, 255, 255, 0.4);
  
  font-family: Obitron;
  overflow: hidden;
}

.pushLeft {
  margin-left: 2em;
}

.pushDown {
  margin-bottom: 2em;
}

.equalButton {

    height: 9em;
    margin-bottom: -4.5em;
}

.zeroButton {
    width: 9em;
}

.redButton {
  background-color: #AA7473;
}

/*Downloaded from https://www.codeseek.co/1Moosey1/javascript-calculatorfreecodecamp-XjrLgK */
const DISPLAYMAX = 8;
const LOGMAX = 32;
var displayElement, logElement, answer;
var leftOperand, operator, rightOperand;

$(document).ready(function() {
  
  displayElement = $("#display");
  logElement = $("#log");
  
  leftOperand = "";
  operator = "";
  rightOperand = "";
  answer = false;
  
  $("button").click(handleClick);
});

function handleClick() {
  
  var symbol = $(this).attr("id");
  switch(symbol) {
      
    case '/':
    case '*':
    case '-':
    case '+':
      
      appendOperator(symbol);
      break;
      
    case '.':
      
      decimal();
      break;
      
    case '=':
      
      compute();
      break;
      
    case 'AC':
      
      allClear();
      break;
      
    case 'CE':
      
      clearEntry();
      break;
      
    default:     
      appendNumber(symbol);
  }
}

function appendNumber(number) {
  
  var displayText = displayElement.text();
  var logText = logElement.text();
  
  if(displayText.length < DISPLAYMAX && 
     logText.length < LOGMAX) {
    
    var operand;
    if(operator)      
      operand = rightOperand += number;
    
    else {
      
      if(answer) {
        
        clearEntry();
        answer = false;
      }
      
      operand = leftOperand += number;
    }
      
    updateDisplay(operand);
  }
}

function appendOperator(symbol) {
  
  if(!operator || !rightOperand) {
    
    operator = symbol;
    updateDisplay(operator);
  }
  else {
    
    compute();
    operator = symbol;
  }
}

function decimal() {
  
  var operand;
  if(operator) {
    
    if(!rightOperand.includes("."))
      operand = rightOperand += ".";     
  }        
  else {
      
    if(!leftOperand.includes("."))
      operand = leftOperand += ".";
  }
      
  updateDisplay(operand);
}

function isInt(number) { 
   return number % 1 === 0;
}

function compute() {
  
  if(leftOperand && operator &&
    rightOperand) {
    
    leftOperand = parseFloat(leftOperand);
    rightOperand = parseFloat(rightOperand);
    
    if(operator == "/")
      leftOperand /= rightOperand;
      
    else if(operator == "*")
      leftOperand *= rightOperand;
    
    else if(operator == "-")
      leftOperand -= rightOperand;
    
    else if(operator == "+")
      leftOperand += rightOperand;
    
    if(!isInt(leftOperand))
      leftOperand = leftOperand.toFixed(1);
    
    leftOperand = leftOperand.toString();
    answer = true;
    
    operator = "";
    rightOperand = "";
    
    updateDisplay(leftOperand);
  }
}

function allClear() {
  
  leftOperand = operator = rightOperand = "";
  displayElement.text("0");
  logElement.text("0");
}

function clearEntry() {
  
  if(rightOperand) {
    
    rightOperand = "";
    updateDisplay(operator);
  }
  else if(operator) {
          
    operator = "";
    updateDisplay(leftOperand);
  }
  else
    allClear();
}

function updateDisplay(displayString) {
  
  displayElement.text(displayString);
  logElement.text(leftOperand + operator + rightOperand);
}

Comments