Calculator

by Naydenov_it

HTML

<body>
    <form>
        <input type="text" disabled="disabled" id="display" placeholder="0" />
        <div>
            <input type="button" id="num1" name="calcInput" value="1" onclick="Global('num1')" />
            <input type="button" id="num2" value="2" onclick="Global('num2')" />
            <input type="button" id="num3" value="3" onclick="Global('num3')" />
            <input type="button" id="plus" value="+" onclick="Global('plus')" />
        </div>
        <div>
            <input type="button" id="num4" value="4" onclick="Global('num4')" />
            <input type="button" id="num5" value="5" onclick="Global('num5')" />
            <input type="button" id="num6" value="6" onclick="Global('num6')" />
            <input type="button" id="minus" value="-" onclick="Global('minus')" />
        </div>
        <div>
            <input type="button" id="num7" value="7" onclick="Global('num7')" />
            <input type="button" id="num8" value="8" onclick="Global('num8')" />
            <input type="button" id="num9" value="9" onclick="Global('num9')" />
            <input type="button" id="multiply" value="*" onclick="Global('multiply')" />
        </div>
        <div>
            <input type="button" id="num0" value="0" onclick="Global('num0')" />
            <input type="button" id="clear" value="C" onclick="Global('clear')" />
            <input type="button" id="dot" value="." onclick="Global('dot')" />
            <input type="button" id="result" value="=" onclick="Global('result')" />
            <input type="button" id="divide" value="/" onclick="Global('divide')" />
        </div>
    </form>
</body>

CSS

body {
    background-color: black;
    margin-left: 50px;
    margin-top: 50px;
}
form {
    border: 3px solid #feb509;
    width: 190px;
    height: 290px;
    padding: 10px;
    background-color: #1751ac;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-family:'Arial Narrow', 'Nimbus Sans L', sans-serif;
}
form:hover {
    background: #31dbac;
    border: 3px solid #fff;
    cursor: pointer;
}
form:hover input[type="text"] {
    border: 2px dashed #fff;
    background: black;
    color: #fff;
    outline: none;
    font-family:'Arial Narrow', 'Nimbus Sans L', sans-serif;
    font-size: 1.5em;
}
form div {
    width: 100%;
    height: 17%;
    margin-bottom: 4px;
}
form div input {
    width: 21%;
    height: 95%;
    margin: 2px;
    font-size: 1.5em;
}
form div:first-of-type {
    margin-top: 10px;
}
form input[type="text"] {
    text-align: right;
    width: 95%;
    height: 20%;
    padding-right: 5px;
    color: #242006;
    font-size: 1.5em;
    font-family:'Arial Narrow', 'Nimbus Sans L', sans-serif;
    outline: none;
    border: 2px solid black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
form div input[type="button"] {
    border: 1px outset black;
    color: black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color: #ffd800;
    font-family:'Arial Narrow', 'Nimbus Sans L', sans-serif;
    outline: none;
    background: #c9de96;
    /* Old browsers */
    background: -moz-linear-gradient(top, #c9de96 0%, #8ab66b 46%, #398235 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9de96), color-stop(46%, #8ab66b), color-stop(100%, #398235));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #c9de96 0%, #8ab66b 46%, #398235 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #c9de96 0%, #8ab66b 46%, #398235 100%);
    /*...

JavaScript

function Global(id) {
    var str = document.getElementById("display").value;
    var val = document.getElementById(id).value;

    if (str[str.length - 1] === " " && (val !== "+" && val !== "-" && val !== "*" && val !== "/")) {
        document.getElementById("display").value = "";
    }

    addValues(id);

    function addValues(id) {
        var inputedValue = document.getElementById(id).value;
        var input = document.getElementById("display").value || "";
        var array = input.split('');

        if (array.length === 0 && (inputedValue === "-" || inputedValue === "+" || inputedValue === "/" || inputedValue === "*")) {

            document.getElementById("display").value += 0;
            document.getElementById("display").value += inputedValue;

        } else if (inputedValue === "C") {
            document.getElementById("display").value = "";
        } else if (inputedValue === "=") {
            var numArray = [];

            for (var i = 0; i < array.length; i++) {

                var current = array[i];
                var currenrValue = "";
                while (i < array.length && (current !== "+" && current !== "-" && current !== "*" && current !== "/")) {
                    currenrValue += current;
                    i++;
                    current = array[i];
                }
                numArray.push(currenrValue - 0);
            }

            var index = 1;
            result = numArray[0];

            for (var i = 0; i < array.length; i++) {
                current = array[i];
                if (current === "+") {
                    result += numArray[index];
                    index++;
                } else if (current === "-") {
                    result -= numArray[index];
                    index++;
                } else if (current === "*") {
                    result *= numArray[index];
                    index++;
                } else if (current === "/") {
                    result /= numArray[index];
...