Random Password Generator in JavaScript

This JavaScript code snippet helps you to create a simple password generator tool to integrate into signup forms. It comes with a simple interface, a text field, and a generate button. When you click the “generate” button, it produces random combinations of lowercase letters, uppercase letters, numbers, and special characters. It’s a simple tool for creating passwords with varying levels of complexity.

How to Create a Random Password Generator in JavaScript

1. The following HTML code defines the structure of the password generator. Copy the HTML structure into your project’s HTML file:

<div class="wrapper">
        <div class="pw">
           
            <p class="pwtxt">PASSWORD</p>
            <i class="generator">generate</i>
           <i class="warning">WARNING: It's just a fun project. Maybe these passwords aren't safe.</i>
        </div>
    </div>

The above code creates a wrapper div containing a password display area and a “generate” button.

2. Now, Copy the following CSS code into your project’s CSS file to style the password generator:

*{
  margin: 0;
  padding: 0;
}
.wrapper{
  background-color: #222;
  width: 100vw;
  height: 100vh;
  position: relative;
}
.pw{
  position: absolute;
  max-width: 50vw;
  min-width: 340px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pwtxt{
  background-color: rgb(252, 202, 52);
  padding: 2vw 3vw;
  min-width: 340px;
  min-height: calc( 1em + 0.4em );
  font-family: courier;
  font-size: 2em;
  font-weight: 900;
  text-align: center;
  line-height: 1.4em;
}
.generator{
  text-align: center;
  background-color: #444;
  padding: 1em 2em;
  color: #fff;
  margin-top: 20px;
  display: inline-block;
  min-width: 340px;
  transition: background-color .3s, color .3s;
  cursor: pointer;
  font-family: courier;
  font-style: normal;
}
.generator:hover{
  background-color: #fff;
  color: #000;
}
.warning{
  margin-top: 20px;
  color: #fff;
  max-width: 340px;
}
.blue{
  background-color: rgb(67, 143, 214);
}

3. Finally, , integrate the JavaScript code into your project. Copy the entire JavaScript code block into a separate .js file or include it within a <script> tag in your HTML file. It defines the functionality of the password generator. It generates random passwords when the “generate” button is clicked.

console.log( 'neues Passwort mit folgendem Befehl:' );
console.log( 'new_password()' );

let c = 0;

function generate_password(){
    arr = [
        arra = [
            'a', 'b', 'c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
        ],
        arrA = [
            'A', 'B', 'C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
        ],
        arr0 = [
            1,2,3,4,5,6,7,8,9,0
        ],
        arrS = [
            '!',"§","$","%","&","/","(",")","=","?","#","+","-","<",">"
        ]
    ];


    let rando = Math.round( 8 + Math.random() * 8 );

    let pw = [];

    for( let i = 0; i < rando; i++ ){
        let randoArr = Math.floor( Math.random() * 4 );
        // console.log( 'randoArr', randoArr );
        let randoZeich = Math.floor( Math.random() * arr[randoArr].length );

        let zeichen = arr[randoArr][randoZeich];

        pw.push( zeichen );
    }
    return pw;
}

function show_password( arr ){
    let password = '';
    for( let i = 0; i < arr.length; i++ ){
        password += arr[i];
    }
    return password;
}

function get_text(){
  let t = document.querySelector( '.pwtxt' );
  return t;
}

function get_generate_btn(){
  let t = document.querySelector( '.generator' );
  return t;
}

get_generate_btn().addEventListener( 'click', function(){
  c++;
  if( c === 3 ){
    t = get_text();
    t.textContent = 'somethingNotRandom ;)';
    t.classList.add( 'blue' );
  }else{
    t = get_text();
    let p = show_password( generate_password() );
    t.textContent = p;
    t.classList.remove( 'blue' );
  }
} );

Feel free to customize the code to suit your project’s needs. You can adjust the password length, character sets, or styling according to your preferences.

That’s it! You’ve successfully implemented a random password generator in your web project using JavaScript. Users can now generate random passwords with ease, and you can further enhance this code to meet specific requirements if needed.