Daily UI & Develop #004 Calculator
<div id="app">
<h1>Amanogawa</h1>
<button class="clear" value="C" v-on:click="calc('C')">C</button>
<table>
<tr>
<td colspan="4"><input type="text" v-model="output"></td>
</tr>
<tr v-for="row in items">
<td v-for="item in row">
<button v-on:click="calc(item)">{{ item }}</button>
</td>
</tr>
</table>
</div>
<div id="app2">
<h1>Calculator</h1>
<button class="clear" value="C" v-on:click="calc('C')">C</button>
<button class="include" value="=>" v-on:click="calc('=>')">=></button>
<table>
<tr>
<td colspan="4"><input type="text" v-model="output"></td>
</tr>
<tr v-for="row in items">
<td v-for="item in row">
<button v-on:click="calc(item)">{{ item }}</button>
</td>
</tr>
</table>
</div>
<div id="stalker"></div>
<!-- <div class="memo">
<input type="textarea">
</div> -->
var app = new Vue({
el: '#app',
data: {
output: '0',
items: [
['7', '8', '9', '/'],
['4', '5', '6', '*'],
['1', '2', '3', '-'],
['0', '00', '000', '+'],
['1.08', '1.10', '.', '=', ]
]
},
methods: {
calc: function (cmd) {
if(cmd === '='){
this.output = Math.round(eval(this.output))
}else if(cmd === 'C'){
this.output = '0'
}else if(this.output === '0') {
this.output = cmd
}else{
this.output += cmd
}
}
}
})
var app2 = new Vue({
el: '#app2',
data: {
output: '0',
items: [
['7', '8', '9', '/'],
['4', '5', '6', '*'],
['1', '2', '3', '-'],
['0', '00', '000', '+'],
['1.08', '1.10', '.', '=', ],
]
},
methods: {
calc: function (cmd) {
if(cmd === '='){
this.output = Math.round(eval(this.output ))
}else if(cmd === '=>'){
this.output = app.output
}else if(cmd === 'C'){
this.output = '0'
}else if(this.output === '0') {
this.output = cmd
}else{
this.output += cmd
}
}
}
})
// Mouse Stalker
const stalker = document.getElementById('stalker');
document.addEventListener('mousemove', function (e) {
stalker.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
@import url('https://fonts.googleapis.com/css?family=Big+Shoulders+Display&display=swap')
body
display: flex
justify-content: center
align-items: center
flex-wrap: wrap
min-height: 100vh
width: 100vw
background-color: #000
background: linear-gradient(-45deg, rgba(25,95,228,.8), rgba(229,23,135,.7))
h1
font-family: 'Big Shoulders Display', cursive
color: #fff
#app
margin-left: -100px
#app2
margin-left: 100px
#app, #app2
@media only screen and (max-width: 640px)
margin: 20px 0
position: relative
.clear, .include
font-family: 'Big Shoulders Display', cursive
position: absolute
right: -64px
width: 64px
height: 444px
@media only screen and (max-width: 640px)
height: auto
top: 40px
right: -10px
font-size: 48px
background-image: linear-gradient(to right bottom, rgba(81, 21, 126, 0.5), rgba(20, 3, 26, 0.9))
border: none
color: #fff
transition: .2s
&:focus,&:active
outline: none
&:hover
opacity: 0.65
cursor: pointer
.include
left: -100px
top: 16px
width: 64px
height: 64px
@media only screen and (max-width: 640px)
left: 224px
top: -40px
table
background-image: linear-gradient(to right bottom, rgba(255, 165, 0, 0.68), rgba(128, 0, 128, 0.75))
padding: 30px
@media only screen and (max-width: 640px)
padding: 15px
tr
td
button
//background-image: linear-gradient(to right bottom, rgba(79, 149, 183, 0.58), rgba(113, 216, 232, 0.69))
background-image: linear-gradient(to right bottom, rgba(224, 172, 25, 0.75), rgba(228, 104, 31, 0.92))
margin: 0
padding: 4px
width: 60px
height: 56px
font-size: 32px
color: #fff
font-family: 'Big Shoulders Display', cursive
letter-spacing: 2px
border: none
opacity: 0.9
transition: 0.3s
&:hover
background-image: linear-gradient(to right bottom, rgba(21, 103, 226, 0.5), rgba(20, 230, 26, 0.7))
cursor: pointer
&:focus,&:active
outline: none
input
font-family: 'Big Shoulders Display', cursive
letter-spacing: 2px
height: 54px
width: 100%
box-sizing: border-box
font-size: 32px
color: #fff
padding: 0 8px
//background-image: linear-gradient(to right bottom, rgba(255, 165, 0, 0.68), rgba(128, 0, 128, 0.75))
background-image: linear-gradient(to right bottom, rgba(200, 202, 94, 0.88), rgba(187, 26, 187, 0.82))
border: none
margin: 12px 0
#app2 table
background-image: linear-gradient(to right, #1b85dc, #08b0cb)
#stalker
pointer-events: none
position: fixed
top: -16px
left: -16px
width: 32px
height: 32px
border: 2px solid rgba(255, 255, 255, 0.7)
border-radius: 50%
background: rgba(0, 0, 0, 0.2)
transform: translate(0, 0)
transition: transform 0.2s
transition-timing-function: ease-out
z-index: 999