fixed spacing issues and counter check edge case
parent
b844810d44
commit
b9740f9239
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<header>
|
<header id="header">
|
||||||
<span>Counter</span>
|
<span>Counter</span>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
|
@ -29,6 +29,7 @@ export default {
|
||||||
|
|
||||||
main {
|
main {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
height: calc( 100% - 56px );
|
||||||
/* margin-top: 40px; */
|
/* margin-top: 40px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -51,7 +52,7 @@ header span {
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body, main, counter {
|
html, body, counter {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="counter">
|
<div class="counter">
|
||||||
<div class="count-top">
|
<div class="count-top">
|
||||||
<label class="upper-label" for="limit" @click="reset">Limit</label>
|
<label class="upper-label" for="limit" @click="reset">Limit</label>
|
||||||
<input class="upper-input" name="limit" type="number" v-model="countBound" placeholder="10"/>
|
<input class="upper-input" name="limit" type="number" pattern="[0-9]*" v-model="countBound" placeholder="10"/>
|
||||||
</div>
|
</div>
|
||||||
<div @click="bumpCount" :style="countStyle" class="count-bottom">
|
<div @click="bumpCount" :style="countStyle" class="count-bottom">
|
||||||
<div class="value">{{ countCurrent }}</div>
|
<div class="value">{{ countCurrent }}</div>
|
||||||
|
@ -35,6 +35,13 @@ export default {
|
||||||
this.countCurrent = this.countCurrent + 1
|
this.countCurrent = this.countCurrent + 1
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.checkLimit()
|
||||||
|
},
|
||||||
|
reset () {
|
||||||
|
this.countCurrent = 0
|
||||||
|
this.limitReached = false
|
||||||
|
},
|
||||||
|
checkLimit () {
|
||||||
this.limitReached = (this.countCurrent >= this.countBound)
|
this.limitReached = (this.countCurrent >= this.countBound)
|
||||||
|
|
||||||
if (this.limitReached) {
|
if (this.limitReached) {
|
||||||
|
@ -43,11 +50,10 @@ export default {
|
||||||
} else {
|
} else {
|
||||||
this.countStyle.backgroundColor = '#179e63'
|
this.countStyle.backgroundColor = '#179e63'
|
||||||
}
|
}
|
||||||
},
|
|
||||||
reset () {
|
|
||||||
this.countCurrent = 0
|
|
||||||
this.limitReached = false
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
countBound: function () { this.checkLimit() }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -77,6 +83,7 @@ export default {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
.upper-input {
|
.upper-input {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
|
Loading…
Reference in New Issue