Build a Sleek, Modern Calculator with Vue.js 3 and CSS Grid

Building a calculator is often one of the first projects you tackle when learning a new JavaScript framework. It's the perfect exercise: it combines state management (tracking numbers and operations), UI logic, and event handling.

But why stop at a basic, functional calculator? In this article, we'll not only build the logic for a calculator using Vue.js 3 and its fantastic Composition API, but more importantly, we'll give it a modern, professional look inspired by a popular design, leveraging the power of CSS Grid.

The final result is live here, and all the code is available in this GitHub repository:
➡️ https://github.com/VincentCapek/calculator

Step 1: Setting Up the Vue.js Project

To get started, nothing beats Vue's official project scaffolding tool:

npm create vue@latest 

For this project, we don't need complex features like Vue Router or Pinia. I simply enabled ESLint and Prettier to ensure clean, consistent code.

Once the project is created, navigate into the directory, install the dependencies, and start the development server:

cd your-project-name npm install npm run dev 

We'll be working in a single file for this entire tutorial: src/App.vue.

Step 2: The Calculator Logic with the Composition API

This is the "brain" of our application. Thanks to the Composition API and the <script setup> syntax, our logic is both reactive and highly readable.

We need a few state variables to keep track of what's happening:

import { ref } from 'vue'; // The main display of the calculator const current = ref(''); // The previous number, stored after an operator is clicked const previous = ref(null); // The selected operator (+, -, etc.) const operator = ref(null); // A flag to know if an operator was just clicked const operatorClicked = ref(false); 

ref() is Vue 3's way of creating reactive variables. Whenever their .value changes, the UI updates automatically. It's like magic!

Next, we define the functions that bring our calculator to life:

• clear(): Resets everything. This is our "AC" button.
• append(char): Adds a digit or a decimal point to the current value.
• setOperator(op): Stores the current value, saves the operator, and gets ready for the next number.
• calculate(): Performs the calculation and updates the display.

Here's the complete script, which also includes a little bonus: handling division by zero.

<script setup> import { ref } from 'vue'; const current = ref(''); const previous = ref(null); const operator = ref(null); const operatorClicked = ref(false); const clear = () => { current.value = ''; previous.value = null; operator.value = null; operatorClicked.value = false; }; const append = (char) => { if (operatorClicked.value) { current.value = ''; operatorClicked.value = false; } if (char === '.' && current.value.includes('.')) return; current.value = `${current.value}${char}`; }; const setOperator = (op) => { if (current.value === '') return; if (operator.value !== null) { calculate(); } previous.value = current.value; operator.value = op; operatorClicked.value = true; }; const calculate = () => { if (operator.value === null || previous.value === null) return; let result; const prev = parseFloat(previous.value); const curr = parseFloat(current.value); // Handle division by zero if (operator.value === '÷' && curr === 0) { current.value = 'Error'; previous.value = null; operator.value = null; return; } switch (operator.value) { case '+': result = prev + curr; break; case '-': result = prev - curr; break; case 'x': result = prev * curr; break; case '÷': result = prev / curr; break; } current.value = String(result); previous.value = null; operator.value = null; }; </script> 

Step 3: The HTML Structure (The Skeleton)

For better semantics and accessibility, we'll use appropriate HTML elements:

• An <input type="text" readonly> for the display screen.
• Real <button> elements for all the keys.

The template is directly tied to our logic. Notice how we call the functions with arguments directly from the @click event handler, which is a clean and robust approach.

<template> <div class="calculator"> <input type="text" class="calculator-screen" :value="current || '0'" readonly /> <div class="calculator-keys"> <!-- Operators --> <button type="button" class="operator" @click="setOperator('+')">+</button> <!-- ... other operators --> <!-- Digits --> <button type="button" @click="append('7')">7</button> <!-- ... other digits --> <!-- Special Functions --> <button type="button" class="all-clear" @click="clear">AC</button> <button type="button" class="equal-sign operator" @click="calculate">=</button> </div> </div> </template> 

 Step 4: The Magic of CSS (The Design)

This is where our calculator truly comes to life !

1. The Background and "Glassmorphism" Effect

The page body gets a beautiful linear gradient, while the calculator itself has a semi-transparent background with a backdrop-filter. This creates the trendy "glassmorphism" effect, making it look like frosted glass.

body { background: linear-gradient(to right, #6190e8, #a7bfe8); } .calculator { box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.15); background-color: rgba(255, 255, 255, .75); backdrop-filter: blur(5px); } 

2. A Perfect Layout with CSS Grid

The button layout is managed with display: grid, making it robust and easy to maintain. grid-gap creates a uniform spacing between each button.

.calculator-keys { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; padding: 20px; } 

3. The Spanning "Equals" Button

The highlight of this design is the = button, which spans multiple rows. This is incredibly simple to achieve with the grid-area property. The syntax grid-area: row-start / col-start / row-end / col-end; gives us complete control.

.equal-sign { /* Starts on grid row 2, column 4, and spans down to row 6, column 5 */ grid-area: 2 / 4 / 6 / 5; height: 100%; } 

4. Hover Effects that Respect Contrast

This is a crucial UX detail. A generic grey :hover state on all buttons would ruin the design of the colored ones (white text on a light grey background is nearly unreadable). The solution is to define specific hover states for each button type, simply by making their base color slightly lighter.

/* Hover for numeric buttons */ button:hover { background-color: #f0f0f0; } /* SPECIFIC hover for operators */ .operator:hover { background-color: #469dcb; /* A lighter blue */ } /* SPECIFIC hover for the "AC" button */ .all-clear:hover { background-color: #f26f74; /* A lighter red */ } 

Conclusion

And there you have it! We've built a calculator that is not only functional, thanks to the reactive power of Vue.js 3, but is also visually stunning using modern CSS techniques.

This project is a great example of how fundamentals are key, but with a bit of attention to design and user experience, you can turn a simple learning exercise into a portfolio piece you can be proud of.

Thanks for reading, and happy coding !