[Instagram_Clone] Login Page by VanilaJS

1. Prologue

로그인 페이지와 메인 페이지를 각각 HTML과 CSS로 화면에 구현하면서 느낀점은 mark-up이 웹의 근본이고 이 근본부터 문제가 생긴다면 앞으로 프로젝트를 진행 할 때 걸림돌이 된다는 점이다. 내가 부여한 코드들, Class,Id명 등 JS로 넘어와 작업 시 많은 영향을 끼쳤다. 멘토님들의 기본에 충실하면서 나아가야 발전이 있다는 것을 명심하면서 JS작업을 시작하자~!!

2. VanilaJS로 Login page에 구현하고자 하는 기능

• 로그인 페이지에서 유저가 id와 pw를 입력했을 때 버튼 활성화되고 색이 선명하게 변한다.

3.Login.js

• Login page에서 구현하고 싶은 기능은 유저가 id와 pw를 입력했을 때 버튼이 활성화 되고 색이 진하게 변한다.

document.addEventListener('keyup',function(event){ 
  // keyup 이벤트가 발생하면 함수 실행
    const closeIdValue = document.getElementsByClassName('input_id')[0].value;
  // input_id 클래스 input창에 유저가 적은 value값을 변수에 저장
    const closePwValue = document.getElementsByClassName('input_pw')[0].value;
  // input_pw 클래스 input창에 유저가 적은 value값을 변수에 저장
    const closeBtn = document.getElementsByClassName('active_login_btn')[0];
  // active_login_btn 클래스 button에 접근, 변수에 저장

  if(closeIdValue === "" && closePwValue === ""||closeIdValue !== "" && closePwValue === ""||closeIdValue === "" && closePwValue !== ""){
  // id,pw 둘다 공백|| id 입력, pw 공백 || id 공백, pw 입력|| 
      closeBtn.disabled = true;
  // 버튼 비활성화 
      closeBtn.style.backgroundColor = 'rgba(var(--d69,0,149,246),.3)';
  // 버튼 색 지정 ( 연한 색 )
    } else if(closeIdValue !== "" && closePwValue !== ""){
  // id,pw 둘 다 입력
      closeBtn.disabled = false;
  // 버튼 활성화
      closeBtn.style.backgroundColor = '#0095f6';
  // 버튼 색 지정 ( 진한 색 )
    }
  return;
})

• <input> 안에 유저가 입력한 값에 따라 조건문을 설정해 함수를 실행
• addEventListener,getElementsByClassName를 사용해서 요소값에 접근
• DOM을 통해서 요소에 접근하고 입력된 user value를 사용

4. 발전하자

• 배운 내용만으로는 내가 원하는 기능을 완성할 수 없다. ( 구글링과 기술블로그 무한 참고 )
• DOM을 이해하는 과정에서 어려움이 많았다. 이해한 내용을 다시 정리하고 넘어가자.
  => 'document' 말 그대로 '웹 페이지를 표현하는 문서'이다. (ex. index.html)
  => 'querySelctor'는 제공한 선택자, 문서 내 첫 번째 element를 반환한다. (MDN 참고)
• 더 좋은 코드들을 알자마자 코드에 적용하지 말고 전과 비교해서 왜 이 코드들이 좋아진건지 이유를 항상 생각하고 적용하자.