Calculator Using HTML 5, CSS, JS

by nijinvinodan

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class='calculatorWrap'>
    <div id="screen" class="displayScreen borders">
        <div class="spanBlock" id="row-1"></div>
        <div class="spanBlock" id="row-2"></div>
        <div class="spanBlock" id="row-3"></div>
    </div>
    <div class="displayButton">
        <ul class="numberPad">
            <li onclick="clearAll()">CE</li>
            <li>C</li>
            <li onclick="showOperand('3.14')">&prod;</li>
            <li onclick="showOperator('+')">+</li>
            <li onclick="showOperand('7')">7</li>
            <li onclick="showOperand('8')">8</li>
            <li onclick="showOperand('9')">9</li>
            <li onclick="showOperator('-')">-</li>
            <li onclick="showOperand('4')">4</li>
            <li onclick="showOperand('5')">5</li>
            <li onclick="showOperand('6')">6</li>
            <li onclick="showOperator('*')">*</li>
            <li onclick="showOperand('1')">1</li>
            <li onclick="showOperand('2')">2</li>
            <li onclick="showOperand('3')">3</li>
            <li onclick="showOperator('/')">/</li>
            <li onclick="showOperand('0')">0</li>
            <li onclick="showOperand('00')">00</li>
            <li onclick="showOperand('.')">.</li>
            <li onclick="calculate()">=</li>
        </ul>
    </div>
</div>

CSS

.borders {
    border:1px solid grey;
}
.calculatorWrap {
    padding-top: 0.3cm;
    margin:auto;
    width:6.6cm;
    height: auto;
    border-radius: 5px;
    background: -webkit-gradient(radial, 100 36, 0, 100 -40, 120, from(#fafafa), to(#f1f1f1)), #f1f1f1;
}
.displayScreen {
    font-family: arial;
    margin:15px auto;
    background: #fff;
    width:95%;
    height: 1.5cm;
    border-radius: 5px;
}
.displayButton {
    height: 5.5cm;
    margin:5px auto;
    width:95%;
}
.numberPad {
    list-style: none;
    margin:auto;
    padding: 0;
}
.numberPad li {
    margin: 3px;
    float: left;
    width: 1cm;
    height: 0.5cm;
    font-size: 16px;
    text-align:center;
    border-radius:2px;
    color: #fff;
    font-family: arial;
    cursor: pointer;
    padding:0.2cm;
    background-image:-webkit-gradient(linear, left top, left bottom, from(#4d90fe), to(#4787ed));
}
.spanBlock {
    display: block;
    height: 0.5cm;
    text-align: right;
    padding:0px 5px;
    font-size: 14px;
    font-weight: bold;
}

JavaScript

var operatorSet = 0;
var operandSet = 0;
var oprA = 0,
    oprB = 0;
var opr = "";
var resulted = 0;

/* Getting Inputs through Keyboard */
document.onkeypress = function (e) {
    var e = window.event || e;

    var val = String.fromCharCode(e.charCode);
    if (val == '+' || val == '-' || val == '*' || val == '/') {
        showOperator(val);
    } else if (val == '=' || e.keyCode == 13) {
        if (operandSet === 0) {
            $("#row-3").html("E R R O R");
            resulted = 1;
        } else {
            calculate();
        }
    } else {
        showOperand(val);
    }
}

function showOperand(operand) {
    if (resulted == 1) {
        clearAll();
        resulted = 0;
    }
    if (operatorSet == 1 && operandSet == 0) {
        $("#row-1").html($("#row-3").html());
        oprA = $("#row-3").html();
        $("#row-3").html("");
        operandSet = 1;
    } else if (operatorSet === 0 && operandSet === 0) {
        $("#row-3").append(operand);
    }

    if (operandSet == 1) {
        $("#row-3").append(operand);
        oprB = $("#row-3").html();
    }
}

function showOperator(operator) {
    $("#row-2").html(operator);
    //	if(operatorSet==0){
    opr = operator;
    operatorSet = 1;
    //	}
}

function clearAll() {
    $("#row-1").html("");
    $("#row-2").html("");
    $("#row-3").html("");
    $("#row-1").css("text-align", "right");
    operatorSet = operandSet = oprA = oprB = 0;
    opr = "";
}

function calculate() {
    var result;
    switch (opr) {
        case '+':
            result = Number(oprA) + Number(oprB);
            break;
        case '-':
            result = Number(oprA) - Number(oprB);
            break;
        case '*':
            result = Number(oprA) * Number(oprB);
            break;
        case '/':
            result = Number(oprA) / Number(oprB);
            break;
    }
    clearAll();
    $("#row-1").html("ANSWER");
    $("#row-1").css("text-align", "left");
    $("#row-3").html(result);
    resulted = 1;
}