Instagram

인스타그램 클론코딩으로 실질적인것을 많이 접했다고 느낀다.
DOM으로 HTML과 Javascript를 연결하여 동적인 효과를 부여 할 수 있었다. 로그인 화면 구성이다.

querySelector()

우선 Javascript에서 HTML을 가져오는 것 부터 시작된다. 그 때 사용 되는 메서드인 querySelector()이다. 불러오기 위해선 유효한 CSS 선택자여야한다.

const nameBtn = document.querySelector('.userName');
const passwordBtn = document.querySelector('.userPassword');
const loginBtn = document.querySelector('.loginBtn');

addEventListener()

변수를 지정해주었으면 지정한 변수에 이벤트를 추가 한다. 이벤트를 추가하는 메서드 addEventListener()다. 속성이 아주 많지만, 전부 사용하는건 아니다.

click , contextmene, dbclick, mousedown, mouseenter, mouseleave, mouseover, mouseout, mouseup, poinerlockchange, poninterlockerror, select, wheel

이번 인스타그램 로그인 화면에 사용된건 key 이벤트 를 사용했다.

• 키보드를 눌렀을 때 발생하는 keydown
• 키보드를 누르고 떼는 순간 발생하는 keyup
• 키보드를 눌러 어떤 텍스트가 작성되는 순간 발생하는 keypress

우선 목표는 아이디와 비밀번호가 한 단어라도 같이 입력되어 있다면 로그인 박스가 푸른색으로 반응하기

nameBtn.addEventListener('keyup', function(){
    let nameLength = nameBtn.value.length;
    let passwordLength = passwordBtn.value.length;

    if(nameLength >= 1 && passwordLength >= 1){
        loginBtn.style.backgroundColor = "#0095f6";        
    } else {
        loginBtn.style.backgroundColor = "#b2dffc";
    }
});

이벤트 함수안에 아이디입력값의 길이 nameLength 와 비밀번호입력값 길이passwordLength를 if문 조건문에 대입하였고 논리연산자 &&를 넣어 두 조건이 만족해야 실행되도록 만들었다.

if(nameLength >= 1 && passwordLength >= 1){
loginBtn.style.backgroundColor = "#0095f6";
}