Scribd
Upload
12 views4 pages

UIUX

Uploaded by

siddhantmohekar03
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views4 pages

UIUX

Uploaded by

siddhantmohekar03
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

NAME: KALSHETTI NANDESH

UI/UX

TY_25

Strong password html,css,js


CODE:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Strength Meter</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.signup-container {
width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 5px;
}

.input-group input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}

#passwordStrength {
margin-top: 5px;
font-size: 14px;
}

.weak {
color: red;
}

.medium {
color: orange;
}

.strong {
color: green;
}
</style>
</head>

<body>

<div class="signup-container">
<h2>Sign Up</h2>
<form id="signupForm">
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<div id="passwordStrength">Password strength: <span
id="strengthIndicator"></span></div>
<button type="submit">Sign Up</button>
</form>
</div>

<script>
document.getElementById('password').addEventListener('input', function ()
{
const password = this.value;
const strengthIndicator =
document.getElementById('strengthIndicator');

let strength = 0;
if (password.length >= 8) {
strength += 1;
}
if (password.match(/[a-z]+/)) {
strength += 1;
}
if (password.match(/[A-Z]+/)) {
strength += 1;
}
if (password.match(/[0-9]+/)) {
strength += 1;
}
if (password.match(/[!@#$%^&*()_+{}|:"<>?]+/)) {
strength += 1;
}

if (strength === 0) {
strengthIndicator.textContent = '';
} else if (strength <= 2) {
strengthIndicator.textContent = 'Weak';
strengthIndicator.className = 'weak';
} else if (strength <= 4) {
strengthIndicator.textContent = 'Medium';
strengthIndicator.className = 'medium';
} else {
strengthIndicator.textContent = 'Strong';
strengthIndicator.className = 'strong';
}
});
document.getElementById('signupForm').addEventListener('submit', function
(event) {
event.preventDefault();
// Add your form submission logic here
});
</script>

</body>

</html>

OUTPUT:

You might also like