바닐라 JS를 사용하는 비밀번호 표시/숨기기 버튼

안녕하세요 여러분 오랜만에 돌아왔습니다.
이 게시물에서는 HTML, CSS 및 JS를 사용하여 간단한 암호 표시/숨기기 버튼을 만들지 않을 것입니다.
우리가 무엇을 만들려는지 이해할 수 없다면 이 비디오를 확인하십시오.

HTML:

암호를 입력하기 위해 type="password"의 입력 필드를 만들고 눈 아이콘을 만들기 위해 멋진 글꼴을 사용합니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<input type="password" placeholder="Enter Your Password" id="pass">
<button id="btn"><i id="icon"class="fa-solid fa-eye"></i></button>

CSS:

스타일링의 경우 원하는 방식으로 자유롭게 스타일링할 수 있습니다.

자바스크립트

showbtn에 이벤트 리스너를 추가하고 onclick 함수를 호출합니다. 이를 위해 이미 count = 1로 설정했으며 클릭 시 카운트를 1씩 증가시킵니다.count += 1이제 if-else 문을 사용합니다.

if (count %2 == 0){

     icon.classList.remove("fa-eye");
    icon.classList.add("fa-eye-slash");
  pass.removeAttribute("type");
  }else{
    icon.classList.remove("fa-eye-slash")
    icon.classList.add("fa-eye");
  pass.setAttribute("type","password");
  }

개수를 2로 나눌 수 있는 경우 fa-eye에서 class를 제거하고 icon fa-eye-slash를 추가하고 class에서 유형 속성을 제거하여 암호를 표시합니다.

Else ( pass는 2로 나눌 수 없음) 그런 다음 count에서 fa-eye-slash class를 제거하고 icon fa-eye를 추가하고 class type password의 속성을 추가하여 숨김 비밀번호.

전체 JS 코드는 다음과 같습니다.

let inpPassword = document.getElementById("pass");
let showbtn = document.getElementById("btn");
let icon = document.getElementById("icon");

let count = 1;
showbtn.addEventListener("click", function() {
  count += 1;

  if (count %2 == 0){

     icon.classList.remove("fa-eye");
    icon.classList.add("fa-eye-slash");


  pass.removeAttribute("type");
  }else{
    icon.classList.remove("fa-eye-slash")
    icon.classList.add("fa-eye");
  pass.setAttribute("type","password");
  }
});

오랜만에 글을 쓰다 보니 이 글이 그 정도 수준이 아닐 수도 있습니다. 나는 그 일에 대해 유감이다.

이 튜토리얼이 마음에 드셨으면 합니다.