Airbnb Copy Modeling : Javascript

Airbnb Copy Modeling : Javascript 연습

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

    <script>
      function join_close() {
        document.getElementById("join-popup").style.display = "none";
      }
      function join_open() {
        document.getElementById("join-popup").style.display = "block";
      }
      function login_close() {
        document.getElementById("login-popup").style.display = "none";
      }
      function login_open() {
        document.getElementById("login-popup").style.display = "block";
      }
      // html 범위안 클릭시
      $("html").on("click", function(e) {
        // join-popup 이 존재하면,
        if ($(e.target).hasClass("join-popup")) {
          // join-popup 에 display = none; /* 화면에 기본으로 안보이게 */
          // display = block; /* 화면에 기본으로 보이게 */
          document.getElementById("join-popup").style.display = "none";
        }
      });
      // html 범위안 클릭시
      $("html").on("click", function(e) {
        // login-popup 이 존재하면,
        if ($(e.target).hasClass("login-popup")) {
          // login-popup 에 display = none;
          document.getElementById("login-popup").style.display = "none";
        }
      });
      $(document).ready(function() {
        // .login-window .i 를 클릭시
        $(".login-window .i").click(function() {
          // .login-window .input-email-pwd : toggleClass
          // class 가 있으면 제거하고 없으면 추가한다.(toggle)
          $(".login-window .input-email-pwd").toggleClass("active");
          if ($(".login-window .input-email-pwd").hasClass("active")) {
            $("#email-login-password").attr("class", "inactive");
            $("#email-login-password").attr("type", "text");
            $("#i").text("비밀번호 숨기기");
          } else {
            $("#email-login-password").attr("class", "active");
            $("#email-login-password").attr("type", "password");
            $("#i").text("비밀번호 보기");
          }
        });
      });
    </script>

시행착오 끝에 알게된 것

1. 먼저 src 연결부터 할 것 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

2. 나머지는 조건문.