HTML Code of Random Password Generator

HTML Code of Random Password Generator | Strong Password Generator | Password Generator

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Advanced Password Generator</title>
<style>body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}

.container {
text-align: center;
}

.options {
margin-bottom: 10px;
}

.options label {
margin-right: 10px;
}

.password-container {
margin-top: 20px;
}

input[type=”text”], input[type=”number”] {
width: 200px;
padding: 10px;
font-size: 16px;
margin-right: 10px;
}

button {
background-color: #04AA6D;
color: white;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-right: 5px;
}
</style>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”container”>
<h2>Strong Password Generator</h2>
<div class=”options”>
<label for=”length”>Length:</label>
<input type=”number” id=”length” min=”4″ max=”32″ value=”12″> <br></br>
<label><input type=”checkbox” id=”uppercase” checked> Uppercase</label>
<label><input type=”checkbox” id=”lowercase” checked> Lowercase</label>
<label><input type=”checkbox” id=”numbers” checked> Numbers</label>
<label><input type=”checkbox” id=”special” checked> Special Characters</label>
</div>
<div class=”password-container”>
<input type=”text” id=”password” readonly>
<button id=”generate-btn”>Generate Password</button><br></br>
<button id=”copy-btn”>Copy to Clipboard</button>
</div>
</div>
<script>function generatePassword() {
const length = parseInt(document.getElementById(“length”).value);
const uppercase = document.getElementById(“uppercase”).checked;
const lowercase = document.getElementById(“lowercase”).checked;
const numbers = document.getElementById(“numbers”).checked;
const special = document.getElementById(“special”).checked;

let charset = “”;
if (uppercase) charset += “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
if (lowercase) charset += “abcdefghijklmnopqrstuvwxyz”;
if (numbers) charset += “0123456789”;
if (special) charset += “!@#$%^&*()-_+=<>?”;

let password = “”;
for (let i = 0; i < length; ++i) {
const randomIndex = Math.floor(Math.random() * charset.length);
password += charset[randomIndex];
}

document.getElementById(“password”).value = password;
}

function copyToClipboard() {
const passwordInput = document.getElementById(“password”);
passwordInput.select();
document.execCommand(“copy”);
alert(“Password copied to clipboard!”);
}

document.getElementById(“generate-btn”).addEventListener(“click”, generatePassword);
document.getElementById(“copy-btn”).addEventListener(“click”, copyToClipboard);
</script>
</body>
</html>

Leave a Comment