Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
JavaScript Calculator
<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>
$(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 = "";
})
});
<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>
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;
}
}
}
}
<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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment