Password Strength Visual Meter | HTML CSS JavaScript

Password Strength Visual Meter with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #36

Project Overview

The Password Strength Visual Meter with Show/Hide is a frontend tool developed using HTML, CSS, and JavaScript that evaluates password strength as the user types and provides instant visual feedback. It checks important criteria such as length, uppercase letters, numbers, and special characters, and displays the strength level using a dynamic progress bar. Additionally, users can toggle password visibility using a show/hide feature, improving usability. This project demonstrates concepts like input validation, regex usage, DOM manipulation, and interactive UI design, making it useful for authentication systems and modern web forms.

Key Features

Real-Time Password Checking: The password strength is checked whenever the user types or changes the input. This gives immediate feedback without requiring a separate button.
Visual Strength Meter: A progress bar shows the password strength visually. Its width changes from 0% to 100% depending on how many requirements the password meets.
Dynamic Strength Colors: The meter changes color according to the password level. It uses red for weak, orange for medium, yellow-green for good, and green for strong passwords.
Show and Hide Password: Users can click the eye icon to switch between hidden and visible password text. This makes it easier to check the password while entering it.
Minimum Length Validation: The tool checks whether the password contains at least eight characters. When the requirement is met, the corresponding rule changes to a valid state.
Uppercase Letter Check: JavaScript checks whether the password contains at least one uppercase letter. The validation uses a regular expression to detect uppercase characters.
Number and Symbol Validation: The project checks for both numbers and special characters. Therefore, users can see which important password requirements are still missing.
Strength Level Display: The interface displays labels such as Weak, Medium, Good, and Strong. These labels change automatically as the password meets more conditions.
Interactive Validation Rules: Each password requirement is displayed as a separate rule below the strength meter. Valid rules change their appearance to show that the condition has been satisfied.
Simple Responsive Interface: The project uses a compact centered container with a clean input and validation area. Its simple layout makes the tool easy to use across different screen sizes.

What You'll Learn

How to create a password strength checker using HTML
How to handle password input events with JavaScript
How to use regular expressions for validation
How to check password length and character types
How to update CSS styles dynamically
How to create a visual progress meter
How to implement show and hide password functionality
How to update validation messages using DOM manipulation

HTML Code

The HTML creates the structure of the Password Strength Visual Meter. First, it adds a password input inside an .input-box along with an eye icon that controls password visibility. Next, the .meter container holds the strengthBar, which JavaScript updates according to the password strength. A paragraph with the strengthText ID displays messages such as Weak, Medium, Good, and Strong.

Finally, an unordered list contains four validation rules: At least 8 characters, Uppercase letter, Number, and Special character. Each rule has its own ID so JavaScript can update its valid state.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Password Strength Meter</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container">

<h2>Password Strength Meter</h2>

<div class="input-box">
<input type="password" id="password" placeholder="Enter password">
<span id="togglePassword">👁</span>
</div>

<div class="meter">
<div id="strengthBar"></div>
</div>

<p id="strengthText">Strength: </p>

<ul class="rules">
<li id="length">At least 8 characters</li>
<li id="uppercase">Uppercase letter</li>
<li id="number">Number</li>
<li id="special">Special character</li>
</ul>

</div>

<script src="script.js"></script>

</body>
</html>

CSS Code

The CSS creates a simple centered password-strength interface. The body uses Flexbox to place the white container in the center of the page, while the container uses padding, rounded corners, a fixed width, and centered text. Next, the password input is placed inside a relatively positioned box so the eye icon can appear inside the input area. The strength meter uses a gray background with a colored inner bar that changes its width dynamically.

The validation rules are initially displayed in gray. When JavaScript adds the .valid class, the matching rule changes to green. A CSS transition on the strength bar also creates a smooth visual change when the password strength updates.

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{
background:#042354;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.container{
background:white;
padding:30px;
border-radius:12px;
width:350px;
text-align:center;
}

/* INPUT */

.input-box{
position:relative;
margin-bottom:15px;
}

.input-box input{
width:100%;
padding:10px;
padding-right:40px;
border:1px solid #ddd;
border-radius:6px;
}

#togglePassword{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
font-size:18px;
}

/* METER */

.meter{
width:100%;
height:10px;
background:#eee;
border-radius:10px;
overflow:hidden;
margin-bottom:10px;
}

#strengthBar{
height:100%;
width:0%;
background:red;
transition:0.3s;
}

#strengthText{
margin-bottom:10px;
font-weight:bold;
}

/* RULES */

.rules{
list-style:none;
text-align:left;
font-size:14px;
}

.rules li{
margin-bottom:5px;
color:#999;
}

.valid{
color:green;
}

Javascript Code

JavaScript controls password validation, the strength meter, and the show/hide feature. First, the code selects the password input, strength bar, strength text, and toggle icon using getElementById(). Next, a click event on the toggle changes the input type between password and text. The icon also changes to show whether the password is currently hidden or visible.

After that, the input event checks four conditions: password length, uppercase letters, numbers, and special characters. Regular expressions test the character requirements, while classList.toggle() updates each validation rule. Finally, JavaScript counts the number of satisfied conditions and updates the progress bar accordingly. The bar displays 25%, 50%, 75%, or 100% width and changes the strength message from Weak to Strong based on the result.

const password = document.getElementById("password")
const bar = document.getElementById("strengthBar")
const text = document.getElementById("strengthText")
const toggle = document.getElementById("togglePassword")

// Show / Hide Password
toggle.addEventListener("click", () => {

const type = password.getAttribute("type") === "password" ? "text" : "password"
password.setAttribute("type", type)

toggle.textContent = type === "password" ? "👁" : "🙈"

})

// Strength Checker
password.addEventListener("input", () => {

const value = password.value
let strength = 0

const hasLength = value.length >= 8
const hasUpper = /[A-Z]/.test(value)
const hasNumber = /[0-9]/.test(value)
const hasSpecial = /[^A-Za-z0-9]/.test(value)

// Update rules
document.getElementById("length").classList.toggle("valid", hasLength)
document.getElementById("uppercase").classList.toggle("valid", hasUpper)
document.getElementById("number").classList.toggle("valid", hasNumber)
document.getElementById("special").classList.toggle("valid", hasSpecial)

// Calculate strength
if(hasLength) strength++
if(hasUpper) strength++
if(hasNumber) strength++
if(hasSpecial) strength++

// Update UI
if(strength === 0){
bar.style.width = "0%"
text.innerText = "Strength:"
}
else if(strength === 1){
bar.style.width = "25%"
bar.style.background = "red"
text.innerText = "Weak"
}
else if(strength === 2){
bar.style.width = "50%"
bar.style.background = "orange"
text.innerText = "Medium"
}
else if(strength === 3){
bar.style.width = "75%"
bar.style.background = "yellowgreen"
text.innerText = "Good"
}
else{
bar.style.width = "100%"
bar.style.background = "green"
text.innerText = "Strong"
}

})