📝 인스타그램 클론 코딩 (로그인)

구현 내용!

• id , pw를 입력 하는 input , 로그인 button 생성
  
  
• id , pw에 validation(유효성 검사) 실행
  1. id에 '@' 를 포함.
  2. pw의 글자수가 5글자 이상.
  3. 기본적으로 로그인 버튼은 비활성화 상태여야함.
  4. 위의 두 조건을 만족할 시 로그인 버튼을 파란색으로 활성화.
  
  
• 유효성 검사에서 이벤트 리스너와 삼항 연산자 사용.
  
  
  

구현 한 코드

let id1 = document.querySelector(".id")
let pw1 = document.querySelector(".pw")
let butt = document.querySelector(".button")
const loginForm = document.getElementById('loginForm');
//
loginForm.addEventListener('input' ,function() {
    const idVal = id1.value;
    const pwVal = pw1.value;
    idVal.includes("@") ==true && pwVal.length >= 5 ? (
    butt.disabled = false,
    butt.style.backgroundColor = "blue"
    ) : (
    butt.disabled = true
    )
})

동작 원리

1. loinForm (id와 pw를 묶은 form의 className) 에서 실행,
   input의 조건으로 실행 되는 이벤트 리스너 선언.

2. .value 를 통해 idVal, pwVal 변수에 로그인 창에서 입력되는 값을 저장 할 수 있도록 함.

3. idVal에서는 @의 문자가 포함되어 있는지, pwVal에서는 글자수가 5자 이상이 되는지 검사하고 조건을 충족해야만 실행되는 if문 생성.

4. 삼항 연산자를 통해 위의 조건을 충족한다면 로그인 버튼에 선언한 disabled 속성이 false가 되며 버튼 활성화 , 조건을 충족하지 못한다면 true로 로그인 버튼의 비활성화 유지.
   
   
   

disabled

HTML의 'button', 'input' 태그를 사용한 버튼을 활성화/비활성화 할때는 disabled 속성을 이용한다.

target.disabled = false;

target.disabled = true;

선택된 버튼 element의 disabled 값을 true/false로 설정한다.

disabled 값이 true이면 버튼이 비활성화 되고, false이면 활성화 된다.

삼항 조건 연산자

idVal.includes("@") ==true && pwVal.length >= 5 ? (
    butt.disabled = false,
    butt.style.backgroundColor = "blue"
    ) : (
    butt.disabled = true
    )

조건부 삼항 연산자는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자다.
맨 앞에 조건문이 들어가고, 그 뒤로 물음표(?)와 조건이 참truthy이라면 실행할 식이 물음표 뒤로 들어간다.
바로 뒤로 콜론(:)이 들어가며 조건이 거짓falsy이라면 실행할 식이 마지막에 들어간다.
보통 if 명령문의 단축 형태로 쓰인다.

결과물

너무 뿌듯해!!😆😆