Skip to content

Instantly share code, notes, and snippets.

@Deityhub

Deityhub/index.html

Created February 13, 2018 17:20
Show Gist options
  • Save Deityhub/f99e854f4421f4107c4a26e366817784 to your computer and use it in GitHub Desktop.
Save Deityhub/f99e854f4421f4107c4a26e366817784 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Javascript Calculator
Raw
index.html
<html lang="en">
<head>
<title>Simple Calculator</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Chewy|Monoton|Orbitron|Sedgwick+Ave+Display" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Yatra+One" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="calculator" class="clearfix">
<h2 id="title"><a href="https://github.com/Deityhub/calculator" target="_blank">Adding Machine</a></h2>
<!--output field-->
<div id="output">
<p id="input"></p>
<p id="result"></p>
</div>
<!--button field-->
<div id="buttons" class="clearfix">
<button class='red' value='ac' id="clearall">AC</button>
<button class='red' value='ce' id="clear">CE</button>
<button id='/' class="divide">&divide;</button>
<button id='*' class="times">&times</button>
<button id='7'>7</button>
<button id='8' id="8">8</button>
<button id='9'>9</button>
<button id='-'>-</button>
<button id='4'>4</button>
<button id='5'>5</button>
<button id='6'>6</button>
<button id='+' class="plus">+</button>
<button id='1'>1</button>
<button id='2'>2</button>
<button id='3'>3</button>
<button id='0' class="zeroButton" value='0'>0</button>
<button value='.' id="." class="dot">.</button>
<button id='equalButton' value='='>=</button>
</div>
<footer>
designed by <a href="http://deityhub.github.io" target="_blank">Ojini Chizoba</a>
</footer>
</div>
</body>
</html>
Raw
script.js
$(document).ready(function () {
$('#input').html('0');
$('#result').html('0');
var decimal = true;
//stores the input
var inputs = [''];
//stores the total
var total;
//array of operators for validation without zero
var operator = ['+', '-', '*', '/'];
//array of zero
var opzero = ['.'];
//numbers for validation
var nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function getValue(input) {
//gets the input to the screen
if (opzero.includes(inputs[inputs.length - 1]) === true && input === '.') {
console.log('duplicate dots not allowed');
}
else if (inputs.length === 1) {
if (operator.includes(input) === false) {
inputs.push(input);
console.log(input);
} else if (operator.includes(input)) {
if (input === '*' || input === '/') {
console.log('Number or decimal first!')
} else {
inputs.push(input);
console.log(input);
}
}
} else if (operator.includes(inputs[inputs.length - 1]) === false) {
inputs.push(input);
console.log(input);
} else if (nums.includes(Number(input))) {
inputs.push(input);
console.log(input);
}
update();
testNum(total);
}
function update() {
//gets the current input value and displays to the screen
total = inputs.join('');
$('#input').html(total);
}
//evaluates inputs and gives the result to the screen
function getTotal() {
//gets the evaluated result into the screen
total = inputs.join('');
$('#result').html(eval(total));
$('#input').html('0');
clear();
}
//clear display
function clear() {
inputs = [''];
$('#input').html('0');
}
//checks the length of inputted values including the operators
function testNum(number) {
if (number.length > 16) {
$('#input').text(number.substr(number.length - 16, 16));
if (number.length > 17) {
number = "";
clear();
$('#input').html("Length exceeded!");
$('#result').html('0');
}
}
};
//handles the click event of the buttons
$('button').click(function () {
if (this.id === 'clearall') {
console.log('clearing all');
$('#result').html('0');
clear();
} else if (this.id === 'clear') {
if (inputs[inputs.length - 1] === '') {
console.log('go')
$('#input').html('0');
} else {
console.log('clearing some');
inputs.pop();
update();
}
} else if (this.id === 'equalButton') {
getTotal();
console.log('show me answer');
} else {
if (inputs[inputs.length - 1].indexOf('+', '-', '*', '/') === -1) {
getValue(this.id);
} else {
getValue(this.id);
}
}
});
//perform click action when specified keys are pressed
$(document).keypress(function (event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode === 49) {
$("#1").click();
} else if (keycode === 50) {
$("#2").click();
} else if (keycode === 51) {
$("#3").click();
} else if (keycode === 52) {
$("#4").click();
} else if (keycode === 53) {
$("#5").click();
} else if (keycode === 54) {
$("#6").click();
} else if (keycode === 55) {
$("#7").click();
} else if (keycode === 56) {
$("#8").click();
} else if (keycode === 57) {
$("#9").click();
} else if (keycode === 48) {
$("#0").click();
} else if (keycode === 46) {
$(".dot").click();
} else if (keycode === 8) {
$("#clear").click();
} else if (keycode === 61 || keycode === 13) {
$("#equalButton").click();
} else if (keycode === 43 || keycode === 222) {
$(".plus").click();
} else if (keycode === 45) {
$("#-").click();
} else if (keycode === 42 || keycode === 120) {
$(".times").click();
} else if (keycode === 47) {
$(".divide").click();
}
}).keyup(function (event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode === 46){
$("#clearall").click();
}
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Raw
simple-javascript-calculator.markdown
Raw
style.css
.clearfix:before,
.clearfix:after{
display: table;
content: "";
}
.clearfix:after{
clear: both;
}
body{
padding:0;
margin:0;
background-color: rgb(123,120,108);
}
#calculator{
box-sizing: border-box;
height: 450px;
width: 310px;
margin: 50px auto;
background-image: url('https://images.alphacoders.com/293/thumb-1920-293993.jpg');
background-size: contain;
color: white;
border: 2px solid gray;
border-radius: 20px;
box-shadow: 7px 10px 34px 1px rgba(0, 0, 0, 0.68), inset -1px -6px 12px 0.1px #89847e;
}
#output{
text-align: right;
width: 85%;
height: 65px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
border: 2px solid black;
border-radius: 6px;
background-color: #c3c2ab;
color: black;
}
#input{
margin-bottom: 0;
margin-top: 0px;
padding: 5px;
font-size: 27px;
height: 25px;
color: black;
}
#input, #output, button{
font-family: 'Yatra One', cursive;
}
#result{
margin-top: 0px;
margin-bottom: 10px;
padding: 5px;
font-size: 20px;
height: 25px;
}
button{
border-radius: 8px;
border: none;
background-color: #3a3a3a;
margin: 0 4px 10px 8px;
height: 40px;
font-size: 20px;
color: #fff;
width: 53px;
box-shadow: 0px 3px 0px 0px #222121, inset -1px -3px 10px 1px #515151;
cursor: pointer;
}
#buttons {
font-weight: bold;
position: absolute;
display: inline-block;
width: 300px;
height: auto;
margin-top: 15px;
margin-left: 15px;
}
footer {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-top: 280px;
font-family: 'Sedgwick Ave Display', cursive;
width: 100%;
height: 40px;
}
#title {
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
margin: 10px 0 0 0;
font-family: 'Monoton', cursive;
font-size: 1.1em;
}
button:active {
transform: translate(0px, 3px);
box-shadow: none;
}
#equalButton {
position: absolute;
margin-left: 12px;
margin-top: -50px;
height: 90px;
}
.zeroButton {
width: 122px;
}
.red {
font-size: 14px;
background-color: #a72d45;
box-shadow: 0px 3px 0px 0px #671c2a;
}
button,
button:hover,
button:active,
button:visited {
text-decoration: none !important;
outline: none !important;
}
a,
a:hover,
a:active,
a:visited {
color: white;
text-decoration: none !important;
outline: none !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment