Intro

기능적 요소

• Increase
• Decrease
• Reset
• Showing (Number, Text)

HTML

	<main>
      <div class="container">
        <h1>
          Counter
        </h1>
        <span id="value">0</span>
        <div class="button-countainer">
          <button class="btn decrease">decrease</button>
          <button class="btn reset">reset</button>
          <button class="btn increase">increase</button>
        </div>
      </div>
    </main>

main으로 크게 구분 짓고, 값마다 섹터를 나누는 게 중요한 것 같다. 이래야 가독성도 높고 나중에 수정할 때도 편하다.

JS

• 연결
• 이벤트
• 함수
• 조건문

let count = 0;

const value = document.querySelector('#value');
const btns = document.querySelectorAll(".btn");

btns.forEach(function(btn) {
  btn.addEventListener('click' , function(e) {
    const styles = e.currentTarget.classList
    
    // Count Number
    if(styles.contain("decrease") {
       count--;
    }
    else if (styles.contain("increase") {
       count++;
    } 
    else {
      count = 0;
      alert("Reset");
    }
    //Count Color
    if (count > 0) {
      value.style.color="green";
    }
    else if (count < 0) {
      value.style.color="red";
    }
    else {
      value.style.color="#222";
    }
    //숫자 입력
    value.textContent = count;
}

배운 점

• forEach는 중복된 요소에 중복된 기능이나 선택을 할 때 쓰이면 좋다.
  그리고 이것은 매개변수는 항상 따라다닌다.

• 포함 여부를 따질 때는 .contain, .currentTarget, classList를 이용하면 좋다. 각 원하는 워드에 조건문을 달아주면 기능을 다채롭게 꾸밀 수 있다.