HTML code script for a Password generator

Created on 3 July, 2024 • 110 views • 1 minutes read

HTML code script for a Password generator

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Password Generator</title>

 <style>

  /* Add some basic styling here for presentation on your blog */

 </style>

</head>

<body>

 <h1>Password Generator</h1>

 <div id="passwordContainer">

  <p>Click the button to generate a secure password.</p>

  <input type="text" id="password" readonly>

 </div>

 <button onclick="generatePassword()">Generate Password</button>


 <script>

  function generatePassword() {

   const lowercaseLetters = "abcdefghijklmnopqrstuvwxyz";

   const uppercaseLetters = lowercaseLetters.toUpperCase();

   const numbers = "0123456789";

   const symbols = "!@#$%^&*()_+=";


   let characterSet = "";

   if (document.getElementById("includeLowercase").checked) {

    characterSet += lowercaseLetters;

   }

   if (document.getElementById("includeUppercase").checked) {

    characterSet += uppercaseLetters;

   }

   if (document.getElementById("includeNumbers").checked) {

    characterSet += numbers;

   }

   if (document.getElementById("includeSymbols").checked) {

    characterSet += symbols;

   }


   // Improve security by using a cryptographically secure random number generator

   // This is for educational purposes only. Consider a library like forge for real use.

   let password = "";

   for (let i = 0; i < 16; i++) { // Generate a password of length 16

    password += characterSet.charAt(Math.floor(Math.random() * characterSet.length));

   }


   document.getElementById("password").value = password;

  }

 </script>

</body>

</html>