변수와 Dark Mode 버튼 만들기

🌛Dark Mode는 우리가 보던 Bootstrap이나 MDN 등 다양한 웹사이트에서 지원하는 기능 중 하나

우선은 다크모드 전체를 구현하는 것 보단 버튼을 만들고 해당 버튼을 클릭 했을 때

내부 글자를 Dark > Light 로 변경 해보자.

navbar 안에 아래 코드 추가

<span class="badge bg-dark">Dark Mode 🌛</span>

이렇게 하고 위 badge를 클릭 할때마다 글자를 변경

var 변수이름 = 변수에 넣을 값;

var age = 25; 
console.log(age);

var name = 'lee';
console.log(name);

== 는 '같다'라는 비교 연산자

= 는 오른쪽 값을 왼쪽에 넣는 할당 연산자

🎈변수를 쓰는 이유

var 경고문 = '아이디를 확인해주세요' ;

이렇게 하면 위 경고문이 필요할 때 마다 alert(경고문); 이렇게 해서 쓸 수 있다.

(회원가입, 로그인 등)

특정 값을 기억할 때

badge를 클릭 한 횟수가 홀수번이면 Light로 변경

badge를 클릭 한 횟수가 짝수번이면 Dark로 변경

var count = 1;

var 변수 = 20; 
var 변수 = '이름';
var 변수 = document.getElementById('email');

 //badge 클릭 시 글자를 Dark > Light 변경

var count = 0;
$('.badge').on('click', function (){
    count++;
    // count += 1;
    // count = count+1;
    console.log(count);
    console.log(count % 2);

    if(count % 2 === 0){
        $('.badge').html('Dark 🌛');
    }else if(count %2 === 1){
        $('.badge').html('Light 🌞');
    }

});

다크 모드 예시

var count = 0;
$('.badge').on('click', function (){
    count++;
    if(count % 2 === 0){
        $('.badge').html('Dark 🌛');
        $('.navbar').removeClass('navbar-dark');
        $('.navbar').removeClass('bg-dark');
        $('.navbar').addClass('navbar-light')
        $('.navbar').addClass('bg-light')
    }else if(count %2 === 1){
        $('.badge').html('Light 🌞');
        $('.navbar').removeClass('navbar-light');
        $('.navbar').removeClass('bg-light');
        $('.navbar').addClass('navbar-dark')
        $('.navbar').addClass('bg-dark')
    }
});