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 strength detection
Visual strength meter with dynamic color changes
Show and hide password functionality
Validation for length, uppercase, numbers, and symbols
Displays strength levels like weak, medium, and strong
Interactive and user-friendly interface
Responsive design for different screen sizes

HTML Code

<!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

*{
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

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"
}

})