JavaScript Calculator

index.html

<div class="container">
  <div class="calculator">
    <h1 class="title">Calculator</h1>
    
    <div class="screen">
      <span id="output"></span>
    </div>
    
    <div class="buttons">
      <div class="row">
      <button id="clearAll" class="pink" >AC</button>
      <button id="backOne" class= "pink" >CE</button>
      <button class="percent" id="%">%</button>
      <button class="yellow" id="/">/</button>
      </div>
      <div class="row">
      <button id="7">7</button>
      <button id="8">8</button>
      <button id="9">9</button>
      <button class="yellow" id="*">x</button>
      </div>
      
      <div class="row">
      <button id="4">4</button>
      <button id="5">5</button>
      <button id="6">6</button>
      <button class="yellow" id="-">-</button>
      </div>
      
      <div class="row">
        <button id="1">1</button>
        <button id="2">2</button>
        <button id="3">3</button>
        <button class="yellow" id="+">+</button>
      </div>
      
      <div class="row">
          <button class="zeroButton" id="0">0</button>
          <button id=".">.</button>
          <button class="yellow" id="total">=</button> 
      </div>
    
    
  </div>
</div>

javascript-calculator.markdown

JavaScript Calculator

A Pen by Jessica Ciarelli on CodePen.

License.

script.js

$(document).ready(function() {

var num = "";
var numTwo = "";
var operator = "";
var total = $("#output");
var decimalAdded = false;

function clearAll() {
  num = "";
  numTwo = "";
  operator = "";
  $("#output").text("0");
}

function backOne() {
  num = num.toString().slice(0, -1);
  $("#output").text(num);
}

 $("button").click(function() {
  if(this.id === "clearAll") {
    clearAll();
  } else if (this.id === "%") {
    numNew = num / 100;
    num = numNew;
    $("#output").text(num);
  } else if(this.id === "backOne") {
    backOne();
  }
   else {
    num += $(this).text();
    $("#output").text(num);
    console.log(num);
}
 })


 $(".yellow").not("#total").click(function() {
  operator = $(this).text();
  numTwo = num;
  num = "";
  console.log("op:"+operator);
  console.log("2:"+numTwo);
  console.log("1:"+num);
  console.log(typeof num );
 });

 $("#total").click(function() {

    if(operator === "+") {
      num = (parseFloat(numTwo) + parseFloat(num));
    } else if(operator === "-") {
      num = (parseFloat(numTwo) - parseFloat(num));
    } else if(operator === "*") {
      num = (parseFloat(numTwo) * parseFloat(num));
    } else if(operator === "/") {
      num = (parseFloat(numTwo) / parseFloat(num));
    } 
    total.text(num);
    num = "";
    numTwo = "";

  })
  
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

style.scss

body {
background: #ff6e7f; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #ff6e7f , #bfe9ff); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #ff6e7f , #bfe9ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.container {
 background: #E6E6E7;
 margin-top: 100px;
 width: 320px;
 height: 490px;
 border-radius: 20px;
 box-shadow: 5px 5px 5px #000;
 border: 3px solid black;
  
  .calculator {
   text-align: center;
    
    .screen {
     background-color: black;
     height: 50px;
     width: 280px;
     border-radius: 10px;
     text-align: right;
     padding-right: 30px;
     padding-top: 5px;
     color: #FFF;
     font-size: 30px;
     font-family: 'Love Ya Like A Sister', cursive; 
    }
    
    .title {
      text-align: center;
      font-size: 26pt;
       font-family: 'Love Ya Like A Sister', cursive;
    }
    
    .buttons {
       margin-top: 10px;
     
        
      .zeroButton {
        width: 132px;
      }   
      
      .yellow {
        background-color: #FFEF9F;
      }
      
      .percent {
        background-color: #FFEF9F;
      }
      
      .pink {
        background-color: #ff6e7f;
      }
      
    button {
      border-radius: 10px;
      background-color:#88CDDA;
      border: 3px solid black;
      color: #000;
      width: 60px;
      height: 60px;
      font-size: 35px;
      font-family: 'Love Ya Like A Sister', cursive;
      padding: 0;
      margin: 4px;
      box-shadow: 3px 2px #666;
    }
      
      button:active {
       box-shadow: 2px 2px #666;
      transform: translateY(2px);
      }
      
      button:focus {
        outline:0;
      }
    }
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />