JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles.css">
<script src="site.js"></script>
</head>
<body>
<div class="container well">
<input id="input" class="col-lg-6" value="0" disabled>
<table id="table">
<tr>
<td class="numbers">7</td>
<td class="numbers">8</td>
<td class="numbers">9</td>
<td class="operator" id="multiply">*</td>
</tr>
<tr>
<td class="numbers">4</td>
<td class="numbers">5</td>
<td class="numbers">6</td>
<td class="operator" id="subtract">-</td>
</tr>
<tr>
<td class="numbers">1</td>
<td class="numbers">2</td>
<td class="numbers">3</td>
<td class="operator" id="plus">+</td>
</tr>
<tr>
<td class="numbers" colspan="2">0</td>
<td id="dot" class="numbers">.</td>
<td class="operator" id="divide">/</td>
</tr>
<tr>
<td id="AC" colspan="2">AC</td>
<td id="equal">=</td>
<td id="factorial">x!</td>
</tr>
</table>
</div>
</body>
</html>
CSS
table tr td {
border: 3px solid #afafaf;
padding: 20px 20px 20px 20px;
font-weight: bold;
font-size: x-large;
text-align: center;
}
input {
margin-bottom: 10px;
margin-right: 10px;
padding: 20px;
font-size: x-large;
}
JavaScript
var calculator = {
first: "",
second: "",
needClear: false,
operators: "",
applyRules: function (inputValue, pressedValue) {
//reset input value
if (inputValue == "0") {
inputValue = "";
}
// use only once dot
var res;
if (inputValue.indexOf(".") != -1 && pressedValue == ".") {
res = inputValue;
} else {
res = inputValue + pressedValue;
}
if (calculator.needClear) {
calculator.needClear = false;
res = pressedValue;
}
return res;
}
};
$(document).ready(function () {
$(".numbers").on("click", function () {
var pressedValue = $(this).text();
var inputValue = $("#input").val();
var res = calculator.applyRules(inputValue, pressedValue);
$("#input").val(res);
});
$("#AC").on("click", function () {
$("#input").val("0")
});
$(".operator").on("click", function () {
calculator.operators = $(this).text();
calculator.first = $("#input").val();
calculator.needClear = true;
});
$("#equal").on("click", function () {
var res;
calculator.second = $("#input").val();
//operators
if (calculator.operators == "+") {
res = Number(calculator.first) + Number(calculator.second);
} else if (calculator.operators == "-") {
res = Number(calculator.first) - Number(calculator.second);
} else if (calculator.operators == "*") {
res = Number(calculator.first) * Number(calculator.second);
} else if (calculator.operators == "/") {
res = Number(calculator.first) / Number(calculator.second);
}
$("#input").val(res);
});
});