Skip to content

Instantly share code, notes, and snippets.

/Javascript Calculator.markdown

Created September 26, 2015 23:06
Show Gist options
  • Save anonymous/9b03b4bc0bec38c561a4 to your computer and use it in GitHub Desktop.
Save anonymous/9b03b4bc0bec38c561a4 to your computer and use it in GitHub Desktop.
Download ZIP
Javascript Calculator
Raw
index.html
<link href='https://fonts.googleapis.com/css?family=Candal' rel='stylesheet' type='text/css'>
<html>
<div class="container-fluid">
<div class="row bg_fix2" id="animate-area"></div>
<div id="holder"class="col-md-4">
<div id="main" class="col-md-12">
<h4>JS Calculator</h4>
<div class="display"id="test"></div>
<button class="slot numeral">1</button>
<button class="slot numeral">2</button>
<button class="slot numeral">3</button>
<button class="slot"id="addB">+</button><br>
<button class="slot numeral">4</button>
<button class="slot numeral">5</button>
<button class="slot numeral">6</button>
<button class="slot"id="subB">-</button><br>
<button class="slot numeral">7</button>
<button class="slot numeral">8</button>
<button class="slot numeral">9</button>
<button class="slot"id="multB">x</button><br>
<button class="bar"id="entB">=</button>
<button class="slot"id="clr">ce</button>
<button class="slot"id="divB">/</button>
</div>
</div>
</div>
<div class="col-md-12"style="text-align:right;font-size:20px;color:white;margin-top:125px">Jonathan Reasor 2015</div>
</html>
Raw
script.js
$(document).ready(function(){
////define vars and funcs////
var memory;
var num;
var current;
var clearnext;
function takeInput(x){
num=$("user_in").val();
x.preventDefault();
}
///////testing///
////button events////
$(".numeral").click(function(){
var digits=$("#test").text();
if(clearnext===1){
$("#test").empty();
clearnext=0;
}
if(digits.length<15){
var number=$(this).text(); $("#test").append(number);
}
})
$("#clr").click(function(){
$("#test").empty();
})
$("#addB").click(function(){
memory=$("#test").text();
clearnext=1;
current="+";
})
$("#subB").click(function(){
memory=$("#test").text();
clearnext=1;
current="-";
})
$('#multB').click(function(){
memory=$("#test").text();
clearnext=1;
current="x";
})
$("#divB").click(function(){
memory=$("#test").text();
clearnext=1;
current="/";
})
$("#entB").click(function(){
var results;
if(memory.length){
var memory2=$("#test").text();
$("#test").empty();
if(current==="+"){
results=parseInt(memory) +
parseInt(memory2);
}
else if(current==="-"){
results=(memory)-parseInt(memory2);
}
else if(current==="x"){
results=parseInt(memory)* parseInt(memory2);
}
else if(current==="/"){
results= parseInt(memory)/parseInt(memory2);
}
}
memory="";
if(String(results).length>15){
results=String(results); $("#test").append(results.substring(results[0],results[15]))
}
else{
$("#test").append(results);
}
});
})
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
Raw
style.css
@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
.container-fluid{
padding-left:0;
}
#animate-area {
width:100%;
height: 500px;
padding-left:0;
margin-left:0;
position:absolute;
z-index:0;
background-image: url(http://www.vbforums.com/attachment.php?attachmentid=113103&d=1398112502);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
}
html{
background-color:#663300;
height:500px;
}
h4{
font-family:'Candal', sans-serif;
}
.bar{
height:35px;
width:80px;
background-color:white;
color:black;
margin-top:0px;
border-radius:5%;
}
.slot{
width:40px;
height:35px;
background-color:white;
color:black;
margin-top:10px;
border-radius:5px;
}
.display{
border-radius:5%;
text-align:right;
font-size:20px;
height:30px;
margin-left:25px;
margin-right:25px;
background-color:white;
word-wrap:break-word;
}
#holder{
left:36%;
height:275px;
width:250px;
margin-top:50px;
margin-bottom:50px;
background-color:#CCCCCC;
background-image:url(http://webdesignandsuch.com/posts/stainless/1.jpg);
border-radius:5%;
z-index:1;
}
#main{
text-align:center;
z-index:1;
}
.bg_fix{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.bg_fix2{
-webkit-background-size: 50% 100%;
-moz-background-size: 50% 100%;
-o-background-size: 50% 100%;
background-size: 50% 100%;
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment