westargram 로그인 페이지 버튼 활성화

• 구현사항
  id, pw 에 각각 한 글자 이상 써야 버튼이 활성화 되도록 해주세요. 원래 연한 파란색이었다가 -> 활성화 되면 파란색으로!

'use strict';

// const thisIsId_activity = document.getElementsByClassName('login_email')[0];
//login_pw class의 첫번째를 가져와서 thisIsId_activity에 할당한다.
const thisIsPw_activity = document.getElementsByClassName('login_pw')[0];


//패스워드에서 키업 이벤트가 일어난다면 addEvnentListner로 콜백함수를 실행한다.
thisIsPw_activity.addEventListener('keyup', function(e){
    const id = document.querySelector('.login_email').value;
    // login 이메일 값을 찾아서 id에 저장한다.
    const password = document.querySelector('.login_pw').value;
    // login password 값을 password에 저장한다.

    
    if((id.length > 0)&&(password.length > 0) ){
    //두개의 받은 값의 길이 0이상 즉, 한개 이상 입력이 되었다면
        
        let blueButton = document.querySelector('.login_btn');
        //버튼의 정보를 찾아와서 변수에 저장한다.
        blueButton.style.backgroundColor = '#0095F6';
        //저장된 변수(버튼)에 접근해서 스타일의 백그라운트 컬러를 변경해준다.
    }
});

• 반성점
  기능 구현에만 너무 초점을 맞추다 보니깐 컨벤션이 엉망진창이다. 카멜표기법과 스네이크표기법이 합쳐져 있는 혼종이다. 다음에는 하나로 정해서 컨벤션을 쓰자. 이후에 팀 동료들과 협업시 너무나도 많은 비효율성과 짜증을 유발한다는 걸 멘토님의 세션을 들으면서 배우게 되었다.