위코드 2주차! JS로 인스타그램의 로그인, 메인 페이지 기능 중 일부를 클론해 보았다. 기능 구현만 힘들 것 같다고 생각했는데 CSS를 하면서도 레이아웃 부분에서 약간 헤매기도 했고 HTML,CSS를 마무리하고 JS로 기능을 구현하면서 예상치 못하게 HTML과 CSS도 부분적으로 계속 수정해야 해서 약간의 멘붕이 왔다. 그렇지만 하나하나 완성해 나가면서 뿌듯하기도 하고 재미있었다ㅎㅎ🙂

📍 로그인 페이지

📎 ID, PW 입력 시 스타일 변화

처음엔 input에 placeholder 속성으로 텍스트를 넣었으나, ID와 PW를 입력할 때 기존 placeholder 텍스트가 작아지며 상단으로 이동하고 input의 사이즈는 작아지도록 스타일 변화가 있었다.
그래서 input위에 placeholder을 역할을 할 수 있는 텍스트를 넣어 input에 텍스트를 입력했을 때 input과 placeholder 텍스트의 스타일 변화를 주는 CSS가 애니메이션을 만들어 JS로 연결했다.

<div class="accountInput">
  <input id="idInput" type="text" required />
  <label class="placeholder">Phone number, username, or email</label>
</div>

위와 같이 div 요소에 input과 label을 넣고 label의 위치를 position:absolute;를 이용해 마치 input의 placeholder처럼 보일 수 있도록 위치를 조정해 넣었다.

id.addEventListener('keyup', () => {  
  if (id.value !== '') {  
    inputLabel.classList.add('filledLabel');
    id.classList.add('filledInput');
  } else {
    inputLabel.classList.remove('filledLabel');
    id.classList.remove('filledInput');
  }
});

ID 영역에 keyup 이벤트가 있을 경우 함수가 실행 된다.
만약 input에 텍스트가 있을 경우 id input과 id label에 각각 위치와 폰트 사이즈 스타일 변화를 주는 class를 넣어주고, 텍스트가 없을 경우에는 다시 기존 스타일이 적용될 수 있도록 스타일 변화를 주는 class를 제거해 주었다. PW도 동일한 방식으로 구현했다.

📎 PW Show / Hide 기능

JS를 공부하면서 가장 먼저 만들어 보았던 게 웹 페이지 day/night 기능의 toggle버튼 구현하기 였는데, 여기서 유사한 기능을 구현하려고 하니 반가웠다. 😄

password.addEventListener('keyup', function() {
  if (password.value != '') {
    toggleButton.classList.add('toggleButtonOn');
});

password는 기본 값으로 display:none;을 설정하고 PW에 텍스트가 입력되었을 경우 'Show'버튼이 보이도록 했다.

toggleButton.addEventListener('click', function() {
  if(toggleButton.innerText === 'Show') {
    password.type = 'text';
    toggleButton.innerText = 'Hide';
  } else {
    password.type = 'password';
    toggleButton.innerText = 'Show';
  }
});

그리고 버튼을 클릭하면 type 속성을 password와 text로 변화하도록 하고 버튼의 텍스트도 'Show'와 'Hide'가 서로 변경되도록 구현했다.

password.addEventListener('keyup', function() {
  if (password.value != '') {
    toggleButton.classList.add('toggleButtonOn');
    passwordInput.type = 'password';  // PW input의 type을 'password'로 초기화
    toggleButton.innerText = 'Show';  // 토글 버튼 텍스트 'Show'로 초기화
  } else {
    toggleButton.classList.remove('toggleButtonOn');
  } 
});

❗️ password의 type이 text인 상태로 입력된 텍스트를 모두 지웠다가 다시 작성하면 마지막으로 저장된 속성인 text인 상태로 텍스트가 입력된다. 그래서 PW input의 type을 password로 초기화 시켜주는 코드를 작성해야 한다!

📎 ID/PW 유효성 검사 후 로그인 버튼 활성화

ID의 값은 '@'을 포함해야 하고 PW은 6자리이상일 경우 로그인 버튼이 활성화 되도록 구현했다.

function checkValidation() {
  const userId = id.value;
  const userPassword = password.value;
  const isUserInfoValid = userId.includes('@') && userPassword.length > 5;    

  if(isUserInfoValid) {
    logInButton.disabled = false;
    logInButton.classList.add('logInButtonOn');
  } else {
    logInButton.disabled = true;
    logInButton.classList.remove('logInButtonOn');
  }
}

유효성 검사 함수는 ID, PW 입력 시 마다 호출될 수 있도록 연결해 두었고
ID의 경우 입력한 input의 value가 '@'을 포함하고 있는지 includes 메소드를 이용했고,
PW는 value의 length가 5이상인 경우 유효하도록 조건을 넣어 두 가지 조건을 모두 만족할 경우(&&) 버튼을 활성화 시켰다.

❗️ userId, userPassword, isUserInfoValid를 처음엔 변수로 따로 선언하지 않고 바로 if문에 넣었었는데, 멘토님께서 if문 안의 코드가 복잡할 경우 변수를 사용하는 것이 훨씬 로직을 이해하는데 도움이 될 것 같다고 피드백을 주셔서 수정했다.