JS 연습문제 9 - 로그인 화면

• JS 연습문제 9 - 로그인 화면
  
  
• CSS

form .btn {
   background-color: #4CAF50;
   color: white;
   padding: 10px 20px;
   border: none;
   cursor: pointer;
   width: 100px;
   margin-bottom: 10px;
   margin-top: 10px;
}

button.btn:hover {
   opacity: 0.8;
   color: yellow;
}

.cancel:hover {
   opacity: 0.8;
   background: red;
}

• HTML

<button class="open">로그인</button>

<div class="form-popup" id="myForm">
   <form action="01_JS 개요.html" >
      <fieldset>
         <legend>로그인</legend>
             <h1>Login</h1>
             <label for="email"><b>Email</b></label>
             <input type="text" placeholder="Enter Email" name="email" required>
             <br>
             <label for="psw"><b>Password</b></label>
             <input type="password" placeholder="Enter Password" name="psw" required>
             <br>
             <button type="submit" class="btn">Login</button>
             <button type="button" class="btn cancel">Close</button>
      </fieldset>
   </form>
</div>

• JavaScript

// 1. 이 문서를 처음 로드하면 로그인 화면은 보이지 않는다.

   // 요소가 화면에서 보이지 않지만 영역을 차지함
   /* document.getElementById('myForm').style.visibility ='hidden'; */

   // 요소가 화면에서 보이지 않으면서 영역을 차지하지 않음
   document.getElementById('myForm').style.display = 'none';

// 2. label 태그는 가로로 '80px' 크기를 갖는다.
   const label = document.querySelectorAll('#myForm label');

   for(let item of label){ // label 태그는 inline 속성
      item.style.display = 'inline-block';
      item.style.width = '80px';
   }   

// 3. 로그인 버튼을 클릭하면 로그인 화면이 화면에 나타난다.
   document.getElementsByClassName('open')[0].addEventListener('click',function(){
   
   /* document.getElementById('myForm').style.visibility = 'visible'; */
      document.getElementById('myForm').style.display = 'block'; // div는 block 속성
   
   })

// 4. Close 버튼을 클릭하면 로그인 화면이 사라진다.
   document.getElementsByClassName('cancel')[0].addEventListener('click',function(){
      
      /* document.getElementById('myForm').style.visibility = 'hidden'; */
         document.getElementById('myForm').style.display = 'none'; 
   
   })

See the Pen 24-12-25 js review-pr9 by Namu (@Namu-the-sans) on CodePen.