Password Show or Hide Toggle using HTML CSS & JavaScript

In this video you’ll learn how to create a Toggle Button to Show or Hide Password using HTML CSS & JavaScript. Earlier I have shared a blog on how to create an Animated Login Form Design and now I’m going to create Password Show Hide Toggle Button.

Generally, Password Show or Hide Toggle lets you easily hide or show passwords via JavaScript. The logic behind it is, at first, the type of input is a password, so the characters are in the bullet format, but when you click on the toggle button or icon, then the type of input change into the text from the password and the password visible.

Source Code:

HTML File

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Password Show or Hide Toggle | CodeLab</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  </head>
  <body>
    <div class="wrapper">
      <input type="password" placeholder="Enter Password" required>
      <span class="show-btn"><i class="fas fa-eye"></i></span>
    </div>
    <script>
      const passField = document.querySelector("input");
      const showBtn = document.querySelector("span i");
      showBtn.onclick = (()=>{
        if(passField.type === "password"){
          passField.type = "text";
          showBtn.classList.add("hide-btn");
        }else{
          passField.type = "password";
          showBtn.classList.remove("hide-btn");
        }
      });
    </script>

  </body>
</html>

CSS FIle:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #8e44ad;
}
.wrapper{
  position: relative;
  height: 55px;
  width: 320px;
  border-radius: 5px;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
}
.wrapper input{
  width: 100%;
  height: 100%;
  border: 1px solid #8e44ad;
  padding-left: 15px;
  font-size: 18px;
  outline: none;
  border-radius: 5px;
}
.wrapper input::placeholder{
  font-size: 17px;
}
.wrapper span{
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #8e44ad;
  cursor: pointer;
  display: none;
}
.wrapper input:valid ~ span{
  display: block;
}
.wrapper span i.hide-btn::before{
  content: "\f070";
}

Subscribe : https://www.youtube.com/channel/UCBlr2jG1onljL-gUy9bbhJw

#html #css #javascript