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.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.