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