Skip to content

Instantly share code, notes, and snippets.

@chemok78

chemok78/Javascript Calculator.markdown

Created July 22, 2016 06:25
Show Gist options
  • Save chemok78/a1220d27ada898e389cf0df2a939c412 to your computer and use it in GitHub Desktop.
Save chemok78/a1220d27ada898e389cf0df2a939c412 to your computer and use it in GitHub Desktop.
Download ZIP
Javascript Calculator
Raw
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--to make sure latest rendering mode for IE-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--to ensure proper rendering and touch zooming-->
<title>Javascript Calculator</title>
</head>
<body>
<div class="wrapper">
<h4 style="text-align: center">FreeCodeCamp Calculator</h4>
<p style="display:block; background-color:white; width:260px; margin: 20px auto; padding: 5px; text-align:right" id="result">0</p>
<!--buttons here-->
<button type="button" class="btn btn-default operation" value="AC">AC</button>
<button type="button" class="btn btn-default operation" value="CE">CE</button>
<button type="button" class="btn btn-default calc" value="%">%</button>
<button type="button" class="btn btn-default calc" value="/">/</button>
<button type="button" class="btn btn-default number" value="7">7</button>
<button type="button" class="btn btn-default number" value="8">8</button>
<button type="button" class="btn btn-default number" value="9">9</button>
<button type="button" class="btn btn-default calc" value="*">*</button>
<button type="button" class="btn btn-default number" value="4">4</button>
<button type="button" class="btn btn-default number" value="5">5</button>
<button type="button" class="btn btn-default number" value="6">6</button>
<button type="button" class="btn btn-default calc" value="-">-</button>
<button type="button" class="btn btn-default number" value="1">1</button>
<button type="button" class="btn btn-default number" value="2">2</button>
<button type="button" class="btn btn-default number" value="3">3</button>
<button type="button" class="btn btn-default calc" value="+">+</button>
<button type="button" class="btn btn-default number" value=".">.</button>
<button type="button" class="btn btn-default number" value="0">0</button>
<button type="button" class="btn btn-default operation" value="Ans">Ans</button>
<button type="button" class="btn btn-default calc" value="=">=</button>
</div><!--id=calculator-->
</body>
</html>
Raw
script.js
$(document).ready(function(){
$(window).resize(function(){
//function to always keep the calculator in the middle of the viewport
$('.wrapper').css({
position:'absolute',
left: ($(window).width() - $('.wrapper').outerWidth())/2,
top: ($(window).height() - $('.wrapper').outerHeight())/2
});
});
$(window).resize();
var output = "";
//variable for what is being shown on the calculator screen
var input = "";
//variable to check if the last push of button was "=", meaning a calculation was performed
$('button').on('click', function(){
var value = $(this).val();
// get and store the value when click button
if(value == "AC"){
//clear everything entered so far : clear output variable
output = "";
document.getElementById('result').innerHTML = "0";
//set what's on the screen to zero again
} else if (value == "CE"){
//delete the last output
if (input == "=") {
//if the last push of button was "=", then need to reset what's on screen and reset input variable again
output = "";
input ="";
document.getElementById('result').innerHTML = output;
}
var lastChar = output.charAt(output.length -1);
//get the last character from output
output = output.slice(0,-1);
//delete the last character from output
document.getElementById('result').innerHTML = output;
} else if (value == "=") {
//perform the calculation that is stored in output
output = eval(output);
input = value;
//set input to "=", so we know that next button push should reset output to start over again
document.getElementById('result').innerHTML = output;
}
else {
//everything else adds to the output.
if (input == "=") {
output = "";
input ="";
document.getElementById('result').innerHTML = output;
}
output += value;
document.getElementById('result').innerHTML = output;
}
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Raw
style.css
body{
min-height: 100%;
padding-top: 60px;
background-repeat: no-repeat;
background-size: cover;
background-color: #56351E;
}
.wrapper {
height: 500px;
width: 320px;
border-radius: 20px;
padding: 20px;
background-color: #C47335;
overflow-y: auto;
}
.wrapper > button {
height: 50px;
width: 50px;
float:left;
margin: 10px;
}
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