본문 바로가기
Web/JAVASCRIPT

변수문법과 Dark mode 버튼만들기

by print_soo 2023. 7. 20.

이전에 만들었던 navbar사이트를 기반으로 간단한 다크모드를 적용해보자.

 

다크모드는 토글형태로 누르면 다크모드 다시 누르면 라이트모드로 변경된다.

하지만 이번에는 토글이 아닌 클릭 횟수로 다크모드를 지정해보자.

 

1. 클릭 횟수로 모드 변경하는 방법

[규칙]
1회 클릭 시 다크 모드 🌑
2회 클릭 시 라이트 모드 ☀️
3회 클릭 시 다크 모드 🌑
4회 클릭 시 라이트 모드 ☀️
5회 클릭 시 다크 모드 🌑

 

위 규칙의 공통된 패턴은 홀수 번 클릭 시 다크모드 짝수 번 클릭 시 라이트 모드라는 것이다. 따라서 해당 방법 대로 적용하려면 아래와 같이 코드를 구성해야할 것 같다. 

var clickCount = 0;

if (clickCount%2==1){ // 클릭 횟수가 홀수면
	//특정 엘리먼트 검은색으로 변경
} else { // 클릭 횟수가 짝수면
	//특정 엘리먼트 흰색으로 변경
}

 

 

2. navbar 사이트에 적용해보기

 

index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">

    <title>Hello, world!</title>
  </head>
  <body>

    <!-- navbar -->
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <span class="navbar-brand">Navbar</span>
          <span class="badge bg-dark">Dark 🔄</span>
          <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </nav>

    <!-- navbar items -->
    <ul class="list-group"> <!-- 띄워쓰기로 class 이름을 동시에 두개 만들었다.  -->
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
        <li class="list-group-item">A fourth item</li>
        <li class="list-group-item">And a fifth one</li>
    </ul>


    <!------------------------------------------------------------------>
    <!-- modal -->
    <div class="black-bg">
        <div class="white-bg">
            <h4>로그인하세요</h4>
            <form action="success.html">
                <div class="my-3">
                  <input type="text" class="form-control" name="id">
                 </div>
                 <p id="error-id">아이디가 입력되지 않았습니다.</p>
                 <div class="my-3">
                   <input type="password" class="form-control" name="password">
                 </div>
                 <p id="error-password">비밀번호가 입력되지 않았습니다.</p>
                 <button type="submit" id="submit" class="btn btn-primary">로그인</button>
                 <button type="button" class="btn btn-danger" id="close">취소</button>
              </form>
        </div>
    </div>
    <!------------------------------------------------------------------>


    <div class="main-bg">
        <h4>Shirts on sale</h4>
        <button id="login" class="btn btn-danger">로그인</button>
    </div>
    

    <!-- JavaScript -->

    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>


    <script>

        /* STEP 3 */
        // 모달창 노출
        $('#login').on('click', function(){
            $('.black-bg').addClass('show-modal');
        })

        // 모달창 닫기
        $('#close').on('click', function(){
            $('.black-bg').removeClass('show-modal');
        })
        
        // 로그인 버튼 누른 후의 이벤트들 
        $('#submit').on('click', function(){

            // 아이디 공백 처리
            if ($('input[name="id"]').val().trim() == '') {
                $('#error-id').show();
                event.preventDefault();
            } else {
                $('#error-id').hide();
            }
            
            // 비번 공백 처리
            if ($('input[name="password"]').val().trim() == '') {
                $('#error-password').show();
                event.preventDefault();
            } else {
                $('#error-password').hide();
            }

            // 비번 6자리 미만 작성 처리
            if ($('input[name="password"]').val().length < 6 && $('input[name="password"]').val().length > 0){
                $('#error-password').text('비밀번호를 6자리 이상 작성해주세요.');
                $('#error-password').show();
                event.preventDefault();
            }

        });

        document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
        document.getElementsByClassName('list-group')[0].classList.toggle('show')
    })
    var clickNum = 0;

        $('.badge').on('click', function () {
            clickNum += 1;
            if (clickNum % 2 == 1) {
                $('.navbar').removeClass('navbar-light');
                $('.navbar').addClass('navbar-dark');
                $('.navbar').removeClass('bg-light');
                $('.navbar').addClass('bg-dark');
            } else {
                $('.navbar').removeClass('navbar-dark');
                $('.navbar').addClass('navbar-light');
                $('.navbar').removeClass('bg-dark');
                $('.navbar').addClass('bg-light');  
            }
        })
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
    </script>
    
  </body>
</html>

 

 

main.css

.list-group{
    display: none;
}

.show{
    display: block;
}

.black-bg {
    /* STEP 1 */
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5;
    padding: 30px;
    visibility: hidden;
    opacity: 0;

    /* STEP 4 */
    transition: all 1s;
}

.show-modal{
    /* STEP 2 */
    visibility: visible;
    opacity: 1;
}

.white-bg {
    background: white;
    border-radius: 5px;
    padding: 30px;
}

.main-bg {
    padding: 100px 20px;
    background-color: lightgray;
}

#error-id, #error-password{
    color: rgb(239, 73, 73);
    display: none;
}

 

 

3. 변수 문법

위의 코드에서 var이라는 것을 사용했다. var이란 변수인데 변수는 내부에 어떠한 데이터를 담고 활용할 수 있는 것이다. 

변수에는 var 말고 다른 것들도 있는데 한번 알아보자.

 

변수의 선언, 할당, 범위

선언 

var 이름;

재선언

var 이름1;

할당

이름 = 값;

재할당

이름 = 값1;

선언+할당

var 이름 = 값;

범위 

  • 전역변수: 해당 파일 전역에서 사용 가능한 변수
  • 지역변수: 해당 파일 또는 해당 함수 내부에서만 사용 가능한 변수

var이외의 변수들

 

저작자표시 비영리

'Web > JAVASCRIPT' 카테고리의 다른 글

정규식  (0) 2023.07.23
setTimeout 타이머  (0) 2023.07.23
코딩애플) if/else, function 실력향상 과제  (0) 2023.07.17
폼 만들기(if else)  (0) 2023.07.15
모달창만들기와 간단한 애니메이션  (0) 2023.07.15

관련글

티스토리툴바