This code snippet utilizes the Vue.js framework to create a simple calculator application. The Vue instance sets up the application by defining data properties such as calculation and tempResult, which hold the calculation string and temporary result respectively.
The output of this code is a fully functional calculator application with an intuitive user interface. Users can input mathematical expressions and perform calculations by clicking on the provided buttons. The calculator supports basic arithmetic operations such as addition, subtraction, multiplication, and division. It dynamically displays the current calculation and updates the result in real time.
The code also includes animations to enhance the user experience, with buttons responding to click events with smooth transitions. Overall, the output of this code provides a user-friendly and visually appealing calculator that simplifies mathematical calculations on web applications.
How to Create a Simple Calculator Using Vue Js
First of all, load the Google Fonts CSS by adding the following CDN link into the head tag of your HTML document.
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
To implement this calculator in your project, you can simply copy and paste the provided HTML code into your project’s HTML file or template. The calculator is wrapped inside a div element with the id of “app”. This serves as the root element for the Vue.js application.
<div id="app" v-cloak>
<div id="calculator">
<div class="screen-container">
<div class="result">
<transition name="slide-fade">
<div class="number" :style="{fontSize : fontSize + 'px'}" v-if="tempResult !== ''" v-cloak>{{ tempResult | number | hugeNumber }}</div>
</transition>
</div>
<div class="calculation">
<div class="number" v-cloak>{{ calculation | number | calculation}}</div>
</div>
</div>
<div class="btn-container">
<div class="oper-container">
<div class="btn" id="clear" @click="clear()">
<div class="number">AC</div>
</div>
<div class="btn operations divide" @click="append('/')">
<div class="number">÷</div>
</div>
<div class="btn operations multiplication" @click="append('*')">
<div class="number">×</div>
</div>
<div class="btn operations plus" @click="append('+')">
<div class="number">+</div>
</div>
<div class="btn operations less" @click="append('-')">
<div class="number">-</div>
</div>
</div>
<div class="row">
<div class="btn" @click="append('7')">
<div class="number">7</div>
</div>
<div class="btn" @click="append('8')">
<div class="number">8</div>
</div>
<div class="btn" @click="append('9')">
<div class="number">9</div>
</div>
<!-- <div class="btn" @click="append('/')">÷</div> -->
</div>
<div class="row">
<div class="btn" @click="append('4')">
<div class="number">4</div>
</div>
<div class="btn" @click="append('5')">
<div class="number">5</div>
</div>
<div class="btn" @click="append('6')">
<div class="number">6</div>
</div>
<!-- <div class="btn" @click="append('*')">×</div> -->
</div>
<div class="row">
<div class="btn" @click="append('1')">
<div class="number">1</div>
</div>
<div class="btn" @click="append('2')">
<div class="number">2</div>
</div>
<div class="btn" @click="append('3')">
<div class="number">3</div>
</div>
<!-- <div class="btn" @click="append('-')">-</div> -->
</div>
<div class="row">
<div class="btn" id="dot" @click="append('.')">
<div class="number">.</div>
</div>
<div class="btn" @click="append('0')">
<div class="number">0</div>
</div>
<div class="btn">
<div class="number"></div>
</div>
<div class="btn" id="result" @click="getResult()">
<div class="number">=</div>
</div>
<!-- <div class="btn" @click="append('+')">+</div> -->
</div>
</div>
</div>
</div>
Style the calculator using the following CSS styles:
#app {
width: 100%;
height: 100%;
display: flex;
font-family: "Roboto", sans-serif;
font-weight: 300;
font-size: 24px;
}
#app #calculator {
opacity: 0;
-webkit-animation: 1s bounceIn;
animation: 1s bounceIn;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
margin: 10px;
border-radius: 8px;
color: #ffffff;
box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.5);
margin: auto;
height: 540px;
width: 300px;
background: #191b1d;
}
#app #calculator .screen-container {
width: 100%;
height: 38%;
display: flex;
flex-direction: column;
position: relative;
justify-content: center;
text-align: right;
}
#app #calculator .screen-container .calculation,
#app #calculator .screen-container .result {
width: 100%;
height: 50%;
padding-right: 15px;
}
#app #calculator .screen-container .result {
display: flex;
align-items: flex-end;
color: #1939f6;
justify-content: flex-end;
}
#app #calculator .screen-container .result .number {
font-size: 50px;
font-weight: 800;
}
#app #calculator .btn-container {
width: 100%;
height: 62%;
display: flex;
flex-direction: column;
position: relative;
}
#app #calculator .btn-container .oper-container {
z-index: 10;
opacity: 0;
-webkit-animation: 1s bounceIn;
animation: 1s bounceIn;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
position: absolute;
width: 50px;
left: -25px;
box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.5);
top: -100px;
}
#app #calculator .btn-container .oper-container .btn {
position: static;
width: 50px;
height: 50px;
background: #1939f6;
color: #1939f6;
background: #ffffff;
display: flex;
cursor: pointer;
}
#app #calculator .btn-container .oper-container .btn .number {
margin: auto;
}
#app #calculator .btn-container .oper-container .btn#clear.animate {
-webkit-animation: fade 0.12s ease-in-out;
animation: fade 0.12s ease-in-out;
animation-direction: reverse;
}
#app #calculator .btn-container .oper-container .btn#clear {
cursor: pointer;
height: 50px;
width: 50px;
display: flex;
background: #1e2022;
border-radius: 8px 0px 0 0;
font-size: 16px;
box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.5);
}
#app #calculator .btn-container .oper-container .btn#clear .number {
margin: auto;
color: #ffffff;
}
#app #calculator .btn-container .row {
position: relative;
display: flex;
flex-direction: row;
width: 100%;
height: 25%;
}
#app #calculator .btn-container .row .btn {
cursor: pointer;
width: 100%;
height: 100%;
text-align: center;
display: flex;
border: 0.5px solid #191b1d;
background: #1e2022;
}
#app #calculator .btn-container .row .btn .number {
opacity: 0;
-webkit-animation: 1s fadeIn;
animation: 1s fadeIn;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
margin: auto;
}
#app #calculator .btn-container .row .btn:nth-child(1) {
border-left: none;
}
#app #calculator .btn-container .row .btn:nth-child(3) {
border-right: none;
}
#app #calculator .btn-container .row .btn.animate {
-webkit-animation: fade 0.12s ease-in-out;
animation: fade 0.12s ease-in-out;
}
#app #calculator .btn-container .row .btn#result {
position: absolute;
right: -12px;
bottom: -12px;
width: calc(33% * 1.25);
height: calc(100% * 1.25);
background: #1939f6;
border-bottom-right-radius: 8px;
border: 0.5px rgba(0, 0, 0, 0.0001);
}
#app #calculator .btn-container .row .btn#result:not(.resetappearanim) {
opacity: 0;
-webkit-animation: 1s bounceIn;
animation: 1s bounceIn;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#app #calculator .btn-container .row .btn#result.animate {
-webkit-animation: fade 0.12s ease-in-out;
animation: fade 0.12s ease-in-out;
animation-direction: reverse;
}
#app #calculator .btn-container .row .btn#dot {
border-bottom-left-radius: 8px;
}
#app #calculator .btn-container .row:last-child .btn {
border-bottom: none;
}
#app #calculator .btn-container .btn.operations.animate {
-webkit-animation: fadeThird 0.12s ease-in-out;
animation: fadeThird 0.12s ease-in-out;
animation-direction: reverse;
}
#app #calculator .btn-container .btn.operations.divide {
left: calc(33% - 25px);
top: calc(25% - 25px);
}
#app #calculator .btn-container .btn.operations.multiplication {
left: calc(66% - 25px);
top: calc(25% - 25px);
}
#app #calculator .btn-container .btn.operations.plus {
left: calc(66% - 25px);
top: calc(50% - 25px);
}
#app #calculator .btn-container .btn.operations.less {
left: calc(33% - 25px);
top: calc(50% - 25px);
border-radius: 0 0 8px 0;
}
@-webkit-keyframes fade {
from {
background: #1e2022;
}
to {
background: #1939f6;
}
}
@keyframes fade {
from {
background: #1e2022;
}
to {
background: #1939f6;
}
}
@-webkit-keyframes fadeThird {
from {
background: #ffffff;
}
to {
background: #1e2022;
}
}
@keyframes fadeThird {
from {
background: #ffffff;
}
to {
background: #1e2022;
}
}
@-webkit-keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes bounce {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes bounce {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.slide-fade-enter-active {
transition: all 0.3s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
*:focus {
outline: none;
}
@media screen and (max-width: 500px) {
#app {
transform: scale(0.8) translateY(-50px);
}
}
*::-moz-selection {
background: #1939f6;
color: #ffffff;
}
*::selection {
background: #1939f6;
color: #ffffff;
}
[v-cloak] {
display: none;
}
Add the following Vue JS CDN links before the closing body tag to load Vue JS.
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js'></script>
Finally, activate the calculator functionalities by adding the following JavaScript function.
String.prototype.replaceAll = function(search, replacement) {
var target = this;
return target.split(search).join(replacement);
};
new Vue({
el: '#app',
data: {
// calculation:'15*98',
// tempResult:'1470',
calculation:'',
tempResult:'',
},
mounted() {
let btns = document.querySelectorAll('.btn')
for (btn of btns) {
btn.addEventListener('click',function() {
this.classList.add('animate')
this.classList.add('resetappearanim')
})
btn.addEventListener('animationend',function() {
this.classList.remove('animate')
})
}
},
methods: {
append(value) {
this.calculation += value.toString()
},
clear() {
this.calculation = ''
this.tempResult = ''
},
getResult() {
if(this.tempResult != ''){
this.calculation = this.tempResult
//this.tempResult = ''
}
},
backspace() {
this.calculation = this.calculation.slice(0,-1)
}
},
watch: {
calculation() {
if(this.calculation !== '' && !isNaN(this.calculation.slice(-1)) && this.calculation != this.result ){
this.tempResult = this.result.toString()
}
}
},
computed: {
result() {
if(!isNaN(this.calculation.slice(-1)))
return eval(this.calculation)
else
return eval(this.calculation.slice(0, -1))
},
fontSize() {
return this.fontSize = 50-(this.tempResult.length*1.25)
}
},
filters: {
hugeNumber: (value) => {
let parts = value.toString().split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, " ");
return parts.join(".");
},
number: (value) => {
return value.replaceAll('*','x')
},
calculation: (value) => {
return value.replaceAll('x',' x ').replaceAll('/',' / ').replaceAll('+',' + ').replaceAll('-',' - ')
}
}
})
That’s all! hopefully, you have successfully created a simple calculator using Vue Js. If you have any questions or suggestions, feel free to comment below.
