[코드스테이츠 FE 45기] _2023.05.03 _ Day 17

---

오늘은 DOM 마지막날

코드스테이츠에서 내준 과제를 완료하고 

페어분과 페어도 잘 마무리했다!!

페어를 하면서 내가 아직 많이 부족하다는 것을 매번 느끼는 것 같다!

열심히 해야징

---

자바스크립트도 CSS 처럼 HTML의 class와 id에 적용하는 방법이 있었다!.

과제를 진행하는데 자꾸 에러가 떠서 ㅠㅠ 뭐가 문제인지 몰랐는데 페어님이 ! 쉽게 잘 설명해주셔서 

이해가 되었다~!

---

let elInputUsername = document.querySelector('#username');
console.log(elInputUsername);
let passwordConfirmInput = document.querySelector('#password-retype');
let passwordInput = document.querySelector('#password');
let btn = document.getElementById('a');
let elFailureMessage = document.querySelector('.failure-message');
let elSuccessMessage = document.querySelector('.success-message');

let elMismatchMessage = document.querySelector('.mismatch-message');

//아이디가 4자리 이하일 경우 경고 메세지 출력 , 이상일경우 성공 메세지 출력

elInputUsername.onkeyup = function () {
  console.log(elInputUsername.value)

  if (isMoreThan4Length(elInputUsername.value)) {
    console.log('4글자보다 크네')
    //성공 메세지가 보여야함
    elSuccessMessage.classList.remove('hide')

    //실패 메세지가 가려져야함
    elFailureMessage.classList.add('hide')
  } else {
    console.log('짧다.')
    //성공 메세지가 가려져야함
    elSuccessMessage.classList.add('hide')

    //실패 메세지가 보여야함
    elFailureMessage.classList.remove('hide')
  }
}

// 비밀번호를 입력할때 비밀번호 확인과 매치가 안될경우 경고 메세지 출력

passwordConfirmInput.onkeyup = function(){
  if (isMatch(passwordInput.value, passwordConfirmInput.value)){
      //실패 메세지가 가려져야함 
      elMismatchMessage.classList.add('hide') 
    }
    else {
     //실패 메세지가 보여야함
      elMismatchMessage.classList.remove('hide')
    }

}

// 따로 생성해 놓은 함수

function isMoreThan4Length(value) {

  return value.length >= 4
}

function isMatch(password1, password2) {

  if (password1 === password2) {
    return true
  } else {
    return false
  }
}

---

어려웠던 부분

let passwordConfirmInput = document.querySelector('#password-retype');
let passwordInput = document.querySelector('#password');
let elMismatchMessage = document.querySelector('.mismatch-message');


passwordConfirmInput.onkeyup = function(){
  if (isMatch(passwordInput.value, passwordConfirmInput.value)){
      elMismatchMessage.classList.add('hide') 
    }
    else {
      elMismatchMessage.classList.remove('hide')
    }

}

 

<div class="success-message hide">사용할 수 있는 아이디입니다</div>

<div class="failure-message hide">아이디는 네 글자 이상이어야 합니다</div>

 

<fieldset>

<input type="password" id="password" placeholder="비밀번호" />

</fieldset>

 

<fieldset>

<input

type="password"

 

id="password-retype"

placeholder="비밀번호 확인"

/>

 

</fieldset>

 

<div class="mismatch-message hide">비밀번호가 일치하지 않습니다</div>

 

 

   let passwordConfirmInput = document.querySelector('#password-retype');

   let passwordInput = document.querySelector('#password');

   let elMismatchMessage = document.querySelector('.mismatch-message');

 id="password" 

id  = > '#id'

class   => '.class'

 

위 id 와 class 표현 방법이 다르게 기입된 경우

 

   <div class="mismatch-message hide">비밀번호가 일치하지 않습니다</div>

 

   let elMismatchMessage = document.querySelector('.mismatch-message');

위와 같이 에러가 발생한다!