JavaScript Calculator

ℹ Intro

This article will go over creating an efficient and reactive JavaScript Calculator.

JavaScript introduces a global method called eval() that will allow us to calculate expressions.

Vue will keep the app reactive at every button press.

Bootstrap will style our site and keep it fresh.

🛠 Example

We will go over the JavaScript and some of the HTML you need to get started building a Calculator.

⚡ JavaScript

This Vue instance will attach itself to the id attribute of calc. We have supplied methods used to append + clear + calc the input.

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

📄 HTML

With Vue we can use conditional rendering to check if the input is empty. The input is reactive so it will update on the page if it changes.

<div v-if="input" class="alert alert-primary text-right">
    {{ input }}
</div>
<div class="alert alert-primary text-right" v-else>
    0
</div>

Here are a few buttons we will be using. Vue will register event listeners for the click event and run the desired methods.

<button class="btn btn-primary" @click="append">3</button>
<button class="btn btn-primary" @click="clear">C</button>
<button class="btn btn-primary" @click="calc">=</button>

👩‍💻 Codepen

You can checkout the finished product here!

📚 Resources

🔗 JavaScript Eval
🔗 Vue
🔗 Bootstrap