Password Generator - Pure HTML, CSS, and JavaScript

A password generator in JavaScript is a script that creates random strings of characters that can be used as passwords. These scripts typically include options for the user to specify certain parameters for the password, such as length, character sets (e.g. lowercase letters, uppercase letters, numbers, special characters), and the number of passwords to generate.

The script can be implemented using JavaScript's built-in functions, such as Math.random() and String.fromCharCode() to randomly select characters from a given set of characters. The script can also be designed to check if the generated password meets certain criteria, such as including a mix of uppercase and lowercase letters, numbers, and special characters, and also the length of the password.

Password generator scripts can be used in various types of applications such as website registration, login pages, or as a standalone tool. It can be used to generate passwords for users automatically, or to provide a convenient way for users to create their own passwords.

It is important to note that while password generators can create strong, random passwords, they are not a substitute for good password management practices, such as not reusing the same password across multiple accounts, and regularly updating your passwords.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Password Generator</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  
  <h2>Simple Password Generator in JS</h2>

  <div class="container">
    <form action="#" id="frm">
      <div class="form-group">
        <input type="text" id="output">
        <button id="btnCopy">Copy</button>
      </div>
  
      <div class="form-group">
        <label for="length">Password Length</label>
        <input type="number" id="length" value="8" min="6">
      </div>
  
      <div class="form-group">
        <input type="checkbox"  id="number" checked>
        <label for="number">Numbers</label>
      </div>

      <div class="form-group">
        <input type="checkbox"  id="captial">
        <label for="captial">Captial Letters</label>
      </div>

      <div class="form-group">
        <input type="checkbox"  id="small">
        <label for="small">Small Letters</label>
      </div>

      <div class="form-group">
        <input type="checkbox"  id="symbol">
        <label for="symbol">Symbols</label>
      </div>

      <div class="form-group">
        <button type="submit">Generate Password</button>
      </div>

    </form>
  </div>

  <script src="js/script.js"></script>
</body>
</html>

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Rubik', sans-serif;
}

body{
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h2{
  font-weight: 400;
  color: teal;
}
.container{
  width: 300px;
}
.form-group{
  width: 100%;
  display: flex;
  margin:20px 5px ;
  gap:10px;
}

This script generates a random password based on user's specified parameters, such as length and the types of characters to include (numbers, uppercase letters, lowercase letters, and symbols). The script starts by fetching the necessary elements from the HTML page, such as the output element where the generated password will be displayed, the form element, the button element to copy the password, and the checkbox elements to specify the type of characters to include.

Then, it defines several functions to generate random characters of a specific type:

generateRandomChar(min,max): generates a random character based on the ASCII range provided as arguments.
captitalValue(): generates a random uppercase letter
smallValue(): generates a random lowercase letter
numberValue(): generates a random number
symbolValue(): generates a random symbol from predefined set of symbols

It also defined an array of objects which consist of an element property and a fun property. The element property is the checkbox element, and fun property is the function that generates random characters of that type.

The script adds an event listener to the form element, so that when the form is submitted, the script generates a random password based on the user's specified parameters. It then loops through the password length specified by the user, and for each iteration, it generates a random character from the functions that are checked. The generated password is displayed in the output element and the user can copy the password using the copy button. The script also checks if the password generated is empty or not and shows the corresponding message.

js/script.js

const outputElement=document.querySelector('#output');
const btnCopy=document.querySelector('#btnCopy');
const passwordLengthElement=document.querySelector('#length');
const numberElement=document.querySelector('#number');
const captialElement=document.querySelector('#captial');
const smallElement=document.querySelector('#small');
const symbolElement=document.querySelector('#symbol');
const frm=document.querySelector('#frm');


//Button Click to copy password
btnCopy.addEventListener('click',async()=>{
  const pass=outputElement.value;
  if(pass){
      await navigator.clipboard.writeText(pass);
      alert("Copied to clipboard");
  }else{
    alert("There is no password to copy");
  }
});


/*
ASCII - American Standard Code for Information Interchange

0-128
0-255

65-90  -  A-Z
97-122 -  a-z
48-57  -  0-9
32     -  space

*/


function generateRandomChar(min,max)
{
  const limit=max-min+1;
  return String.fromCharCode(Math.floor(Math.random()*limit)+min);
}

function captitalValue(){
  return generateRandomChar(65,90);
}
function smallValue(){
  return generateRandomChar(97,122);
}
function numberValue(){
  return generateRandomChar(48,57);
}

function symbolValue(){
  const symbols="~!@#$%^&*()_+|}{<>*./";
  return symbols[Math.floor(Math.random()*symbols.length)];
}


const functionArray=[
  {
    element:numberElement,
    fun:numberValue
  },
  {
    element:captialElement,
    fun:captitalValue
  },
  {
    element:smallElement,
    fun:smallValue
  },
  {
    element:symbolElement,
    fun:symbolValue
  }


];


frm.addEventListener('submit',(e)=>{
  e.preventDefault();
  
  const limit=passwordLengthElement.value;


  let generatedPassword="";

  const funArray=functionArray.filter(({element})=>element.checked);
  //console.log(funArray);

  for(i=0;i<limit;i++){
    const index=Math.floor(Math.random()*funArray.length);
    const letter=funArray[index].fun();
    generatedPassword+=letter;//5$
  }



  outputElement.value=generatedPassword;
});

Output

Live Preview