비밀번호 가시성 전환

1단계: HTML 입력 태그 생성 [type= 'password']

  <input type='password' id='password' />
  <p>
    Show Password
    <input type='checkbox' id='checkbox' />
  </p>

2단계: 스토어 선택기(Javascript)

const myInput = document.querySelector("#password");
const checkbox = document.querySelector("#checkbox");

3단계: 가시성 기능 전환

const toggleVisibility = () => {
  if (myInput.type === "password") {
    myInput.type = "text";
  } else {
    myInput.type = "password";
  }
};

4단계: 이 기능을 이벤트 변경 시 체크박스에 할당

checkbox.addEventListener("change", toggleVisibility);