Calculator Evaluator

Calculatin' on a hand stand; feel the Regex make u a real man; Calculatin' you'r calcu-plan; Gonna smash dem buttons till u is a calcu-fan.

by J. Jones

HTML

<div>
    <div class="tape"></div>
    <textarea class="readout" disabled></textarea>
</div>
<div>
    <ul class="ninekey">
        <li>
            <button class="button_1">1</button>
        </li>
        <li>
            <button class="button_2">2</button>
        </li>
        <li>
            <button class="button_3">3</button>
        </li>
        <li>
            <button class="button_4">4</button>
        </li>
        <li>
            <button class="button_5">5</button>
        </li>
        <li>
            <button class="button_6">6</button>
        </li>
        <li>
            <button class="button_7">7</button>
        </li>
        <li>
            <button class="button_8">8</button>
        </li>
        <li>
            <button class="button_9">9</button>
        </li>
        <li>
            <button class="button_0">0</button>
        </li>
                <li>
            <button class="button_period">.</button>
        </li>
    </ul>
    <ul class="operations">
        <li>
            <button class="button_plus">+</button>
        </li>
        <li>
            <button class="button_minus">-</button>
        </li>
        <li>
            <button class="button_multiply">*</button>
        </li>
        <li>
            <button class="button_divide">/</button>
        </li>
    </ul>
    <ul class="global">
        <li>
            <button class="button_clear">CE</button>
        </li>
        <li>
            <button class="button_calculate">Calculate!</button>
        </li>
    </ul>
</div>

CSS

textarea {
    width:100%
}
ul {
    list-style: none;
    padding: 0;
    margin:0;
    width:45%;
    float:left
}
ul.ninekey li:nth-child(3n -2) {
    float:left;
}
ul.ninekey li:nth-child(3n -1) {
    float:left;
}
ul.ninekey li:nth-child(3n) {
    float:none;
}
ul.operations li {
    float:left
}
ul.operations button {
}
ul.global button {
    width:100%
}
.tape { font-family: verdana; font-size: 10px; line-height: 10px}
.tape .operation { color: blue}
.tape .result { color: orange}

JavaScript

$(document).ready(function () {
    $('.ninekey, .operations, .global')
        .find('button').button();
    $('.ninekey, .operations').on('click', 'button', function () {
        $('.readout').text($('.readout').text() + $(this).text())
    });
    var clear = function () {
        $('.readout').text('');
    };
        
    var tape = function(state){
        $('.tape').append('<p class="'+state+'">' + $('.readout').text() + '</p>'  )
    }
    var calculate = function () {
        var result = eval($('.readout').text());
        tape('operation');
        clear();
        $('.readout').text(result)
        tape('result');
    };

    $('.button_clear').on('click', clear)
    $('.button_calculate').on('click', calculate);
    
    var clearnext = false;
    $(this).on('keypress', function (e) {

        if (clearnext) {
            clear();
            clearnext = false;
        }
        if (e.which > 47 && e.which < 58) {
            $('.button_' + (e.which - 48)).click()
        }else if (e.which === 46) {
            $('.button_period').click();
        } else if (e.which === 43) {
            $('.button_plus').click();
        } else if (e.which === 45) {
            $('.button_minus').click();
        } else if (e.which === 42) {
            $('.button_multiply').click();
        } else if (e.which === 47) {
            $('.button_divide').click();
        } else if (e.which === 13) {
            $('.button_calculate').click();
            clearnext = true;
        }
    })

});