바닐라 자바스크립트 연습 기록 #2
설명
decrease, increase, reset 버튼을 누르면 각각 1씩 감소, 증가, 초기화가 되며 양수일때는 글씨가 초록색이 되고, 음수일때는 빨간색이 된다.
HTML
<title>Counter</title>
</head>
<body>
<div class="container">
<h1>Counter</h1>
<span id="number">0</span>
<div id="btn-container">
<button id="decrease">decrease</button>
<button id="reset">reset</button>
<button id="increase">increase</button>
</div>
</div>
</body>CSS
body {
width: 100%;
height: 100%;
background-color: rgb(226, 236, 235);
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 400px;
height: 250px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
font-size: 70px;
margin-bottom: 10px;
}
#number {
font-size: 70px;
font-weight: bold;
}
#btn-container {
width: 100%;
display: flex;
justify-content: space-between;
gap: 10px;
}
button {
flex: 1;
height: 40px;
background-color: transparent;
border: 1px solid #000;
border-radius: 10px;
cursor: pointer;
}
button:hover,
button:active {
background-color: #333;
color: #fff;
}JS
let container = document.querySelector('#btn-container');
const increaseBtn = container.querySelector('#increase');
const decreaseBtn = container.querySelector('#decrease');
const resetBtn = container.querySelector('#reset');
const number = document.getElementById('number');
increaseBtn.addEventListener('click', function () {
let count = Number(number.textContent);
count = count + 1;
number.textContent = count;
numberColor(count);
});
decreaseBtn.addEventListener('click', function () {
let count = Number(number.textContent);
count = count - 1;
number.textContent = count;
numberColor(count);
});
resetBtn.addEventListener('click', function () {
let count = Number(number.textContent);
count = 0;
number.textContent = count;
numberColor(count);
});
function numberColor(count) {
if (count < 0) {
number.style.color = 'red';
} else if (count > 0) {
number.style.color = 'green';
} else {
number.style.color = 'black';
}
}
'잘'살고 싶은 보통사람