DEV Community

Nazanin Ashrafi
Nazanin Ashrafi

Posted on • Originally published at hashnode.com

Let's Create A Simple Random Password Generator With Javascript

In this article I'll show you how to create a simple password generator with javascript.

Let's get to it :

1. Setting HTML

<button onclick="myFunction()">Generate A Random Password</button>
    <p id="test"></p>
Enter fullscreen mode Exit fullscreen mode

2.Setting CSS

Since it's a javascript article , I don't want to focus on css.
I'll just center the button and add a little border radius to it.

Ps. It's okay if you don't know flexbox yet.

html,
body {
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    border-radius: 10px;
    padding: 12px 15px;
    font-size: 100%;
    outline: none;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode


3. Setting javascript

Let the fun part begin :

function myFunction() {

    let letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    let password = "";

    for (let i = 0; i < 20; i++) {
        let generate = letters[Math.floor(Math.random() * 64)];
        password += generate;

    }


    document.getElementById("test").innerHTML = password;
}
Enter fullscreen mode Exit fullscreen mode

Time to break down the codes and see what exactly happened :

  1. First we need to create a function
function myFunction() {

}
Enter fullscreen mode Exit fullscreen mode
  1. We need to create a variable with our choice of letter,numbers or signs or whatever you like :
function generate() {

    let letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"

}
Enter fullscreen mode Exit fullscreen mode
  1. After creating a letter variable, we need to create an empty string so that our for loop could return the random letters to it (next step) .
function myFunction() {

    let letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

    let password = "";
}
Enter fullscreen mode Exit fullscreen mode
  1. We want to create some random letters from the variable we just created. We do this with 'for loop' and math object , like this :
for (var i = 0; i < 20; i++) {
        let generate = letters[Math.floor(Math.random() * 62)];
        password += generate;
    }
Enter fullscreen mode Exit fullscreen mode

Math.random() will create random passwords.
Math.floor will round a number downward to its nearest integer

You can learn more about math object here


You may wonder what's up with "20" and "62"!

  • Number 20 : it will be the length of our password.
    If you want to generate a shorter password you can set it to a lower number like 15 or 10.
    And if you want to generate a longer password , set it to a greater number like 25 .

  • Number 62 : remember when we created a variable that was consist of alphabets and numbers? weell 62 is the length of our variable.


5. Now that everything is set and done we need to access the id and manipulate it

document.getElementById("test").innerHTML = password;
Enter fullscreen mode Exit fullscreen mode

Here's the final result with a little bit of change in button :


I tried to break this tutorial into very simple steps.
I hope you guys found it helpful ^_^

Top comments (2)

Collapse
 
robotix263 profile image
ROBOTIX263

very well done explanation, beginners will never know why there is [password = "";] and you just said it straight "for our FOR LOOP to pass randomly generated numbers and letters to the password variable"

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

Thank you 🌹 i hope beginners find it helpful 🙏