What I’ve Learned from Building a Calculator with Vue.js

For my fourth project, I developed a Calculator app using Vue.js. It was a valuable experience in understanding how to handle user input, display dynamic results, and perform calculations with JavaScript. Here’s a breakdown of the key lessons I learned while building this app.

1. Handling User Input and Updating the Display

The calculator needs to accept user input (numbers and operators) and update the display dynamically. I used Vue's reactive properties to keep track of the current input and result. The ref function in Vue made it easy to store and modify these values:

const result = ref('');
const calculated = ref(false);

Every time a user clicks on a number or operator, the result property updates, ensuring that the display shows the most recent input. The function handleClick is used to append values to the result:

const handleClick = (value) => {
    if (calculated.value) {
        result.value = value; // Reset the result if a calculation was just completed
        calculated.value = false;
    } else {
        result.value += value;
    }
}

This was an essential lesson in handling user interaction and updating the interface based on reactive properties.

2. Managing Operators: Avoiding Redundant Input

One key challenge in building a calculator is ensuring that multiple operators are not added consecutively (e.g., avoiding inputs like 3++4). To address this, I added a check to replace an operator if the last character is already an operator:

const handleOperatorClick = (operator) => {
    if (/[+*/-]$/.test(result.value)) {
        result.value = result.value.slice(0, -1) + operator; // Replace the last operator
    } else {
        result.value += operator; // Add the new operator
    }
    calculated.value = false; // Reset flag
};

This method ensures that only one operator is present at the end of the input string, improving the robustness of the calculator.

3. Clearing and Deleting Input

The calculator needs to provide functionality for clearing all input (using the AC button) or deleting the last input character (using the DEL button). I implemented these two actions with the clearAll and clear methods:

• Clear All (AC): Resets the entire input.

const clearAll = () => {
    result.value = '';
    calculated.value = false;
};

• Delete Last Character (DEL): Removes the last character of the input string.

const clear = () => {
    if (result.value && result.value.length > 0) {
        result.value = result.value.slice(0, -1); // Remove the last character
        if (result.value.length === 0) {
            clearAll(); // If the input is empty, reset everything
        }
    } else {
        clearAll();
    }
};

This was a useful exercise in handling string manipulation and providing a smooth user experience.

4. Performing Calculations

One of the core functionalities of a calculator is to evaluate expressions entered by the user. I used JavaScript’s built-in eval() function to calculate the result of the input expression:

const calculate = () => {
    let stringifiedResult = new String(result.value);
    result.value = eval(String(stringifiedResult)); // Evaluate the expression
    calculated.value = true; // Set flag to indicate the calculation is done
};

While eval() is simple and effective for this basic calculator, I’ve learned about the potential security risks it poses when handling arbitrary user input. In future projects, I may explore writing a custom parser for improved safety and flexibility.

5. User Interface with Vue and Bootstrap

To build the calculator interface, I used Bootstrap for quick and responsive design. The buttons are arranged in a grid with appropriate color coding for numbers and operators:

<div class="row text-center border">
    <div class="col-3 border bg-dark text-white" @click="handleClick('7')">7</div>
    <div class="col-3 border bg-dark text-white" @click="handleClick('8')">8</div>
    <div class="col-3 border bg-dark text-white" @click="handleClick('9')">9</div>
    <div class="col-3 border bg-warning" @click="handleOperatorClick('-')">-</div>
</div>

I learned how to combine Vue’s event handling with Bootstrap’s classes to create a visually appealing and responsive calculator interface.

6. Handling Edge Cases and Enhancing UX

I encountered several edge cases while building the calculator. For example, after performing a calculation, if a user enters a new number, the calculator needs to reset the previous result. This was handled by checking the calculated flag:

if (calculated.value) {
    result.value = value; // Replace the result with the new value
    calculated.value = false; // Reset the calculated flag
}

Another useful feature was formatting the display to make it more intuitive, like automatically replacing the last operator if the user changes their mind, improving the user experience.

Final Thoughts: What I’ve Gained from Building a Calculator

This project provided a deep dive into handling dynamic input, managing state, and building a clean user interface using Vue.js. I gained practical knowledge in the following areas:

• State management: How to track and update the user’s input and result dynamically.
• Event handling: Responding to user actions (number clicks, operator clicks, and calculating results).
• UI/UX considerations: Ensuring that the calculator handles edge cases gracefully, and provides a clear and intuitive user interface.
• String manipulation: Parsing and manipulating input strings to create valid mathematical expressions.

Building this calculator was a rewarding experience that strengthened my ability to manage user input and create dynamic, interactive web applications using Vue.js. Looking forward to applying these skills to more complex projects!