HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Password Generator</title> </head> <body> <h1>Password Generator</h1> <div> <label for="length">Password Length:</label> <input type="number" id="length" min="4" max="20" value="8"> <button onclick="generatePassword()">Generate Password</button> </div> <div> <label for="password">Generated Password:</label> <input type="text" id="password" readonly> </div> </body> </html>
CSS:
<style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } h1 { text-align: center; } div { margin-bottom: 15px; } label { display: inline-block; width: 150px; } input[type="number"] { width: 50px; padding: 5px; } button { padding: 8px 15px; background-color: #4caf50; color: white; border: none; border-radius: 4px; cursor: pointer; } input[type="text"] { width: 250px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } </style>
JAVASCRIPT:
<script> function generatePassword() { var length = document.getElementById("length").value; var passwordField = document.getElementById("password"); var charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]\\:;?><,./-="; var password = ""; for (var i = 0; i < length; ++i) { var randomChar = charset.charAt(Math.floor(Math.random() * charset.length)); password += randomChar; } passwordField.value = password; } </script>
Try to answer about this code:
What HTML tag is used to create an input field for specifying the password length?
<number>
<input>
<label>
<button>
Which CSS property is used to style the background color of the "Generate Password" button?
border-color
background-color
color
background-image
In the JavaScript function generatePassword(), what does the charset variable define?
The number of password characters
The allowed characters for the password
The password generation method
The encryption algorithm used
What HTML attribute is used to make the "Generated Password" input field read-only?
disabled
readonly
editable
locked