css3-js calculator

A web calculator powered by CSS3 and javasript

by J. Jones

HTML

<!-- This content is licensed under a Creative Commons Attributions 4.0 International License -->
<!-- Author: Itay Grudev -->
<div id="calculator">
    <!-- Screen and clear key -->
    <div class="top">
        <ul class="battery">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="brand">Elka</div>
        <form class="screen" onsubmit="calc();return false">
            <input type="text" autofocus />
        </form> <span class="clear">C</span>

    </div>
    <div class="keys">
        <!-- operators and other keys --> <span value="sqrt(" class="command">√</span>
 <span value="pow(" class="command">x<sup>y</sup></span>
 <span value="abs(" class="command">|x|</span>
 <span value="log(" class="command">log</span>
 <span class="operator">)</span>
 <span value="sin(" class="command">sin</span>
 <span value="cos(" class="command">cos</span>
 <span value="tan(" class="command">tan</span>
 <span value="pi" class="command">π</span>
 <span class="operator">,</span>
 <span>7</span>
	<span>8</span>
	<span>9</span>
	<span class="operator">+</span>
	<span>4</span>
	<span>5</span>
	<span>6</span>
	<span class="operator">-</span>
	<span>1</span>
	<span>2</span>
	<span>3</span>
 <span value="/" class="operator">÷</span>
	<span>0</span>
	<span>.</span>
	<span class="eval">=</span>
	<span value="*" class="operator">x</span>

    </div>
</div>

CSS

/* Basic reset */
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Better text styling */
    font: bold 14px Arial, sans-serif;
}
/* Finally adding some IE9 fallbacks for gradients to finish things up */

/* A nice BG gradient */
 html {
    height: 100%;
    background: white;
    background: radial-gradient(circle, #fff 20%, #ccc);
    background-size: cover;
}
/* Using box shadows to create 3D effects */
 #calculator {
    width: 325px;
    margin: 0 auto;
    padding: 20px 20px 9px;
    /* Center the calculator in it's container */
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #BBD6F5;
    background: linear-gradient(#BBD6F5, #A1C4EB);
    border-radius: 3px;
    box-shadow: 0 5px #3D6B9F, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
/* Top portion */
 .top span.clear {
    float: right;
    margin: 0 0 11px 7px !important;
}
/* Solar battery */
 .top .battery {
    float: left;
    overflow: hidden;
}
.top .battery li {
    float: left;
    width: 20px;
    height: 30px;
    margin: 0 3px 17px 0;
    background: #FFE5BD;
    border-radius: 2px;
    box-shadow: 0 1px #BFB19A;
    list-style: none;
}
/* Brandind */
 .top .brand {
    float: right;
    margin: 5px 12px 0 0;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.6);
    cursor: default;
}
/* Inset shadow on the screen to create indent */
 .top .screen {
    height: 40px;
    width: 212px;
    float: left;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
}
.top .screen input {
    /* Style */
    border: 0;
    background: transparent;
    padding: 11px 10px;
    /* Typography */
    font-size: 17px;
    line-height: 40x;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    text-align: right;
    letter-spacing: 1px;
}
.top .screen input:focus {
    outline:...

JavaScript

// Get all the keys from document
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', '*', '/', ',', 'x', '÷'];
var decimalAdded = false;

var input = document.querySelector('.screen input');

// Add onclick event to all the keys and perform operations
for (var i = 0; i < keys.length; i++) {
    keys[i].onclick = function (e) {
        // Get the input and button values
        var inputVal = input.value;
        var btnVal = this.innerHTML;
        var btnValEq = this.getAttribute("value");

        // Now, just append the key values (btnValue) to the input string and finally use javascript's eval function to get the result
        // If clear key is pressed, erase everything
        if (btnVal == 'C') {
            input.value = '';
            decimalAdded = false;
        }

        // If eval key is pressed, calculate and display the result
        else if (btnVal == '=') {
            var equation = inputVal;
            calc();
            decimalAdded = false;
        }

        // Basic functionality of the calculator is complete. But there are some problems like 
        // 1. No two operators should be added consecutively.
        // 2. The equation shouldn't start from an operator except minus
        // 3. not more than 1 decimal should be there in a number

        // We'll fix these issues using some simple checks

        // indexOf works only in IE9+
        else if (operators.indexOf(btnVal) > -1) {
            // Operator is clicked
            // Get the last character from the equation
            var lastChar = inputVal[inputVal.length - 1];

            // Only add operator if input is not empty and there is no operator at the last
            if (inputVal != '' && operators.indexOf(lastChar) == -1) {
                if (btnValEq) insertAtCaret(btnValEq);
                else insertAtCaret(btnVal);
            }

            // Allow minus if the string is empty
            else if (inputVal == '' && btnVal...