86 lines
2 KiB
Text
86 lines
2 KiB
Text
---
|
|
const count = 0
|
|
---
|
|
|
|
<script>
|
|
let count = 0
|
|
|
|
const updateDisplay = () => {
|
|
const countdisplay = document.getElementById('countdisplay')!
|
|
countdisplay.textContent = count.toString()
|
|
}
|
|
|
|
const decrement = document.getElementById('decrement')!
|
|
decrement.addEventListener('click', () => {
|
|
count--
|
|
updateDisplay()
|
|
})
|
|
|
|
const increment = document.getElementById('increment')!
|
|
increment.addEventListener('click', () => {
|
|
count++
|
|
updateDisplay()
|
|
})
|
|
</script>
|
|
|
|
<section class="counter">
|
|
<div class="counter__display" id="countdisplay">{count}</div>
|
|
<div class="counter__buttons">
|
|
<button class="counter__decrement" id="decrement"> - </button>
|
|
<button class="counter__increment" id="increment"> + </button>
|
|
</div>
|
|
</section>
|
|
|
|
<style lang="sass">
|
|
@use 'sass:color'
|
|
@use '../../configs/design/site' as design
|
|
@use '../styles/functions.sass' as func
|
|
|
|
.counter
|
|
font-family: inherit
|
|
font-size: inherit
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
gap: 1rem
|
|
margin: 2rem
|
|
color: white
|
|
border: 1px solid rgba(22, 34, 60, 0.5)
|
|
padding: 1rem 2rem
|
|
border-radius: 16px
|
|
background-color: light-dark(rgba(func.darken-color(design.$light-background, 10%), 0.8), rgba(func.lighten-color(design.$dark-background, 10%), 0.8))
|
|
transition: background-color 0.6s ease-out
|
|
width: 3rem
|
|
|
|
&__display
|
|
font-size: 1.75rem
|
|
font-weight: 300
|
|
|
|
&__buttons
|
|
display: flex
|
|
justify-content: center
|
|
gap: 0.25rem
|
|
|
|
&__decrement
|
|
width: 2rem
|
|
height: 2.25rem
|
|
padding: auto
|
|
font-size: 1rem
|
|
font-weight: bold
|
|
cursor: pointer
|
|
text-decoration: none
|
|
background-color: rgba(86, 14, 14, 0.915)
|
|
border-radius: 8px
|
|
color: white
|
|
border: 1px solid rgba(255,255,255,0.2)
|
|
|
|
&:active
|
|
transform: scale(0.95)
|
|
|
|
&__increment
|
|
@extend .counter__decrement
|
|
background-color: rgb(14, 42, 86, 0.915)
|
|
|
|
&:active
|
|
transform: scale(0.95)
|
|
</style>
|