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>

---

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;
}

---

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;
}

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

A. First we need to create a function

function myFunction() {

}

B. We need to create a variable with our choice of letter,numbers or signs or whatever you like :

function generate() {

    let letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"

}

C. 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 = "";
}

D. 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;
    }

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.

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

document.getElementById("test").innerHTML = password;

---

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 ^_^