My calculator project using VueJS, HTML and CSS is almost complete. However, I'm facing an issue where it only works once. For example, if I input 6x3, it correctly gives me 18. But if I then clear the result and try to input a new calculation like 3 x 2, it does not work as expected and displays 32 instead. The problem persists until I reload the webpage, which creates a frustrating loop. I'm in need of assistance to resolve this issue.
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="Calcss.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="icon" href="Cal.png">
<link href="https://fonts.googleapis.com/css2?family=Belanosima:wght@600&family=Pangolin&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="Title">
<div class="bar">
<h1>CalculationMaster</h1>
</div>
</div>
<div class="all">
<div id="app">
<div id="calculator">
<div id="screen">{{currentNum}}</div>
<div @click="oposite" class="btn">-/+</div>
<div @click="percentage" class="btn">%</div>
<div @click="log" class="btn">log</div>
<div @click="clear" class="btn operator">C</div>
<div @click="enter(7)" class="btn">7</div>
<div @click="enter(8)" class="btn">8</div>
<div @click="enter(9)" class="btn">9</div>
<div @click="divide" class="btn operator">÷</div>
<div @click="enter(4)" class="btn">4</div>
<div @click="enter(5)" class="btn">5</div>
<div @click="enter(6)" class="btn">6</div>
<div @click="multiply" class="btn operator">x</div>
<div @click="enter(1)" class="btn">1</div>
<div @click="enter(2)" class="btn">2</div>
<div @click="enter(3)" class="btn">3</div>
<div @click="subtract" class="btn operator">-</div>
<div @click="enter(0)" class="btn">0</div>
<div @click="decimal" class="btn">.</div>
<div @click="equal" class="btn operator">=</div>
<div @click="addition" class="btn operator">+</div>
</div>
</div>
<div id="hello">
<img :src="ci" alt="Cipheros Image" style="width: 50px; border-radius: 10px; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);"/>
<p style="font-size: 10px;">
Created by Cipheros.
</p>
</div>
</div>
<script src="CalJs.js"></script>
<script>
new Vue ({
el: "#hello",
data: {
ci: 'Cipheros.png'
},
});
</script>
</body>
</html>
Here is the CSS code:
'''
body {
background-color: #2c2929;
color: white;
text-align: center;
justify-content: center;
align-items: center;
font-family: 'Belanosima', sans-serif;
font-family: 'Pangolin', cursive;
}
.bar {
background-color: rgb(57, 165, 105);;
padding: 1px 0;
margin-top: 2.5%;
margin-bottom: 3%;
}
h1{
font-size: 40px;
}
.all {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
margin-left: 40px;
gap: 15px;
}
#calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(40px, auto);
width: 80vh;
text-align: center;
font-size: 30px;
margin: 10px auto;
background-color: #595757;
border-radius: 10px;
}
#screen{
display: grid;
grid-column: 1/5;
margin-bottom: 5%;
align-items: center;
text-align: center;
justify-content: center;
}
.btn {
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
margin: 1.5px;
background-color: #807d7d;
}
.operator {
background-color: mediumseagreen;
}
#hello{
gap: 1px;
}
'''
And here is the JS code using VueJS:
'''
new Vue ({
el: '#calculator',
data:{
currentNum: '',
operation: '',
clicked: false
},
methods:{
enter(number){
if (this.clicked){
this.currentNum = '';
this.clicked = false
}
this.currentNum = `${this.currentNum}${number}`;
},
clear(){
this.currentNum = '';
},
oposite() {
this.currentNum = this.currentNum.charAt(0) === '-' ?
this.currentNum.slice(1) : `-${this.currentNum}`;
},
decimal(){
if (this.currentNum.indexOf('.') === -1){
this.enter('.');
}
},
percentage(){
this.currentNum = `${parseFloat(this.currentNum) / 100 }`
},
log(){
this.operation = `log(${this.currentNum})`;
this.currentNum = `${Math.log(parseFloat(this.currentNum))}`;
},
previous(){
this.previous = this.currentNum
this.clicked = true;
},
multiply(){
this.operator = (a, b) => a * b;
this.previous();
},
addition(){
this.operator = (a, b) => a + b;
this.previous();
},
subtract(){
this.operator = (a, b) => a - b;
this.previous();
},
divide(){
this.operator = (a, b) => a / b;
this.previous();
},
equal(){
if (this.operation) {
this.currentNum = `${this.operation} = ${this.currentNum}`;
this.operation = '';
}
else
this.currentNum = `${this.operator(
parseFloat(this.previous),
parseFloat(this.currentNum),
)}`
this.previous = null;
},
}
});
'''
I would greatly appreciate any help in resolving this issue so that the calculator functions properly all the time.
[enter image description here](https://i.sstatic.net/PAq2F.png)