In this comprehensive guide, we’ll dissect the intriguing code for a Password Strength Checker created using JavaScript. Let’s delve into the intricacies of the HTML, CSS, and JavaScript components to understand how this unique tool works.
Understanding the HTML Structure:
The HTML structure of the Password Strength Checker comprises essential elements:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Unique Password Strength Checker JavaScript</title>
</head>
<body>
<div class="custom-container">
<header>Unique Password Strength Indicator</header>
<form action="#">
<div class="field-container">
<input
onkeyup="validatePassword()"
type="password"
placeholder="Type password"
/>
<span class="showBtn">DISPLAY</span>
</div>
<div class="strength-indicator">
<span class="weak"></span>
<span class="medium"></span>
<span class="strong"></span>
</div>
<div class="strength-text"></div>
</form>
</div>
</body>
</html>- Header: A title indicating the purpose of the tool, i.e., “Unique Password Strength Indicator.”
- Form: Contains an input field for typing the password and a button to toggle password visibility.
- Strength Indicator: Displays visual cues indicating the strength of the entered password.
- Strength Text: Provides textual feedback about the strength of the password.
Styling with CSS:
CSS is utilized to enhance the visual appeal and layout of the Password Strength Checker. Key CSS styles include:
@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;
text-align: center;
background-color: #1e1c27;
}
.custom-container {
background: #fff;
padding: 20px 30px;
width: 420px;
border-radius: 5px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.custom-container header {
font-size: 24px;
font-weight: 600;
line-height: 33px;
}
.custom-container form {
margin: 20px 5px 10px 5px;
position: relative;
}
.custom-container form .field-container {
height: 45px;
width: 100%;
display: flex;
position: relative;
}
form .field-container 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-container input:focus {
border-color: #27ae60;
box-shadow: inset 0 0 3px #2fd072;
}
form .field-container .showBtn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 15px;
font-weight: 600;
cursor: pointer;
display: none;
user-select: none;
}
form .strength-indicator {
height: 10px;
margin: 10px 0;
display: flex;
align-items: center;
justify-content: space-between;
display: none;
}
form .strength-indicator span {
position: relative;
height: 100%;
width: 100%;
background: lightgrey;
border-radius: 5px;
}
form .strength-indicator span:nth-child(2) {
margin: 0 3px;
}
form .strength-indicator span.active:before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 5px;
}
.strength-indicator span.weak:before {
background-color: #ff4757;
}
.strength-indicator span.medium:before {
background-color: orange;
}
.strength-indicator span.strong:before {
background-color: #23ad5c;
}
form .strength-text {
font-size: 20px;
font-weight: 500;
display: none;
margin-bottom: -10px;
}
form .strength-text.weak {
color: #ff4757;
}
form .strength-text.medium {
color: orange;
}
form .strength-text.strong {
color: #23ad5c;
}- Global Styles: Resets default browser styles and sets background color and font family.
- Container Styles: Defines dimensions, background color, padding, border-radius, and box-shadow for the main container.
- Input Field Styles: Styles the password input field, including border, padding, and transition effects.
- Strength Indicator Styles: Styles the visual indicators for password strength using different colors.
- Strength Text Styles: Styles the textual feedback for password strength, including font size and color.
Implementing JavaScript Functionality:
JavaScript breathes life into the Password Strength Checker by handling user input, validating password strength, and providing visual and textual feedback. Here’s how it works:
const strengthIndicator = document.querySelector(".strength-indicator");
const passwordInput = document.querySelector("input");
const weakStrength = document.querySelector(".weak");
const mediumStrength = document.querySelector(".medium");
const strongStrength = document.querySelector(".strong");
const strengthText = document.querySelector(".strength-text");
const showButton = document.querySelector(".showBtn");
let regExpWeak = /[a-z]/;
let regExpMedium = /\d+/;
let regExpStrong = /.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/;
function validatePassword() {
if (passwordInput.value != "") {
strengthIndicator.style.display = "block";
strengthIndicator.style.display = "flex";
if (
passwordInput.value.length <= 3 &&
(passwordInput.value.match(regExpWeak) ||
passwordInput.value.match(regExpMedium) ||
passwordInput.value.match(regExpStrong))
)
no = 1;
if (
passwordInput.value.length >= 6 &&
((passwordInput.value.match(regExpWeak) &&
passwordInput.value.match(regExpMedium)) ||
(passwordInput.value.match(regExpMedium) &&
passwordInput.value.match(regExpStrong)) ||
(passwordInput.value.match(regExpWeak) &&
passwordInput.value.match(regExpStrong)))
)
no = 2;
if (
passwordInput.value.length >= 6 &&
passwordInput.value.match(regExpWeak) &&
passwordInput.value.match(regExpMedium) &&
passwordInput.value.match(regExpStrong)
)
no = 3;
if (no == 1) {
weakStrength.classList.add("active");
strengthText.style.display = "block";
strengthText.textContent = "Your password is too weak";
strengthText.classList.add("weak");
}
if (no == 2) {
mediumStrength.classList.add("active");
strengthText.textContent = "Your password is medium";
strengthText.classList.add("medium");
} else {
mediumStrength.classList.remove("active");
strengthText.classList.remove("medium");
}
if (no == 3) {
weakStrength.classList.add("active");
mediumStrength.classList.add("active");
strongStrength.classList.add("active");
strengthText.textContent = "Your password is strong";
strengthText.classList.add("strong");
} else {
strongStrength.classList.remove("active");
strengthText.classList.remove("strong");
}
showButton.style.display = "block";
showButton.onclick = function () {
if (passwordInput.type == "password") {
passwordInput.type = "text";
showButton.textContent = "HIDE";
showButton.style.color = "#23ad5c";
} else {
passwordInput.type = "password";
showButton.textContent = "DISPLAY";
showButton.style.color = "#000";
}
};
} else {
strengthIndicator.style.display = "none";
strengthText.style.display = "none";
showButton.style.display = "none";
}
}- Password Validation Function: Validates the entered password against predefined regular expressions for weak, medium, and strong passwords.
- Display Feedback: Dynamically updates the strength indicators and text based on the evaluated password strength.
- Toggle Password Visibility: Enables users to toggle between hiding and displaying the password characters.
Conclusion:
In this detailed exploration, we’ve deciphered the inner workings of a unique Password Strength Checker built using HTML, CSS, and JavaScript. By understanding the HTML structure, CSS styling, and JavaScript functionality, you can implement similar tools to enhance the security of user passwords on your website. Whether you’re a beginner or an experienced developer, this guide equips you with the knowledge to create robust and user-friendly password validation systems.
Happy Coding!
