Random Password Generator in JavaScript

Random Password Generator in JavaScript
Code Snippet:Simple Password Generator
Author: Lary
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 550
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X