Skip to content

Instantly share code, notes, and snippets.

@hussnainsheikh
Created October 17, 2017 19:54
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save hussnainsheikh/d619ac395bedc057e6397a11ca01f24a to your computer and use it in GitHub Desktop.
Simple basic Calculator using javaScript. Functions addition, subtraction, multiplication and division with maintaining history of previous answer.
<!-- Basic calculator using javaScript -->
<html>
<head>
<title>Calculator</title>
<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;
function insert (n) {
document.getElementById("result").innerHTML = "";
if (s) {
document.getElementById("one").value+=n;
}else{
document.getElementById("two").value+=n;
}
}
function togl () {
s=!s;
}
function clr () {
s = true;
document.getElementById("one").value="";
document.getElementById("two").value="";
document.getElementById("result").innerHTML="";
document.getElementById("history").innerHTML="";
}
function operation (op) {
var result;
var in1 = document.getElementById("one").value;
var in2 = document.getElementById("two").value;
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;
}
document.getElementById("result").innerHTML = "Result: " + result;
document.getElementById("history").innerHTML += "<span onclick='insert(this.innerHTML)'>" + in1 + "</span> " + op + " <span onclick='insert(this.innerHTML)'>" + in2 + "</span> = <span onclick='insert(this.innerHTML)'>" + result + "</span><br>";
document.getElementById("one").value = "";
document.getElementById("two").value = "";
togl();
}else{
document.getElementById("result").innerHTML = "Please enter value 1 and value 2.";
}
}
function back () {
in1 = document.getElementById("one").value;
in2 = document.getElementById("two").value;
in1 = in1/10;
in2 = in2/10;
if (parseInt(in1) != 0 && s) {
document.getElementById("one").value = parseInt(in1);
}else if (parseInt(in1) == 0 && s){
document.getElementById("one").value = "";
}else if (parseInt(in2) != 0 && s == false) {
document.getElementById("two").value = parseInt(in2);
}else{
document.getElementById("two").value = "";
}
}
function change () {
in1 = document.getElementById("one").value;
in2 = document.getElementById("two").value;
in1 = -in1;
in2 = -in2;
if (parseInt(in1) != 0 && s) {
document.getElementById("one").value = parseInt(in1);
}else if (parseInt(in2) != 0 && s == false) {
document.getElementById("two").value = parseInt(in2);
}
}
</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" onclick="togl()">
</div>
<div>
<h4><strong><span id="result"></span></strong></h4>
</div>
</div>
<div style="width: 40%;">
<button onclick="insert(1)" class="btn">1</button>
<button onclick="insert(2)" class="btn">2</button>
<button onclick="insert(3)" class="btn">3</button>
<button onclick="insert(4)" class="btn">4</button>
<button onclick="insert(5)" class="btn">5</button>
<button onclick="insert(6)" class="btn">6</button>
<button onclick="insert(7)" class="btn">7</button>
<button onclick="insert(8)" class="btn">8</button>
<button onclick="insert(9)" class="btn">9</button>
<button onclick="insert(0)" class="btn">0</button>
<button onclick="operation('+')" class="btn">+</button>
<button onclick="operation('-')" class="btn">-</button>
<button onclick="operation('/')" class="btn">/</button>
<button onclick="operation('*')" class="btn">*</button>
<button onclick="togl()" class="btn">S</button>
<button onclick="clr()" class="btn">C</button>
<button onclick="back()" class="btn"><--</button>
<button onclick="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