JAVASCRIPT/토이 프로젝트

[JAVASCRIPT] 02_Counter

예글 2022. 12. 13. 10:35

1. 목적

  • 양수인지 음수인지에 따라 색상이 바뀌는 카운터 만들기
  • DOM 학습

2. 주요 개념

  • document.querySelectorAll()
  • forEach()
    • forEach의 파라미터: 변수가 가지고 있는 모든 아이들 보여줌
  • addEventListenr()
  • currentTarget 속성: eventListener를 가진 요소 
  • target 속성: 이벤트가 발생한 바로 그 요소
  • classList
    • classList.add(String)
    • classList.remove(String)
    • classList.contains(String) : 지정한 클래스 값이 존재하는지 확인 (true, false 값 반환)
    • classList.replace(old,new): old class를 new class로 대체
    • classList.item(Number): 인덱스 값 활용하여 클래스 값 반환
    • classList.toggle : 클래스 유무를 체크해서 없으면 add, 있으면 remove 자동으로 시켜줌
  • textContent
<!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>
// set initial count
let count = 0;

// select value and buttons
const value = document.querySelector("#value");
const btns = document.querySelectorAll(".btn");

// 콜백함수에 e를 넣는 이유: 현재 대상이 무엇인지 확인하기 위해
btns.forEach(function (btn) {
  btn.addEventListener("click", function (e) {
    const styles = e.currentTarget.classList; // btn decrease / btn reset / btn increase

    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;
  });
});