로그인 창 만들기 + 회고

 

로그인창 만들기

css가 예전보단 좀 나아진듯....?

box-shadow 랑 글꼴 바꾸는것, 이모지 넣는 것, 버튼 hover 기능,색 계열 맞추기 등이 들어갔다.

아 그리고,  border:none; 시켜놓는 게 이쁜듯..!

 

 

 

 

 

오류 고치기

페어분이 잘 도와주셔서 덕분에 오류를 해결할 수 있었다.

 

 

1. document 철자를 틀리게 씀

 

2. class 라 .를 써야 하는데, #을 씀

let elPasswordErrorMessage = document.querySelector('.mismatch-message')

 

3.  먼저 함수 isMatch 를 써서 두 패스워드가 같을때 true를 뱉어내고, 다를때, false 를 뱉어내는 조건문을 만든다.

function isMatch (password1, password2) {
  if(password1 === password2){
   
    return true;
  }else{
    
    return false;
  }
}

 

 

4. 함수 isMatch 에 전달인자를 넣어주고, 참이면 elPasswordErrorMessage에서 'hide'를 넣어준다.

반대로 거짓이면 elPasswordErrorMessage에서 'hide'를 제거한다. (즉, 에러메세지가 보이게 한다)

 

★주의 : 사용자가 입력값에 대한 일치여부를 판별해야 하기 때문에, elInputPassword.value,elInputPasswordConfirm.value로

.value 를 붙여서 표기한다.

elInputPasswordConfirm.onkeyup = function () {
  if(isMatch(elInputPassword.value,elInputPasswordConfirm.value)){
    elPasswordErrorMessage.classList.add('hide')
  }else{
    elPasswordErrorMessage.classList.remove('hide')
  }
}

 

5. 선언과 할당은 가장 위에서 해준다