JavaScript Calculator
- Calculator should have 0 to 9 digits , clear , backspace , . , and = buttons.
- Operators buttons are : + , - , / , *.
- Layout should be div based. No tables should be used.
- It should perform all valid calculations.
- Use CSS to design buttons & not images or html button element.
- Button should change in given states ( i. e. normal , disabled, hover and clicked ). Use CSS effect for each state
style.css
body{
overflow: scroll;
}
INPUT{
padding: 2px;
margin: 10px 0px 0px 5px;
}
.calci{
background-color: #aaa;
width: 200px;
height: 250px;
border: 5px !important;
border-color: #000 !important;
}
.btn{
background-color: #ccc;
margin: 1px;
padding: 2px;
min-width: 30px;
text-align: center;
float: left;
border: 2px !important;
border-color: black;
border-style: solid;
}
.btn:HOVER {
background-color: #cdd;
cursor: pointer;
}
Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="js/Calculations.js"></script>
</head>
<body onload="loadComponents()">
<noscript>
Javascript not enabled
</noscript>
<div class="calci" >
<div style="margin-left: 10px">
<div>
<input id="text_input" value="" type="text" readonly="readonly" style="left:0px"/>
</div><br>
<div style="width: 100%">
<div id="clear_btn" class="btn" > Clear </div>
<div id="del_btn" class="btn">Backspace</div>
</div>
<br><br>
<div style="width: 100%">
<div id="btn_one" class="btn"> 1 </div>
<div id="btn_two" class="btn">2</div>
<div id="btn_three" class="btn">3</div>
<div id="btn_div" class="btn">/</div>
</div>
<br><br>
<div style="width: 100%">
<div id="btn_four" class="btn"> 4 </div>
<div id="btn_five" class="btn">5</div>
<div id="btn_six" class="btn">6</div>
<div id="btn_mul" class="btn">*</div>
</div>
<br><br>
<div style="width: 100%">
<div id="btn_seven" class="btn">7</div>
<div id="btn_eight" class="btn">8</div>
<div id="btn_nine" class="btn">9</div>
<div id="btn_sub" class="btn">-</div>
</div>
<br><br>
<div style="width: 100%">
<div id="btn_dot" class="btn">.</div>
<div id="btn_zero" class="btn">0</div>
<div id="btn_eq" class="btn">=</div>
<div id="btn_plus" class="btn">+</div>
</div>
</div>
</div>
</body>
</html>
Calculations.js
function numberClicked(num){
if(newNumberFlag == true){
document.getElementById("text_input").value = num;
newNumberFlag = false;
}else {
var value = document.getElementById("text_input").value;
value += num;
document.getElementById("text_input").value = value;
}
}
function oneClicked(){
numberClicked(1);
}
function twoClicked(){
numberClicked(2);
}
function threeClicked(){
numberClicked(3);
}
function fourClicked(){
numberClicked(4);
}
function fiveClicked(){
numberClicked(5);
}
function sixClicked(){
numberClicked(6);
}
function operatorClicked(op){
operator = op;
newNumberFlag = true;
result = parseFloat(document.getElementById("text_input").value);
}
function sevenClicked(){
numberClicked(7);
}
function eightClicked(){
numberClicked(8);
}
function nineClicked(){
numberClicked(9);
}
function zeroClicked(){
numberClicked(0);
}
function dotClicked(){
var value = document.getElementById("text_input").value;
if(value == null || value == undefined || value == "" ){
value = "0.";
}else if(value.indexOf(".")!= -1){
return;
}else {
value += ".";
}
document.getElementById("text_input").value = value;
}
function loadComponents(){
clear();
var clearBtn=document.getElementById("clear_btn");
clearBtn.onclick = clear;
document.getElementById("del_btn").onclick = backspaceClicked;
document.getElementById("btn_one").onclick = oneClicked;
document.getElementById("btn_two").onclick = twoClicked;
document.getElementById("btn_three").onclick = threeClicked;
document.getElementById("btn_four").onclick = fourClicked;
document.getElementById("btn_five").onclick = fiveClicked;
document.getElementById("btn_six").onclick = sixClicked;
document.getElementById("btn_seven").onclick = sevenClicked;
document.getElementById("btn_eight").onclick = eightClicked;
document.getElementById("btn_nine").onclick = nineClicked;
document.getElementById("btn_zero").onclick = zeroClicked;
document.getElementById("btn_dot").onclick = dotClicked;
document.getElementById("btn_plus").onclick = function(){
operatorClicked("+");
};
document.getElementById("btn_sub").onclick = function(){
operatorClicked("-");
};
document.getElementById("btn_div").onclick = function(){
operatorClicked("/");
};
document.getElementById("btn_mul").onclick = function(){
operatorClicked("*");
};
document.getElementById("btn_eq").onclick = calculate;
}
function clear(){
document.getElementById("text_input").value="";
result = 0;
operator = "";
// num1 = "";
newNumberFlag = true;
}
function backspaceClicked (){
var value = document.getElementById("text_input").value;
if(null != value && value != undefined && value != ""){
var origLen = value.length , newValue;
newValue = value.substring(0,origLen-1);
document.getElementById("text_input").value = newValue;
}
}
function calculate(){
var num2 = parseFloat(document.getElementById("text_input").value);
if(result == 0 || operator == ""){
result = num2;
}else {
if(operator == "+"){
result = result + num2;
}else if(operator == "-"){
result = result - num2;
}else if(operator == "/"){
result = result / num2;
}else if(operator == "*"){
result = result * num2;
}
}
document.getElementById("text_input").value = result;
}
