두번째 프로젝트로 Counter를 만드는 프로젝트이다.
이 프로젝트에서는 표시되는 값이 양수인지 음수인지에 따라서 색이 달라지는 기능을 포함하고 있다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Counter</title>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<div class="container">
<h1>counter</h1>
<span id="value">0</span>
<div class="button-container">
<button class="btn decrease">decrease</button>
<button class="btn reset">reset</button>
<button class="btn increase">increase</button>
</div>
</div>
</main>
<!-- javascript -->
<script src="app.js"></script>
</body>
</html>
counter의 경우에는 조건문을 적절하게 활용하면 쉽게 만들 수가 있다.
1. 초기 카운트 값 설정
let count = 0;- count변수를 선언해서 초기값으로 0을 설정해준다.
- 이 count변수는 현재의 카운트 값을 저장하는 변수이다.
2. 요소선택
const value = document.querySelector("#value");
const btns = document.querySelectorAll(".btn");- value에는 querySelector를 이용해서 #value인 id값을 할당해준다.
- btns에는 querySelectorAll을 이용해서 클래스가 btn인 모든 요소를 선택해서 배열형태로 저장한다.
3. 각 버튼에 이벤트 리스너 추가
btns.forEach(function (btn) {
btn.addEventListener("click", function (e) {
const styles = e.currentTarget.classList;
if (styles.contains("decrease")) {
count--;
} else if (styles.contains("increase")) {
count++;
} else {
count = 0;
}
if (count > 0) {
value.style.color = "green";
}
if (count < 0) {
value.style.color = "red";
}
if (count === 0) {
value.style.color = "#222";
}
value.textContent = count;
});
});3.1 각 버튼에 대한 'forEach'루프
- forEach메서드는 for 반복문과는 다른 방식으로 함수를 사용한다.
- forEach메서드는 매개변수와 함께 배열의 각 요소에 적용하게 될 콜백함수를 전달한다.
- Current Value (명명된 매개변수) - 처리할 현재 요소
- Index (선택적 매개변수) - 처리할 현재 요소의 인덱스
- Array (선택적 매개변수) - forEach 메서드를 호출한 배열
- forEach메서드를 사용해 배열을 순회하기위해서는 콜백함수 또는 익명함수가 필요하다.
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
});
- Index
numbers.forEach((number, index) => {
console.log('Index: ' + index + ' Value: ' + number);
});
- Array
numbers.forEach((number, index, array) => {
console.log(array);
});
3.2 클릭 이벤트 리스너 추가
btn.addEventListener("click", function (e) {- "click" 이벤트가 발생되면 매개변수 e가 전달된다.
const styles = e.currentTarget.classList;- 전달된 매개변수에서 e.currentTarget은 이벤트가 발생한 요소를 가리킨다. (클릭된 버튼)
- 그리고 해당 요소의 클래스 목록을 반환한다.
3.3 클래스에 따라 카운트 값 변경
if (styles.contains("decrease")) {
count--;
} else if (styles.contains("increase")) {
count++;
} else {
count = 0;
}- decrease가 포함되면 감소
- increase가 포함되면 증가
- 그렇지 않은 경우 (이 예제에서는 reset으로 설정되어 있다) count를 0으로 설정
3.4 카운트 값에 따라 텍스트 색상 변경
if (count > 0) {
value.style.color = "green";
}
if (count < 0) {
value.style.color = "red";
}
if (count === 0) {
value.style.color = "#222";
}- count의 값에 따라서 value요소의 텍스트 색상을 변경한다.
3.5 현재의 카운트 값을 표시
value.textContent = count;value요소의 텍스트 내용을 현재 count값으로 업데이트 한다.
'개발 > javascript' 카테고리의 다른 글
| [JS] 반응형 네비게이션바 (0) | 2024.06.09 |
|---|---|
| [JS] Review Carousel 리뷰캐러셀 (1) | 2024.06.08 |
| [JS]Color Flipper 만들기2 (2) | 2024.06.07 |
| [JS] Color Flipper만들기 (0) | 2024.06.07 |
| [JS] 시작 (1) | 2024.06.07 |