바닐라 js 문제2-counter
이번거는 그냥 수 증가 시키는 카운터였다.
쉬었어 근데 addevent를 저렇게 남발하는 방법밖에 없는건가 싶은 생각은 들었다. 뭔가 하나나 두개만 써서 하고싶었는데 결국 버튼수만큼 다 넣었어...
- 생각 정리
counter
- 기존 화면 출력 0
- 증가버튼 누르면 한칸씩 수 증가
- 감소버튼 누르면 한칸씩 수 감소 + 음수되면 색상 변경
- 리셋버튼 누르면 초기화
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Counter</title>
<style> @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital@1&display=swap');</style>
<style type="text/css">
*{
font-family: 'Ubuntu', sans-serif;
}
.wrap{width: 100%; height:100%; position: absolute;}
.wrap div{position: relative; top :30%; text-align: center; margin-bottom: 50px;}
h1, h3{padding-bottom: 50px; font-size: 50px;}
button{background-color: transparent; width: 150px; padding: 20px; font-size: 20px; margin-right: 20px;}
</style>
</head>
<body>
<div class="wrap">
<div>
<h1>Counter</h1>
<h3 id="number">0</h3>
</div>
<div>
<button id="dec">DECREASE</button>
<button id="reset">RESET</button>
<button id="inc">INCREASE</button>
</div>
</div>
<script src="Counter.js"></script>
</body>
</html>JS
let number=document.getElementById('number')
let decbtn=document.getElementById('dec')
let resetbtn=document.getElementById('reset')
let incbtn=document.getElementById('inc')
let count=0;
incbtn.addEventListener('click' ,()=>{
count++;
number.innerHTML=count;
number.style.color='#008B8B'
})
decbtn.addEventListener('click', ()=>{
count--;
number.innerHTML=count;
number.style.color='#008B8B'
if(count<=-1){
number.style.color='#800000'
}
})
resetbtn.addEventListener('click', ()=>{
count=0;
number.innerHTML=count;
number.style.color='black'
})결과
- 음수 되면 색상 변경
