How to Create Password Strength Checker
with HTML,CSS and JavaScript
What is Password Strength Checker?
A password strength tester gauges how long it might hypothetically take to crack your password by testing the password against a set of known criteria–such as length, randomness, and complexity. Using a strength tester is an easy step to securing your online profile.
How does a password checker work?
The checker assesses the password's resilience to being guessed outright or cracked by cybercriminals using computer-automated hacking tools. When a user creates a password, the security checker ranks its effectiveness using sophisticated algorithms and displays the result to the user.
Video Tutorial of Password Strength Checker
Password Strength Checker [Source Codes]
TO Create Password Strength Checker with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Password Strength Checker</title>
- <link rel="stylesheet" href="style.css">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
- </head>
- <body>
- <div class="container">
- <header>Password Strength Checker</header>
- <form action="#">
- <div class="field">
- <input onkeyup="trigger()" type="password" placeholder="Enter your password">
- <span class="showBtn"><i class="fa fa-eye" aria-hidden="true"></i></span>
- </div>
- <div class="indicator">
- <span class="weak"></span>
- <span class="medium"></span>
- <span class="strong"></span>
- </div>
- <div class="text"></div>
- </form>
- </div>
- <script src="script.js">
- </script>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- body{
- display: grid;
- height: 100%;
- place-items: center;
- text-align: center;
- background: #FFF;
- font-family: Arial, sans-serif;
- }
- .container{
- background: #fff;
- padding: 30px 30px;
- width: 430px;
- border-radius: 5px;
- margin-top: 190px;
- box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1),
- 0 4px 8px rgba(0, 0, 0, 0.1);
- }
- .container header{
- font-size: 24px;
- font-weight: 600;
- line-height: 33px;
- }
- .container form{
- margin: 20px 5px 10px 5px;
- position: relative;
- }
- .container form .field{
- height: 45px;
- width: 100%;
- display: flex;
- position: relative;
- }
- form .field input{
- width: 100%;
- height: 100%;
- border: 1px solid lightgrey;
- padding-left: 15px;
- outline: none;
- border-radius: 5px;
- font-size: 17px;
- transition: all 0.3s;
- }
- form .field input:focus{
- border-color: #27ae60;
- box-shadow: inset 0 0 3px #2fd072;
- }
- form .field .showBtn{
- position: absolute;
- right: 10px;
- top: 50%;
- transform: translateY(-50%);
- font-size: 15px;
- font-weight: 600;
- cursor: pointer;
- display: none;
- user-select: none;
- }
- form .indicator{
- height: 10px;
- margin: 10px 0;
- display: flex;
- align-items: center;
- justify-content: space-between;
- display: none;
- }
- form .indicator span{
- position: relative;
- height: 100%;
- width: 100%;
- background: lightgrey;
- border-radius: 5px;
- }
- form .indicator span:nth-child(2){
- margin: 0 3px;
- }
- form .indicator span.active:before{
- position: absolute;
- content: '';
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- border-radius: 5px;
- }
- .indicator span.weak:before{
- background-color: #ff4757;
- }
- .indicator span.medium:before{
- background-color: orange;
- }
- .indicator span.strong:before{
- background-color: #23ad5c;
- }
- form .text{
- font-size: 18px;
- font-weight: 400;
- display: none;
- margin-bottom: -10px;
- }
- form .text.weak{
- color: #ff4757;
- }
- form .text.medium{
- color: orange;
- }
- form .text.strong{
- color: #23ad5c;
- }
Now paste the following codes into your script.js file
- const indicator = document.querySelector(".indicator");
- const input = document.querySelector("input");
- const weak = document.querySelector(".weak");
- const medium = document.querySelector(".medium");
- const strong = document.querySelector(".strong");
- const text = document.querySelector(".text");
- const showBtn = document.querySelector(".showBtn");
- let regExpWeak = /[a-z]/;
- let regExpMedium = /\d+/;
- let regExpStrong = /.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/;
- function trigger(){
- if(input.value != ""){
- indicator.style.display = "block";
- indicator.style.display = "flex";
- if(input.value.length <= 3 && (input.value.match(regExpWeak) || input.value.match(regExpMedium) || input.value.match(regExpStrong)))no=1;
- if(input.value.length >= 6 && ((input.value.match(regExpWeak) && input.value.match(regExpMedium)) || (input.value.match(regExpMedium) && input.value.match(regExpStrong)) || (input.value.match(regExpWeak) && input.value.match(regExpStrong))))no=2;
- if(input.value.length >= 6 && input.value.match(regExpWeak) && input.value.match(regExpMedium) && input.value.match(regExpStrong))no=3;
- if(no==1){
- weak.classList.add("active");
- text.style.display = "block";
- text.textContent = "Your password is too week";
- text.classList.add("weak");
- }
- if(no==2){
- medium.classList.add("active");
- text.textContent = "Your password is medium";
- text.classList.add("medium");
- }else{
- medium.classList.remove("active");
- text.classList.remove("medium");
- }
- if(no==3){
- weak.classList.add("active");
- medium.classList.add("active");
- strong.classList.add("active");
- text.textContent = "Your password is strong";
- text.classList.add("strong");
- }else{
- strong.classList.remove("active");
- text.classList.remove("strong");
- }
- showBtn.style.display = "block";
- showBtn.onclick = function(){
- if(input.type == "password"){
- input.type = "text";
- showBtn.innerHTML = '<i class="fa fa-eye-slash" aria-hidden="true"></i>';
- showBtn.style.color = "#23ad5c";
- }else{
- input.type = "password";
- showBtn.innerHTML = '<i class="fa fa-eye" aria-hidden="true"></i>';
- showBtn.style.color = "#000";
- }
- }
- }else{
- indicator.style.display = "none";
- text.style.display = "none";
- showBtn.style.display = "none";
- }
- }
If you face any difficulties while creating your Password Strength Checker or your code is not working as expected, you can download the source code files Password Strength Checker by clicking on the download button.