Password Strength Checker

<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    
    <style>
    
    @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;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7D2AE8;
}
.container{
  position: relative;
  max-width: 460px;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 30px;
  margin: 0 20px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.container .input-box{
  position: relative;
}
.input-box .show_hide{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #A6A6A6;
  padding: 5px;
  cursor: pointer;
}
.input-box input{
  height: 60px;
  width: 100%;
  border: 2px solid #d3d3d3;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  outline: none;
  padding: 0 50px 0 16px;
}
.container .indicator{
  display: none;
}
.container .indicator.active{
  display: block;
  margin-top: 14px;
}
.indicator .icon-text{
  display: flex;
  align-items: center;
}
.icon-text .error_icon{
  margin-right: 8px;
}
.icon-text .text{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
}

</style>
    
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"/>
  </head>
<body>
  <div class="container">
    <div class="input-box">
      <i class="fas fa-eye-slash show_hide"></i>
      <input spellcheck="false" type="password" placeholder="Enter password">
    </div>
    <div class="indicator">
      <div class="icon-text">
        <i class="fas fa-exclamation-circle error_icon"></i>
        <h6 class="text"></h6>
      </div>
    </div>
  </div>

// js code to show & hide password

showHide.addEventListener("click", ()=>{
    if(input.type === "password"){
      input.type = "text";
      showHide.classList.replace("fa-eye-slash","fa-eye");
    }else {
      input.type = "password";
      showHide.classList.replace("fa-eye","fa-eye-slash");
    }
  });

// js code to show password strength (with regex)

let alphabet = /[a-zA-Z]/, //letter a to z and A to Z
      numbers = /[0-9]/, //numbers 0 to 9
      scharacters = /[!,@,#,$,%,^,&,*,?,_,(,),-,+,=,~]/; //special characters

input.addEventListener("keyup", ()=>{
    indicator.classList.add("active");

if(val == ""){
      indicator.classList.remove("active");
      input.style.borderColor = "#A6A6A6";
      showHide.style.color = "#A6A6A6";
      iconText.style.color = "#A6A6A6";
    }
  });

</script>

</body>
</html>

demo

Code Preview

Popular Posts

Pages

Password Strength Checker