Skip to content

Instantly share code, notes, and snippets.

@emygeek

emygeek/index.html

Created February 23, 2017 22:03
Show Gist options
  • Save emygeek/4d74971b9f920349ba933e0ec09d85ed to your computer and use it in GitHub Desktop.
Save emygeek/4d74971b9f920349ba933e0ec09d85ed to your computer and use it in GitHub Desktop.
Download ZIP
Javascript Calculator (Free Code Camp)
Raw
index.html
<section id="main">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-md-offset-3 col-sm-offset-3 col-xs-offset-3 text-center">
<h1>Calculator</h1>
<div class="wrapper">
<div class="row">
<label id="output-screen" class="form-control"></label>
</div>
<div class="pad">
<div class="row">
<button class="btn pad-btn" data-ref="key" data-val="7">7</button>
<button class="btn pad-btn" data-ref="key" data-val="8">8</button>
<button class="btn pad-btn" data-ref="key" data-val="9">9</button>
<button class="btn pad-btn" data-val="DEL">DEL</button>
<button class="btn pad-btn" data-val="AC">AC</button>
</div>
<div class="row">
<button class="btn pad-btn" data-ref="key" data-val="4">4</button>
<button class="btn pad-btn" data-ref="key" data-val="5">5</button>
<button class="btn pad-btn" data-ref="key" data-val="6">6</button>
<button class="btn pad-btn" data-ref="operand" data-val="*">x</button>
<button class="btn pad-btn" data-ref="operand" data-val="/">:</button>
</div>
<div class="row">
<button class="btn pad-btn" data-ref="key" data-val="1">1</button>
<button class="btn pad-btn" data-ref="key" data-val="2">2</button>
<button class="btn pad-btn" data-ref="key" data-val="3">3</button>
<button class="btn pad-btn" data-ref="operand" data-val="+">+</button>
<button class="btn pad-btn" data-ref="operand" data-val="-">-</button>
</div>
<div class="row">
<button class="btn pad-btn" data-ref="key" data-val="0">0</button>
<button class="btn pad-btn" data-ref="key" data-val=".">.</button>
<button class="btn pad-btn" data-val="(">(</button>
<button class="btn pad-btn" data-val=")">)</button>
<button class="btn pad-btn" data-ref="equal" data-val="=">=</button>
</div>
</div> <!-- end of pad -->
</div>
</div>
</div>
</div>
</section>
Raw
javascript-calculator-free-code-camp.markdown
Raw
script.js
$(document).ready(function(){
var output = "";
var arrayNum = [];
$('.pad-btn').click(function(){
var ref = $(this).attr('data-ref');
if(ref === 'key'){
var val = $(this).attr('data-val');
$('#output-screen').append(val);
}else if(ref ==='operand' && $('#output-screen').text() != ''){
var part = $('#output-screen').text();
arrayNum.push(part);
var operation = $(this).attr('data-val');
arrayNum.push(operation);
clearScreen();
console.log(arrayNum);
}else if(ref === 'equal' ){ //also check array not empty
var part = $('#output-screen').text();
arrayNum.push(part);
console.log(arrayNum);
calculate();
}
});
function clearScreen(){
$('#output-screen').text('');
}
function calculate(){
var toPerform = "";
toPerform = arrayNum.join("");
var result = eval(toPerform);
$('#output-screen').text(result);
}
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Raw
style.css
body{
background: #c0392b
}
section{
}
.wrapper{
overflow:hidden;
box-shadow:0px 0px 3px #333;
}
.pad-btn{
width:50px;
margin:5px;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
@emygeek
Copy link
Author

emygeek commented Feb 23, 2017

This is v1. Mostly concerned with getting the basic functionality (add, delete, subtract, multiply) to work.
Subsequent versions will include more validation and improved UI.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment