Skip to content

Instantly share code, notes, and snippets.

@amfischer
Last active Jul 13, 2016
Embed
What would you like to do?
JavaScript Calculator
$(document).ready(function() {
function convertToCode(str) {
var arr = str.split("");
var divideSymbol = decodeURI("%C3%B7");
var converted = arr.map(function(e) {
return (e == "x") ? e = "*" : (e == divideSymbol) ? e = "/" : e;
});
return converted.join("");
}
function deleteButton(str) {
var arr = str.split("");
if (str === "** E R R O R **") {
return "0";
}
if (arr.length === 1) {
arr.pop();
arr.push("0");
} else {
arr.pop();
}
return arr.join("");
}
$(".button-box").click(function() {
var currentValue = $("input").val();
var jsCode = convertToCode(currentValue);
switch (this.innerHTML) {
case "AC":
$("input").val(0).css("text-align", "right");;
break;
case "del":
$("input").val(deleteButton(currentValue)).css("text-align", "right");
break;
case "=":
try {
$("input").val(eval(jsCode)).css("text-align", "right");;
} catch(e) {
$("input").val("** E R R O R **").css("text-align", "center");
}
break;
default:
switch (currentValue) {
case "0":
case "** E R R O R **":
$("input").val(this.innerHTML).css("text-align", "right");;
break;
default:
$("input").val(currentValue + this.innerHTML);
}
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS - Calculator</title>
<link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>JavaScript Calculator</h2>
<div class="col clearfix">
<input type="text" maxlength="15" value="0" readonly>
<div class="button-box operator">(</div>
<div class="button-box operator">)</div>
<div class="button-box operator">del</div>
<div class="button-box operator">AC</div>
<div class="button-box">7</div>
<div class="button-box">8</div>
<div class="button-box">9</div>
<div class="button-box operator">&divide</div>
<div class="button-box">4</div>
<div class="button-box">5</div>
<div class="button-box">6</div>
<div class="button-box operator">x</div>
<div class="button-box">1</div>
<div class="button-box">2</div>
<div class="button-box">3</div>
<div class="button-box operator">-</div>
<div class="button-box">0</div>
<div class="button-box">.</div>
<div class="button-box equals">=</div>
<div class="button-box operator">+</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
/*====================
BASE STYLES
=====================*/
* {
box-sizing: border-box;
}
h2 {
text-align: center;
font-family: 'Special Elite', cursive;
font-size: 4em;
}
/*====================
CONTAINER STYLES
=====================*/
.container {
margin: 7% 30%;
}
.col {
width: 75%;
margin: 10% auto;
font-family: 'Boogaloo', cursive;
}
.clearfix {
content: "";
display: table;
clear: both;
}
/*====================
CUSTOM STYLES
=====================*/
input {
border: 1px solid blue;
border-radius: 4px;
margin: 5px auto;
padding: 1px 10px;
font-size: 3em;
text-align: right;
width: 100%;
}
.button-box {
float: left;
width: 23%;
margin: 2% 1%;
border: 1px solid #c6c6c6;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
text-align: center;
font-size: 3em;
padding: .15em;
}
.button-box:hover {
background-color: #e1d3c1;
border: 1px solid black;
}
.operator {
background-color: #b3b3b3;
}
.operator:hover {
background-color: #7d7d7d;
}
.equals {
border: 1px solid #3079ed;
background-color: #4d90fe;
color: white;
}
.equals:hover {
background-color: #3564b1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment