Skip to content

Instantly share code, notes, and snippets.

@stormgrass

stormgrass/The Javascript Calculator.markdown

Created February 9, 2016 17:09
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 stormgrass/b374be70d5ac9e8c2fdb to your computer and use it in GitHub Desktop.
Save stormgrass/b374be70d5ac9e8c2fdb to your computer and use it in GitHub Desktop.
Download ZIP
The Javascript Calculator
Raw
index.html
<head><meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<h1 class="text-center">The Mighty Javascript Calculator</h1>
<div class="thecalculator">
<div class="inputwindow">
<div id="thewindow">
</div>
</div>
<div class="thenumberpad">
<div class="btn-group-lg inline">
<button class="btn btn-default"></button>
<button class="btn btn-default key" id="clear">AC</button>
<button class="btn btn-default key operator">%</button>
<button class="btn btn-default key operator">/</button>
</div>
<div class="btn-group-lg inline">
<button class="btn btn-default key" id="7" value="7" onclick="calculate()">7</button>
<button class="btn btn-default key" id="8" value="8">8</button>
<button id="9" class="btn btn-default key" id="9" value="9">9</button>
<button id="*" class="btn btn-default key operator">*</button>
</div>
<div class="btn-group-lg inline">
<button class="btn btn-default key">4</button>
<button class="btn btn-default key">5</button>
<button class="btn btn-default key">6</button>
<button class="btn btn-default key operator">-</button>
</div>
<div class="btn-group-lg inline">
<button class="btn btn-default key">1</button>
<button class="btn btn-default key">2</button>
<button class="btn btn-default key">3</button>
<button id="+" class="btn btn-default key">+</button>
</div>
<div class="btn-group-lg inline">
<button class="btn btn-default key">.</button>
<button class="btn btn-default key">0</button>
<button class="btn btn-default"></button>
<button class="btn btn-default key">=</button>
</div>
</div>
</div>
<p class="text-center small"><a href="http://freecodecamp.com/stormgrass">Richard</a> made this</p>
<div class="col-md-4">
</div>
</div>
</div>
Raw
script.js
$(document).ready(function() {
$('.key').click(function() {
var value = $(this).text();
var window = $("div[id='thewindow']");
switch (value) {
case '=':
try {
$(window).html(eval($(window).html()));
} catch (e) {
$(window.html('ERROR').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100));
};
break;
case 'AC':
return $(window).html('');
break;
default:
$(window).html(window.html() + value);
}
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=VT323);
h1 {
font-family: VT323;
color: gray;
}
.thecalculator {
margin-top: 100px;
background-color: #cccccc;
border-radius: 3px;
text-align: center;
padding-bottom: 30px;
padding-top: 30px;
}
.inputwindow {
width: 70%;
margin: auto;
border-radius: 3px;
}
.thenumberpad {
margin-top: 10px;
margin-bottom: 10px !important;
}
.btn {
border-radius: 0px !important;
height: 50px !important;
width: 60px !important;
margin-bottom: 4px;
}
#thewindow {
width: 100%;
height: 28px;
background-color: white;
text-align: right;
font-family: VT323;
font-size: 23px;
padding-bottom: 20px;
padding-right: 5px;
}
.small {
font-family: VT323;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://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