다크모드 버튼에게 일을 시켜보자

버튼을 1번 클릭하면 버튼내부 글자를 Light로,

버튼을 2번 클릭하면 버튼내부 글자를 Dark로,

버튼을 3번 클릭하면 버튼내부 글자를 Light로,

버튼을 4번 클릭하면 버튼내부 글자를 Dark로,

…

이렇게 만들고 싶습니다.

 

 

근데 이걸 천 번, 만 번 할 수 있는건 아니잖아요?

이걸 수학적으로 만들어보면,

버튼을 홀수번 클릭하면 버튼내부 글자를 Light로,

버튼을 짝수번 클릭하면 버튼내부 글자를 Dark로 라고 할 수 있겠죠.

 

 

그걸 코드로 풀어보면

let count = 0; //버튼이 클릭된 횟수를 담을 변수를 선언 

$('.badge').on('click', function(){
  count += 1;
  if (count가 홀수면) {
    내부글자를 Light로 변경
  } else {
    내부글자를 Dark로 변경
  }
});

홀수짝수를 코드로 표현하는 방법은

2로 나눠서 0으로 떨어지면 ‘짝수’

그렇지 않으면 ‘홀수'

 

var count = 0;

$('.badge').on('click', function(){
  count += 1;
  if (count % 2 == 1) {
    $('.badge').html('Light');
  } else {
    $('.badge').html('Dark')
  }
});

버튼을 한 번 눌렀을 때 text가 Light로 바뀐 모습

 

콘솔에 1이라고 찍힘. 홀수니까 Light로 바뀐것을 확인할 수 있다.

 

 

짝수일 때 Dark모드로 바뀐 모습

 

 

+실제 다크모드처럼 사이트가 시커멓게 변하는건

 

1. 부착하면 시커매지는 class 하나를 만들어놓고 2. 버튼누를 때 class를 부착해보면 됨.
2. 참고로 Bootstrap을 이용한 요소는 CSS덮어쓰기가 어려울 수 있음. 이미 우선적으로 적용되어있는 속성들이 있기 때문인데, bg-dark클래스명을 bg-light이런식으로 바꾸거나 붙어있던 class를 제거하면 됨