Whywontyourun

HTML

<div id="can">Tutorial:
        <br>You can use Brackets!
        <br>You can even call Javascript functions such as Math.pow or Math.sqrt()
        <br>You can(should) use the keyboard!
        <br>You're all set up.</div>
    <table align="right">
        <tr>
            <th colspan="4">
                <form id="calculator" onsubmit="calc(); return false;" autocomplete="off" clear="none">
                    <input type="text" id="result">
                </form>
            </th>
        </tr>
        <tr>
            <td>
                <button id="1" class="symbol" onclick="return add(this.id)">1</button>
            </td>
            <td>
                <button id="2" class="symbol" onclick="return add(this.id)">2</button>
            </td>
            <td>
                <button id="3" class="symbol" onclick="return add(this.id)">3</button>
            </td>
            <td>
                <button id="+" class="action" onclick="return add(this.id)">+</button>
            </td>
        </tr>
        <tr>
            <td>
                <button id="4" class="symbol" onclick="return add(this.id)">4</button>
            </td>
            <td>
                <button id="5" class="symbol" onclick="return add(this.id)">5</button>
            </td>
            <td>
                <button id="6" class="symbol" onclick="return add(this.id)">6</button>
            </td>
            <td>
                <button id="-" class="action" onclick="add(this.id)">-</button>
            </td>
        </tr>
        <tr>
            <td>
                <button id="7" class="symbol" onclick="return add(this.id)">7</button>
            </td>
            <td>
                <button id="8" class="symbol" onclick="return add(this.id)">8</button>
            </td>
            <td>
                <button id="9" class="symbol" onclick="return add(this.id)">9</button>
            </td>
            <td>
                <button id="*" class="action" onclick="return...

CSS

* {
    text-decoration: none;
    font-size: 28pt;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input {
    width: 100%;
    background-color: #494949;
    color: #cfcfcf;
    border: 3px;
    border-color: #ffffff;
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
body {
    background-color: #121212;
}
table {
    float:right;
    position: fixed;
    table-layout: fixed;
    background-color: #dfdfdf;
    vertical-align: bottom;
    top:58%;
    left: 70%;
    width: 30%;
    height:40%;
}
tr {
    height: 50px;
}
button {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #dfdfdf;
    -webkit-transition: background 0.30s ease;
    -moz-transition: background 0.30s ease;
    -ms-transition: background 0.30s ease;
    -o-transition: background 0.30s ease;
    transition: background 0.30s ease;
}
button:hover {
    background-color: #252525;
    border-color: #252525;
    color: #cfcfcf;
}
#can {
    font-family: helvetica;
    font-size: 16px;
    width: 100%;
    color: #696969;
}

JavaScript

var res = "";
var firstRun = true;

function calc() {

    if (firstRun) {
        setBG();
        firstRun = false;
    };

    res = document.getElementById('result').value;
    document.getElementById('can').innerHTML += "<br>" + res + "=" + eval(document.getElementById('result').value);
    document.getElementById('result').value = eval(res);
    res = document.getElementById('result').value;

}

function add(id) {
    if (firstRun) {
        setBG();
        firstRun = false;
    };
    document.getElementById('result').value += id;
    res += id;
    document.getElementById('can').innerHTML += id;
}

function empty() {
    document.getElementById('result').value = "";
    res = "";
    document.getElementById('can').innerHTML = null;
}

function setBG() {
    var a = document.getElementById('can')
    a.innerHTML = null;
    a.style.fontFamily = ("Old Standard TT")
    a.style.letterSpacing = ("5px");
    a.style.fontSize = ("28px");
    a.style.color = ("#afafaf");
}