Demo: https://blog.kimconnect.com/wp-content/projects/calculator.html
HTML Code:
<link href='//fonts.googleapis.com/css?family=Bungee' rel='stylesheet'>
<div class='container'>
<div id='calculator'>
<!-- TITLE -->
<div id='title' class='text-center'>
<h5><b>Simple Calculator</b></h5>
</div>
<!-- ENTRY BOX -->
<div id='entrybox' class='text-right'>
<div id='entry'>
<p id='result'>0</p>
</div>
<div id='history'>
<p id='log'>0</p>
</div>
</div>
<!-- BUTTONS -->
<div id='buttons'>
<button class='red btn-danger' value='ac'>AC</button>
<button class='red btn-danger' value='back'>⇦</button>
<button class="btn-primary" value='/'>÷</button>
<button class="btn-primary"value='*'>x</button>
<button class="btn-info"value='7'>7</button>
<button class="btn-info"value='8'>8</button>
<button class="btn-info"value='9'>9</button>
<button class="btn-primary"value='-'>-</button>
<button class="btn-info"value='4'>4</button>
<button class="btn-info"value='5'>5</button>
<button class="btn-info"value='6'>6</button>
<button class="btn-primary" value='+'>+</button>
<button class="btn-info"value='1'>1</button>
<button class="btn-info"value='2'>2</button>
<button class="btn-info"value='3'>3</button>
<button class="btn-info"id='zeroButton' value='0'>0</button>
<button class="btn-info"value='.'>.</button>
<button class="btn-primary"id='equalButton' value='='>=</button>
</div>
<!-- end buttons -->
</div>
<!-- end calculator -->
</div>
<footer><a>Free Code Camp Rocks!</a></footer>
CSS Code:
body {
font-family: 'Bungee';
background-image: url(http://wallup.net/wp-content/uploads/2016/01/167565-abstract-dark-black_background-digital_art-artwork.png);
background-size: 100%;
}
#calculator {
height: 440px;
width: 300px;
margin-top: 10%;
margin-left: auto;
margin-right: auto;
background-color: white;
border: 2px solid #908b85;
border-radius: 20px;
box-shadow: 7px 10px 34px 1px rgba(0, 0, 0, 0.68), inset -1px -6px 12px 0.1px #89847e;
}
#title {
padding-top: 10px;
padding-bottom: 10px;
}
#entrybox {
width: 85%;
height: 100px;
margin-left: auto;
margin-right: auto;
border: 2px solid #b4b39d;
border-radius: 6px;
background-color: yellow;
overflow: auto;
}
#entry {
margin-right: 10px;
font-size: 35px;
}
#buttons {
font-size: 16px;
font-weight: bold;
color: #fff;
position: absolute;
display: inline-block;
width: 280px;
height: auto;
margin-top: 15px;
margin-left: 15px;
}
button {
border-radius: 8px;
border: none;
background-color: #3a3a3a;
margin: 0 4px 10px 8px;
height: 40px;
width: 50px;
box-shadow: 0px 3px 0px 0px #222121, inset -1px -3px 10px 1px #515151;
font-weight: bold;
}
.btn-info{
color: black;
}
.btn-info:hover{
color: yellow;
font-size:110%;
}
button:active {
transform: translate(0px, 3px);
box-shadow: none;
}
.row {
margin-top: 20px
}
#topAdjust {
margin-top: -52px;
}
#equalButton {
position: absolute;
margin-left: 12px;
margin-top: -50px;
height: 90px;
}
#zeroButton {
width: 117px;
}
.red {
font-size: 14px;
background-color: #a72d45;
box-shadow: 0px 3px 0px 0px #671c2a;
}
footer {
font-family: 'Arial Black';
color: white;
position: relative;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-left: auto;
margin-right:auto;
width: 300px;
height: 40px;
text-align: center;
}
button,
button:hover,
button:active,
button:visited {
text-decoration: none !important;
outline: none !important;
}
a,
a:hover,
a:active,
a:visited {
color: #922031;
text-decoration: none !important;
outline: none !important;
}
#history {
/*transform: translate(-13px, -17px);*/
position: relative;
height: 10px;
bottom: 17px;
margin-right: 14px;
color: #8b8b7b;
font-size: 12px;
}
JavaScript Code:
$(document).ready(function() {
// Declare variables
var entry="";
var memory=[];
var result=0;
var operator = /(\+|-|\*|\/|=)/g;
var digit = /[0-9]/;
var doubleDot = /(\..\.)/;
var isDigit, isOperator, isDot, isAC, isBack;
var isLastDigit, isLastOperator, isLastDot;
isLastDigit=isLastOperator=isLastDot=false;
// Function: obtain key press
$("button").click(function(){
entry = $(this).attr("value");
checkEntry();
displayCurrent();
checkRules();
displayHistory();
})
// flag the input with the appropriate entry type
function checkEntry(){
entry.match(digit)===null? isDigit=false : isDigit=true
entry.match(operator)===null|entry.match(operator)===undefined? isOperator=false : isOperator=true
entry==="."?isDot=true:isDot=false
entry==="ac"?isAC=true:isAC=false
entry==="back"?isBack=true:isBack=false
// console.log(isBack);
if (memory.length>0){
memory[memory.length-1].match(digit)===null? isLastDigit=false : isLastDigit=true
memory[memory.length-1].match(operator)===null | memory[memory.length-1].match(operator)===undefined? isLastOperator=false : isLastOperator=true
memory[memory.length-1].match(/(\.)/g) ? isLastDot=true : isLastDot=false
}
// console.log(isLastDot);
if(memory[memory.length-1]=="="){
memory=[];
memory.push(result);
}
}
// Function: check key press against rules
function checkRules(){
if (isAC){
memory=[];
displayHistory();
result=0;
displayCurrent();
// console.log(entry);
} else if (isBack){
if(memory.length>0){
memory.pop();
displayHistory();
displayCurrent();
}
} else if (entry=="="){
getResult();
} else if (isOperator){
if (isLastOperator&&memory.length>1) {memory[memory.length-1]=entry;}
else if (memory.length==0&&entry!=="-"){} else {memory.push(entry);}
} else if (isDot){
if (memory.length==0) {memory.push("0."); }
else if (result!=0&&isLastDot){$("#result").text("Wrong Key");}
else if (!isLastDot&&isLastDigit) {memory[memory.length-1]+=entry;}
else {memory.push(entry);}
}
// else if (memory[memory.length-1]=="." | memory[memory.length-1] % 1 == 0){console.log("strange");}
else {
// Assuming isDigit
// console.log(isLastDigit);
if (memory.length==0) {memory.push(entry);}
else if (memory.length==1&&memory[0]=="-"){memory[0]="-"+entry;}
else if (isLastDigit) {memory[memory.length-1]+=entry;}
else {memory.push(entry); }
}
}
// Function: display current button being pushed
function displayCurrent(){
if (memory.length>0){
$("#result").text(result);
} else {$("#result").text("0");}
}
// Function: display history
function displayHistory(){
if (memory.length>0&&memory[memory.length-1]=="="){
$("#history").text(result);
}
else if (memory.length>0){
$("#history").text(memory.join(""));
}
else {$("#history").text("0");}
}
// Function: getResult
function getResult(){
// console.log(memory);
// Please keep in mind that the eval() function isn't the most efficient
// It has vulnerabilities; thus, another method should be used to replace this function
result=eval(memory.join(""));
if (result%1!==0){
result = result.toString(); // this neat little trick will ommit all non-significant trailing zeros after the decimal point
}
memory.push("=");
$("#result").text(result);
// $("#history").text(memory.join(""));
}
})
Categories: