Random Password Generator in JavaScript

Here’s a comprehensive tutorial to guide you through building a Random Password Generator in JavaScript. This tool provides a simple and effective way to create strong, randomized passwords directly within your browser. By the end of this tutorial, you’ll have a functional password generator that you can customize and integrate into your own projects.

Setting Up the HTML Structure

First, we need to define the basic structure of our password generator using HTML. This will include the display area for the password, a button to trigger password generation, and a small warning.

<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>
    <script  src="./script.js"></script>

Styling with CSS

Next, we’ll use CSS to style our password generator, making it visually appealing and user-friendly. These styles will control the layout, colors, and fonts used in our 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);
}

Implementing the JavaScript Logic

Now comes the core functionality of our password generator. We’ll use JavaScript to define functions for generating random passwords based on specified criteria, and updating the display with the generated password when the 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 = [
            '!',"§","{{JS_CODE}}#34;,"%","&","/","(",")","=","?","#","+","-","<",">"
        ]
    ];


    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 = 'Gefunden! Passwort ist: SCHNITZEL';
    t.classList.add( 'blue' );
  }else{
    t = get_text();
    let p = show_password( generate_password() );
    t.textContent = p;
    t.classList.remove( 'blue' );
  }
} );

Adding Header Assets

Include these assets in the “ section of your HTML to ensure proper functionality and styling.

Adding Footer Assets

Include any JavaScript files just before the closing “ tag.

By following these steps, you have successfully built a Random Password Generator in JavaScript. You can further enhance it by adding options to customize password length and character types.