<div id="calc" class="container">
    <div class="center">
        <div v-if="input" class="alert alert-primary text-right">
            {{ input }}
        </div>
        <div class="alert alert-primary text-right" v-else>
            0
        </div>
        <table>
            <tr>
                <td>
                    <button class="btn btn-primary" @click="append">(</button>
                </td>
                <td>
                    <button class="btn btn-primary" @click="append">)</button>
                </td>
                <td>
                    <button class="btn btn-primary" @click="append">**</button>
                </td>
                <td>
                    <button class="btn btn-primary" @click="append">/</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button class="btn btn-primary" @click="append">7</button>
                </td>
                <td>
                    <button class="btn btn-primary" @click="append">8</button>
                </td>
                <td>
                    <button class="btn btn-primary" @click="append">9</button>
                </td>
                <td>
                    <button class="btn btn-primary" @click="append">*</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button class="btn btn-primary" @click="append">4</button>
                </td>
                <td>
                    <button class="btn btn-primary" @click="append">5</button>
                </td>
                <td>
                    <button class="btn btn-primary" @click="append">6</button>
                </td>
                <td>
                    <button class="btn btn-primary" @click="append">-</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button class="btn btn-primary" @click="append">1</button>
                </td>
                <td>
                    <button class="btn btn-primary" @click="append">2</button>
                </td>
                <td>
                    <button class="btn btn-primary" @click="append">3</button>
                </td>
                <td>
                    <button class="btn btn-primary" @click="append">+</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button class="btn btn-primary" @click="clear">C</button>
                </td>
                <td>
                    <button class="btn btn-primary" @click="append">0</button>
                </td>
                <td>
                    <button class="btn btn-primary" @click="append">.</button>
                </td>
                <td>
                    <button class="btn btn-primary" @click="calc">=</button>
                </td>
            </tr>
        </table>
    </div>
</div>

.btn {
    height: 40px;
    width: 40px;
    margin: 2px;
    border-radius: 25%;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

body {
    background-color: black;
}

new Vue({
    el: '#calc',
    data: {
        input: ''
    },
    methods: {
        append(event) {
            this.input += event.target.innerText;
        },
        clear() {
            this.input = '';
        },
        calc() {
            this.input = eval(this.input);
        }
    }
});