Skip to content

Instantly share code, notes, and snippets.

@pilgrim011

pilgrim011/index.html

Last active November 11, 2016 00:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pilgrim011/aff587ba10910e637f02a91dd213f73b to your computer and use it in GitHub Desktop.
Save pilgrim011/aff587ba10910e637f02a91dd213f73b to your computer and use it in GitHub Desktop.
Download ZIP
Javascript Calculator
Raw
index.html
<head><link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
</head>
<body>
<div>
<table align="center">
<tr>
<td colspan=4><output name="result" id = "output"class = "text-center"></output>
</td>
</tr>
<tr>
<td><input type="button" value = "AC" id="ac"></td>
<td><input type="button" value = "CE" id = "ce"></td>
<td><input type="button" value = "%" id = "percent"></td>
<td><input type="button" value = "/" id = "divide"></td>
</tr>
<tr>
<td><input type="button" value = "7" id = "seven"></td>
<td><input type="button" value = "8" id = "eight"></td>
<td><input type="button" value = "9" id = "nine"></td>
<td><input type="button" value = "x" id = "multiply"></td>
</tr>
<tr>
<td><input type="button" value = "4" id = "four"></td>
<td><input type="button" value = "5" id = "five"></td>
<td><input type="button" value = "6" id = "six"></td>
<td><input type="button" value = "-" id = "minus"></td>
</tr>
<tr>
<td><input type="button" value = "1" id = "one"></td>
<td><input type="button" value = "2" id = "two"></td>
<td><input type="button" value = "3" id = "three"></td>
<td><input type="button" value = "+" id = "plus"></td>
</tr>
<tr>
<td><input type="button" value = "0" id = "zero"></td>
<td><input type="button" value = "." id = "dot"></td>
<td colspan=2><input type="button" value = "=" id = "equals"></td>
</tr>
</table>
</div>
</body>
Raw
script.js
$( document ).ready(function() {
$("#output").prop("maxLength",12);
var clear;
$(":button").on("click", function(){
if (clear === true){
clear = false;
$("#output").empty();
};
console.log(clear);
});
$("#ac").on("click", function(){
$("#output").empty();
});
$("#ce").on("click", function(){
var del = document.getElementById("output").value;
document.getElementById("output").value = del.substring(0, del.length-1);
});
$("#percent").on("click", function (){
clear = true;
var val = document.getElementById("output").value;
var first = parseFloat(val);
var reg = /[-+%*\/]/;
var operator = reg.exec(val).toString();
var regTwo = val.search(/[-+%*\/]/);
var second = val.slice(regTwo+1);
var result = eval(first + operator + first/100*second);
$("#output").empty().html(result);
});
$("#divide").on("click", function (){
$("#output").append("/");
});
$("#seven").on("click", function(){
$("#output").append(7);
});
$("#eight").on("click", function(){
$("#output").append(8);
});
$("#nine").on("click", function(){
$("#output").append(9);
});
$("#multiply").on("click", function(){
$("#output").append("*");
});
$("#four").on("click", function(){
$("#output").append(4);
});
$("#five").on("click", function(){
$("#output").append(5);
});
$("#six").on("click", function(){
$("#output").append(6);
});
$("#minus").on("click", function(){
$("#output").append("-");
});
$("#one").on("click", function(){
$("#output").append(1);
});
$("#two").on("click", function(){
$("#output").append(2);
});
$("#three").on("click", function(){
$("#output").append(3);
});
$("#plus").on("click", function(){
$("#output").append("+");
});
$("#zero").on("click", function(){
$("#output").append(0);
});
$("#dot").on("click", function(){
$("#output").append(".");
});
$("#equals").on("click", function(){
clear = true;
var val = document.getElementById("output").value;
var first = parseFloat(val);
var reg = /[-+%*\/]/;
var operator = reg.exec(val).toString();
var regTwo = val.search(/[-+%*\/]/);
var second = val.slice(regTwo+1);
var result = eval(first + operator + second);
$("#output").empty().html(result);
});
});
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Raw
style.css
body{
font-family: 'Roboto Mono', monospace;
}
div {
padding-top: 80px;
}
table{
table-layout:fixed
border: 2px solid black;
border-collapse: separate !important;
border-radius: 15px;
width:300px;
height:450px;
background-color: #3A3C3D;
}
td{
text-align:center;
width:25%;
white-space: nowrap;
overflow: hidden
}
input {
background-color: #1a1a00;
color:white;
font-size: 30px;
width:50px;
border-radius: 20px;
}
#equals{
width:130px;
}
#output{
height: 70px;
border: 3px solid black;
border-radius: 20px;
background-color: #A5B5A7;
margin: 30px;
font-size:30px;
color:black;
text-align:center;
padding: 11px 0px 11px 0px;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment