Wecode Westagram Part-1

Wecode 위스타그램 클론코딩 로그인페이지 구현코드.

위에 예시를 보면 로그인 아이디와 비밀번호가 꼭 입력이 되야만 로그인 버튼이 활성화 되도록 설정하였습니다.

HTML

별거없음...

<div class="login">
      <h1>Westagram</h1>
      <input class="login-id"type="text" placeholder="전화번호, 사용자 이름 또는 이메일" />
      <input class="login-password" type="password" placeholder="비밀번호" />
      <button class="login-button" />로그인</button>
      <p class="login-forget_password">
        비밀번호를 잊으셨나요?
      </p>
    </div>

CSS

활성화 되어있지 않을때는 투명도를 0.5로 설정해줌.

.login .login-button{
    background-color: var(--background-color);
    border: none;
    border-radius: 3px;
    margin:20px;    
    width: 320px;
    padding: 10px;
    color: #fff;
    font-size :20px;
    font-weight: bold;
    opacity: 0.5;
}

JavaScript

코드 정리는 각 부분의 밑에 정리하겠습니다.

const loginButton = document.querySelector('.login-button');
const loginId = document.querySelector('.login-id');
const loginPassword = document.querySelector('.login-password');

function goToMain(){
    window.location.href = "./main.html"
  // 다음 페이지인 main.html로 이동하는 함수.
}

function checkInput() {
    loginId.value.length > 0 && loginPassword.value.length > 0 ? (
      	// 삼항식으로 표현하여 아이디값의 벨류와 패스워드값의 벨류가 0이상일때
        loginButton.style.opacity = "1",
      	// 버튼의 투명도가 1로 바뀜
        loginButton.style.cursor = "pointer",
      	// 커서가 포인터로 바뀜
        loginButton.addEventListener('click',goToMain)
      	// 버튼을 눌렀을때 다음페이지로 넘어감.
     ) : ( // 벨류값이 없는경우
        loginButton.style.opacity ="",
      	// 투명도를 다시 기본상태로 돌림
        loginButton.removeEventListener('click',goToMain),
      	//아까 입력했다가 지웠을경우 이벤트를 지워줌.
        loginButton.style.cursor = ""
      	//커서도 다시 원상복귀
    )
}

loginPassword.addEventListener('keyup', checkInput)
loginId.addEventListener('keyup', checkInput)
//패스워드와 아이디값에 키를 눌렀다 땠을경우 아까 함수를 넣어줌.