Commit 0f0a2e12 authored by cc201010's avatar cc201010
Browse files

Porting the Calculator App that I have created.

parent 928480d1
<template>
<div class="container">
<h1>Calculator with VueJs</h1>
<div class="calculator">
<div id="screen">{{current || 0 }}</div>
<table>
<tr>
<td @click="restResult"><button class="btn">C</button></td>
<td v-for="op in operatorsSet" @click="setModifier(op)"><button class="btn">{{op}}</button></td>
</tr>
<tr>
<td v-for="no1 in operatorPlusKey1" @click="setModifier(no1)"><button class="btn">{{no1}}</button></td>
</tr>
<tr>
<td v-for="no2 in operatorPlusKey2" @click="setModifier(no2)"><button class="btn">{{no2}}</button></td>
</tr>
<tr>
<td v-for="no3 in operatorPlusKey3" @click="setModifier(no3)"><button class="btn">{{no3}}</button></td>
</tr>
<tr>
<td v-for="no4 in operatorPlusKey4" @click="setModifier(no4)"><button class="btn">{{no4}}</button></td>
<td @click="showResult"><button class="btn">=</button></td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default{
data() {
return {
current : '',
operatorsSet : ["(" , ")", "%"],
operatorPlusKey1:[7,8,9,"*"],
operatorPlusKey2:[4,5,6,"-"],
operatorPlusKey3:[1,2,3,"+"],
operatorPlusKey4:[0,".","/"],
numberkeys : [7,8,9,4,5,6,1,2,3,0,"."],
operators1 : ["+/-" , "%", "÷"],
};
},
methods: {
setModifier(x){
this.current += x
},
showResult() {
this.current = eval(this.current)
// Logic here has a lot of room for improvements
},
restResult(){
this.current = "";
}
},
}
</script>
<style>
.calculator{
border: 1px solid black;
}
.container {
text-align: center;
margin-top: 23px;
}
table {
margin: auto;
}
#screen {
border-radius: 21px;
border: 5px solid #244624;
font-size: 34px;
height: 65px;
width: 456px;
padding: 5px;
display: flex;
align-items: center;
justify-content: left;
background-color: white;
}
.btn {
border-radius: 20px;
font-size: 40px;
background: #d6cbd3;
width: 102px;
height: 65px;
margin: 6px;
}
.calculator {
border: 4px solid #13695d;
background-color: #eca1a6;
padding: 23px;
border-radius: 53px;
display: inline-block;
}
h1 {
font-size: 28px;
font-family: "Courier New", Courier, monospace;
}
</style>
\ No newline at end of file
<script>
import calcTag from '../components/calculatorComp.vue'
export default {
name:'CalcPage',
components:{
calcTag,
}
}
</script>
<template>
<h1>Calculator Page</h1>
<calcTag/>
</template>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment