#2 카운터 만들기

Chan·2022년 11월 11일

목록 보기

2/9

구현하려고 하는 작업?

decrease, reset, increase 버튼을 각각 만들고 decrease 버튼을 누르면 -1 카운트, increase 버튼 누르면 +1 카운트, reset 버튼 누르면 0으로 카운트 초기화시키기
-1카운트시 색상 빨간색으로 변경, +1카운트시 색상 초록색으로 변경(0은 검정색)

사용한 태그?

querySelector, classList.add/remove, if/else if, addEventListener, innerText, parseInt()

구현한 작업 결과 완성 이미지

아직없음 왜냐 아직 못했거든
-1,-2 잘내려가고 +1,+2 잘 올라가는데(카운터는 됨)
0일 때 검정색상이 안입혀진다
일단 그 전까지 한 작업 예제 설명을 해보겠다

드디어 구현 완료했다...
나중엔 눈감고도 구현할 날이 오겠지
예제 사이트에 나온 유튜브에서는 forEach를 사용하던데
나는 아직까지 그거까지는 못쓰고 영어유튜브에 자막도 없어서 일단 내가 할 수 있는 데로 진행했다
그래서 코드가 길고 더럽다
근데 혼공자에는 왜 forEach가 안나올까
그냥 갑자기 궁금하네

예제 설명

index.html

<div class="counter">
  <h1>Counter</h1>
  <p class="counter-text">0</p>
  <button class="decrease-btn">DECREASE</button>
  <button class="reset-btn">RESET</button>
  <button class="increase-btn">INCREASE</button>
</div>

p태그에 0을 -1, +1 해줄 예정이다
decrease버튼을 누르면 -1
increase버튼을 누르면 +1
reset버튼을 누르면 0으로 초기화

counter.js

const counterText = document.querySelector(".counter-text");

textContent를 변경해주어야 하기 때문에 p 태그를 가져온다

const decreaseBtn = document.querySelector(".decrease-btn");
const resetBtn = document.querySelector(".reset-btn");
const increaseBtn = document.querySelector(".increase-btn");

decrease, reset, increase버튼도 가져온다
각각의 버튼에 이벤트를 지정해줄 것이기 때문이다

let counter = 0

counter라는 변수를 만들어 0을 할당해준다
p 태그에 counter값을 넣어줄 것이다

