Item: JavaScript Calculator(FreeCodeCamp)
Rating: 3.4
Author: 1Moosey1

14 Downloads
179 Views
Tweet
Download Now View Demo

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

More from 1Moosey1

JavaScript Calculator(FreeCodeCamp)

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

Technologies

Comments

More from 1Moosey1

Pomodoro Clock(FreeCodeCamp)

Twitch API(FreeCodeCamp)

Gonzalez Welding About

TicTacToe(alpha-beta pruning)

You Might Also Like

Same-Height Divs - jQuery Extension

Video (p5.dom.js)

React Pie Chart

wdad2_oef1

Navbar2

Stretchy SVGs

A Pen by Abteilung für Gestaltung GmbH

Product collection