Calculator

by Polina Petrova

HTML

<table>
        <colgroup>
            <col />
            <col />
            <col />
            <col />
        </colgroup>
        <thead>
            <tr>
                <td colspan="4">
                    <form>
                        <input id="output" type="text" name="output" placeholder="0" readonly="readonly" autofocus onkeypress="searchKeyPress(event)">
                    </form>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="button" name="one" value="1" onclick="calculate(1)" /></td>
                <td><input type="button" name="two" value="2" onclick="calculate(2)" /></td>
                <td><input type="button" name="three" value="3" onclick="calculate(3)" /></td>
                <td><input type="button" name="plus" value="+" onclick="calculate('+')" /></td>
            </tr>
            <tr>
                <td><input type="button" name="four" value="4" onclick="calculate(4)" /></td>
                <td><input type="button" name="five" value="5" onclick="calculate(5)" /></td>
                <td><input type="button" name="six" value="6" onclick="calculate(6)" /></td>
                <td><input type="button" name="minus" value="-" onclick="calculate('-')" /></td>
            </tr>
            <tr>
                <td><input type="button" name="seven" value="7" onclick="calculate(7)" /></td>
                <td><input type="button" name="eight" value="8" onclick="calculate(8)" /></td>
                <td><input type="button" name="nine" value="9" onclick="calculate(9)" /></td>
                <td><input type="button" name="multiplication" value="*" onclick="calculate('*')" /></td>
            </tr>
            <tr>
                <td><input type="button" name="clear" value="C" onclick="calculate('clear')" /></td>
                <td><input type="button" name="zero" value="0" onclick="calculate(0)" /></td>
                <td><input type="button" name="equal" value="="...

CSS

html{    
    font-family:Arial, Helvetica, sans-serif;
    font-size:24px;   
}
table{
    margin: 0 auto;
    padding:0;
    border:10px solid #ccc;
    border-radius: 4px;
    border-spacing: 0;  
}
col{
    width: 50px;    
}
tr{
    height: 50px;
}
td {
    text-align: center;
    background-color: #ccc;
    border: 0;    
    margin: 0;        
}
input {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    width:100%;
    height: 50px;      
}

#output {
    background-color: #fff;
    text-align: right;
    width: 220px;
    height: 45px;
    border:1px solid #A2A2A2;
    border-radius: 2px;    
    padding-right:10px;
}

JavaScript

function calculate(input) {
    var output = document.getElementById('output').value;
    switch(input) {
        case "clear": output = ""; break;
        case "=": output = eval(output); break;
        default: output += input; break;
    }
    document.getElementById('output').value = output;
}