Skip to content

Instantly share code, notes, and snippets.

@hussnainsheikh

hussnainsheikh/simple_calculator_using_jquery.html

Created November 2, 2017 19:12
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 hussnainsheikh/6bd9a7ab532ffbd2db374e4fbd3c0064 to your computer and use it in GitHub Desktop.
Save hussnainsheikh/6bd9a7ab532ffbd2db374e4fbd3c0064 to your computer and use it in GitHub Desktop.
Download ZIP
Simple basic Calculator using jQuery. It includes addition, subtraction, multiplication and division. It also keep record of previous answers. Enjoy!
Raw
simple_calculator_using_jquery.html
<!-- Basic calculator using jQuery -->
<html>
<head>
<title>Calculator</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
.field{
padding: 4px;
border-radius: 4px;
border: solid black 1px;
margin: 3px;
font-size: 25px;
width: 30%;
}
.btn {
padding: 10px 18px 10px 18px;
font-size: 20px;
margin-bottom: 2px;
color: darkblue;
background: gainsboro;
border-radius: 6px;
width: 32%;
}
.content{
width: 50%;
float: left;
}
.history{
width: 48%;
float: left;
padding: 10px;
background: lightgray;
}
.main{
padding: 30px 100px 100px 100px;
}
</style>
<script type="text/javascript">
s=true;
$(document).ready(function () {
$(".num").click(function () {
var value = $(this).html();
if (s) {
$("#one").val(function (i, val) {
return val + value;
});
}
if (!s) {
$("#two").val(function (i, val) {
return val + value;
});
}
});
$('#shift').click(function () {
s=!s;
});
$("#clr").click(function() {
s = true;
$("#one").val("");
$("#two").val("");
$("#result").html("");
$("#history").html("");
});
$("#change").click(function () {
in1 = $("#one").val();
in2 = $("#two").val();
in1 = -in1;
in2 = -in2;
if (parseInt(in1) != 0 && s) {
$("#one").val(parseInt(in1));
}else if (parseInt(in2) != 0 && s == false) {
$("#two").val(parseInt(in2));
}
});
$("#back").click(function back () {
in1 = $("#one").val();
in2 = $("#two").val();
in1 = in1/10;
in2 = in2/10;
if (parseInt(in1) != 0 && s) {
$("#one").val(parseInt(in1));
}else if (parseInt(in1) == 0 && s){
$("#one").val("");
}else if (parseInt(in2) != 0 && s == false) {
$("#two").val(parseInt(in2));
}else{
$("#two").val("");
}
});
$('.op').click(function () {
var result;
var in1 = $("#one").val();
var in2 = $("#two").val();
var op = $(this).html();
if ((in1 != '') && (in2 != '') ) {
if (op == "+") {
result = parseInt(in1) + parseInt(in2);
}else if (op == "-") {
result = in1 - in2;
}else if (op == "/") {
result = in1 / in2;
}else if (op == "*") {
result = in1 * in2;
}
$("#result").html("Result: " + result);
$("#history").prepend("<span onclick='insert(this.innerHTML)'>" + in1 + "</span> " + op + " <span onclick='insert(this.innerHTML)'>" + in2 + "</span> = <span onclick='insert(this.innerHTML)'>" + result + "</span><br>");
$("#one").val("");
$("#two").val("");
}else{
$("#result").html("Please enter value 1 and value 2.");
}
});
});
</script>
</head>
<body style="background: gray;">
<h1 style="text-align:center;padding-top: 50px;">Calculator</h1>
<div class="main">
<div class="content">
<div style="margin-bottom:5px;">
<div>
<span><strong>Value 1:</strong></span>
<input type="text" value="" id="one" class="field">
</div>
<div>
<span><strong>Value 2:</strong></span>
<input type="text" value="" id="two" class="field">
</div>
<div>
<h4><strong><span id="result"></span></strong></h4>
</div>
</div>
<div style="width: 40%;">
<button class="btn num">1</button>
<button class="btn num">2</button>
<button class="btn num">3</button>
<button class="btn num">4</button>
<button class="btn num">5</button>
<button class="btn num">6</button>
<button class="btn num">7</button>
<button class="btn num">8</button>
<button class="btn num">9</button>
<button class="btn num">0</button>
<button class="btn op">+</button>
<button class="btn op">-</button>
<button class="btn op">/</button>
<button class="btn op">*</button>
<button class="btn" id="shift">S</button>
<button id="clr" class="btn">C</button>
<button id="back" class="btn"><--</button>
<button id="change" class="btn">+/-</button>
</div>
</div>
<div class="history">
<div>
<p>History</p>
<div id="history"></div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment