Calculator based on VUE + grid layout
Let’s make a new mimicry calculator.
Codepen is an online browser editor, interested partners, online to understand
First look at the finished effect, you can also click here to tryThe demo presentation 
If you read this article, you can complete a new simulation calculator
Four_leaf_clover:
1. HTML part of the page layout
First of all, let’s write out the main layout of the page. We need 19 buttons
< button > AC / + %/+/-/ * /Present / =</button>
<button >1/2/3/4/5/6 7/8/9/0 /.</button>
Copy the codeOf course, we also need a result area to show the entered numbers and the calculated results
<div class="result">
0
</div>
Copy the codeInitialize to ‘0’ because you need to write the logic later
See page
Now that we have the basic styling, we are going to write the CSS section. Before writing this section, we are going to add style to the HTML element button note pad, and then use the grid layout. :hibiscus:
<div class="calculator">
<div class="result" style="grid-area: result">
{{ equation }}
</div>
<button style="grid-area: ac" >AC</button>
<button style="grid-area: plus-minus" >Plus or minus</button>
<button style="grid-area: percent" >%</button>
<button style="grid-area: add" >+</button>
<button style="grid-area: subtract" >-</button>
<button style="grid-area: multiply" >x</button>
<button style="grid-area: divide" >present</button>
<button style="grid-area: equal">=</button>
<button style="grid-area: number-1" >1</button>
（1-9 -)
<button style="grid-area: number-0" >0</button>
<button style="grid-area: dot" >.</button>
</div>
Copy the code2, page style CSS section
The demo uses grid layout, so let’s talk about the grid layout attributes we need for this project:
Grid layout can be considered the most powerful CSS layout scheme. It can divide web pages into grids and then use those grids to create a variety of layouts.
The basic concept
Eggplant: Region with grid layout, called “containers”. The grid-positioned child elements inside the container are called “items”
2 Container attributes :cucumber: display attribute
Display :grid Specifies a container for the grid layout
Copy the code3 the grid – the template – the columns and the grid – the template – rows: have:
Grid-template-columns: specifies the width of rows
Grid-template-rows: Used to specify the height of rows
Copy the code.wrapper{
width:450px;
background: #e5e5e5;
text-align:center;
display: inline-grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px 150px
}
Copy the codeThe code above specifies a width and height of 150px
Of course, in addition to specifying specific values, you can also use percentages
.wrapper {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
Copy the codeSometimes, it is cumbersome to write the same value repeatedly, especially if there are many grids. In this case, you can use the repeat() function to simplify repeating values. The code above is rewritten with repeat() as follows
.wrapper {
display: grid;
grid-template-columns: repeat(3.33.33%);
grid-template-rows: repeat(3.33.33%);
}
Copy the codeRepeat takes two parameters: the number of times the first number is repeated (3 times in the above example) and the value of the repeat (33.33% in the above example)
Pouting_man: Pouting_man: Pouting_man: Pouting_man: Pouting_man: Pouting_man:
All right, let’s start with the calculator style
.calculator {
// Set the width and height of the cell
--button-width: 80px;
--button-height: 80px;
// Set up the grid layout
display: grid;
Style ="grid-area: "style="grid-area:
grid-template-areas:
"result result result result"
"ac plus-minus percent divide"
"number-7 number-8 number-9 multiply"
"number-4 number-5 number-6 subtract"
"number-1 number-2 number-3 add"
"number-0 number-0 dot equal";
// See article 3.1 for an explanation
grid-template-columns: repeat(4.var(--button-width));
grid-template-rows: repeat(6.var(--button-height));
// Implement the mimicry effect
box-shadow: - 8 -px - 8 -px 16px - 10px rgba(255.255.255.1), 8px 8px 16px - 10px rgba(0.0.0.15.);
padding: 24px;
border-radius: 20px;
}
Copy the code2. Button styles
.calculator button {
margin: 8px;
padding: 0;
border: 0;
display: block;
outline: none;
border-radius: calc(var(--button-height) / 2);
font-size: 24px;
font-family: Helvetica;
font-weight: normal;
color: #999;
background: linear-gradient(135deg, rgba(230.230.230.1) 0%, rgba(246.246.246.1) 100%);
// Mimicry implementation
box-shadow: 4 -px 4 -px 10px - 8 -px rgba(255.255.255.1), 4px 4px 10px - 8 -px rgba(0.0.0.3.);
}
Copy the code3, click the button effect
I’m just adding inset here
.calculator button:active {
box-shadow: 4 -px 4 -px 10px - 8 -px rgba(255.255.255.1) inset, 4px 4px 10px - 8 -px rgba(0.0.0.3.) inset;
}
Copy the code4. Finally, the result area
.result {
text-align: right;
line-height: var(--button-height);
font-size: 48px;
font-family: Helvetica;
padding: 0 20px;
color: #Awesome!;
}
Copy the code3, logical writing JS part
First we need to set up the vUE environment
Click on thesetting 
Look for vue in the search box, select Save and then we’ll wrap around the element inside the HTML file body
<div id="app">
Code..
</div>
Copy the codeIn the meantime, let’s add the @click event to the HTML button element
Binding functions isOperator() Append () calculate() calculateToggle() calculatePercentage() clear()
new Vue({
el: '#app'.
data: {
equation: '0'.
isDecimalAdded: false.
isOperatorAdded: false.
isStarted: false.
},
methods: {
// Check if the character is + / - / × / ÷
isOperator(character) {
return ['+'.The '-'.The '*'.'present'].indexOf(character) > - 1
},
// When pressed Operators or Numbers
append(character) {
// Start
if (this.equation === '0'&&!this.isOperator(character)) {
if (character === '. ') {
this.equation += ' ' + character
this.isDecimalAdded = true
} else {
this.equation = ' ' + character
}
this.isStarted = true
return
}
// If Number
if (!this.isOperator(character)) {
if (character === '. ' && this.isDecimalAdded) {
return
}
if (character === '. ') {
this.isDecimalAdded = true
this.isOperatorAdded = true
} else {
this.isOperatorAdded = false
}
this.equation += ' ' + character
}
// Added Operator
if (this.isOperator(character) && !this.isOperatorAdded) {
this.equation += ' ' + character
this.isDecimalAdded = false
this.isOperatorAdded = true
}
},
// When pressed '='
calculate() {
let result = this.equation.replace(new RegExp(The '*'.'g'), The '*').replace(new RegExp('present'.'g'), '/')
this.equation = parseFloat(eval(result).toFixed(9)).toString()
this.isDecimalAdded = false
this.isOperatorAdded = false
},
// When pressed '+/-'
calculateToggle() {
if (this.isOperatorAdded || !this.isStarted) {
return
}
this.equation = this.equation + '* 1'
this.calculate()
},
// When pressed '%'
calculatePercentage() {
if (this.isOperatorAdded || !this.isStarted) {
return
}
this.equation = this.equation + '* 0.01'
this.calculate()
},
// When pressed 'AC'
clear() {
this.equation = '0'
this.isDecimalAdded = false
this.isOperatorAdded = false
this.isStarted = false
}
}
})
Copy the codeSo let’s go ahead and try it out