decreaseBtn.addEventListener("click", () => {
	console.log('decrease')
}

먼저 decrease 버튼에 이벤트를 지정해주고 잘 작동하는지 확인한다
콘솔에 decrease가 잘 찍혀나온다
같은 방법으로 increase, reset버튼에 이벤트를 지정해준다

decreaseBtn.addEventListener("click", () => {
  let counter = counterText.innerText;
  counterText.innerText = parseInt(counter - 1);

parseInt()를 사용하는 이유는 -, *, / 는 괜찮지만 +같은 경우 JavaScript는 근본이 없는 아이라 문자열에 +1을 더해버린다
그래서 출력할 때 숫자로 출력하도록 설정했다
버튼 안에 counter를 재지정해주고 counterText(p태그)에 innerText를 변경해주었다
praseInt(counter - 1)
쓰다보니 알게 된건데 #1에서도 변수 스코프 때문에 오류가 있었는데 지금도 밖에 let counter를 지정해주었는데 안에다 let counter를 새로 지정해줘서 색상이 0이 검정으로 안바뀐것 같다.
다시 코드 싹 지우고 새로 써보고 리뷰해야겠다

일단 바깥 변수를 지우고 버튼마다 counter를 지정해줬다
counter는 변경될 값이기 때문에 let으로 지정해줬다

decreaseBtn.addEventListener("click", () => {
  let counter = parseInt(counterText.innerText);
  counter -= 1;
  counterText.innerText = counter;
});

resetBtn.addEventListener("click", () => {
  let counter = Number(counterText.innerText);
  counter = 0;
  counterText.innerText = counter;
});

increaseBtn.addEventListener("click", () => {
  let counter = Number(counterText.innerText);
  counter += 1;
  counterText.innerText = counter;
});

이제 classList로 빨간색, 초록색 추가하면 되는데
제발 되라... 부탁할게...

if (counter < 0) {
  counterText.classList.add("counter-red");
}

일단 decreaseBtn에 추가했을 때 -1부터 빨간색으로 변경되었다
아까 let counter를 바깥에 지정해줬을 때는 counter <= 0 으로 해야 -1부터 적용되었다
increaseBtn에는 반대로 추가한다

if (counter < 0) {
  counterText.classList.add("counter-red");
  counterText.classList.remove("counter-green");
} else if (counter === 0) {
  counterText.classList.remove("counter-red");
  counterText.classList.remove("counter-green");
}

드디어.. 성공이다!!!!
코드가 지저분하긴 하지만 일단 구현했다는 것에 의미를 두겠다
counter-red, counter-green은 CSS에 추가해두었다
classList는 add, remove, toggle이 있다
이번에 사용한 것은 add, remove이다
counter가 0과 같으면 red, green class를 삭제해준다
실제 구현시 버튼을 클릭하면 개발자 도구 > Element에서 counter-red, green이 추가, 삭제되는 것을 확인할 수 있다

if (counter === 0) {
    counterText.classList.remove("counter-red");
    counterText.classList.remove("counter-green");
  }

reset 버튼에도 remove를 추가해준다
0일 경우 아무 class도 지정해 주지 않음으로서 검정색으로 표시되는 것이다
classList, className 속성이 있는데
classList는 원래 지정해 놓은 class이름을 지우지 않고 추가, 제거, 토글하는 개념이고
className은 원래 지정해 놓은 class를 다 삭제하고 className으로 지정한 것만 추가한다
만약 이 경우 className을 썼을 경우 지정해놓은 counterText도 삭제되었을 것이다

이미지 예시

전체 코드

index.html

<body>
  <div class="counter">
    <h1>Counter</h1>
    <p class="counter-text">0</p>
    <button class="decrease-btn">DECREASE</button>
    <button class="reset-btn">RESET</button>
    <button class="increase-btn">INCREASE</button>
  </div>
  <script src="/js/background.js"></script>
  <script src="/js/counter.js"></script>
</body>

styles.css

.counter-red {
  color: red;
}
.counter-green {
  color: green;
}

counter.js

const decreaseBtn = document.querySelector(".decrease-btn");
const resetBtn = document.querySelector(".reset-btn");
const increaseBtn = document.querySelector(".increase-btn");
const counterText = document.querySelector(".counter-text");

// decrease버튼 클릭시 -1 카운트
decreaseBtn.addEventListener("click", () => {
  let counter = parseInt(counterText.innerText);
  counter -= 1;
  counterText.innerText = counter;
  if (counter < 0) {
    counterText.classList.add("counter-red");
    counterText.classList.remove("counter-green");
  } else if (counter === 0) {
    counterText.classList.remove("counter-red");
    counterText.classList.remove("counter-green");
  }
});

// reset버튼 클릭시 카운트 0으로 초기화
resetBtn.addEventListener("click", () => {
  let counter = parseInt(counterText.innerText);
  counter = 0;
  counterText.innerText = counter;
  if (counter === 0) {
    counterText.classList.remove("counter-red");
    counterText.classList.remove("counter-green");
  }
});

// increase버튼 클릭시 +1 카운트
increaseBtn.addEventListener("click", () => {
  let counter = parseInt(counterText.innerText);
  counter += 1;
  counterText.innerText = counter;
  if (counter > 0) {
    counterText.classList.add("counter-green");
    counterText.classList.remove("counter-red");
  } else if (counter === 0) {
    counterText.classList.remove("counter-red");
    counterText.classList.remove("counter-green");
  }
});

주의할 점

오늘도 역시 내 손꾸락이 변수 바깥지정을 하셔가지고
오르락 내리락 버튼 눌렀을 때 0일때 검정색으로 안바뀌었다
리셋하면 검정색이 되었지
그럴만도... 변수 밖에 지정되있는 counter가 0이었으니
버튼 안에 있는 새로 지정한 counter들이 밖에 지정된 counter와 달랐으니까
제발 제발 제발 변수 위치좀좀좀!!!!!
어쨌든 완성했으니 이만
혼공자 chapter5 공부하러 가야지..

Chan

드디어 신발 신은 프론트엔드 개발자

이전 포스트

#1 버튼 클릭시 배경색상 랜덤으로 변경하기

다음 포스트