Let's Create A Simple Random Password Generator With Javascript
Tags: javascript, webdev, codenewbie
Published: 2021-03-13 16:55:46

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

Let's get to it :

<h3> 1. Setting HTML </h3>

```html
<button onclick="myFunction()">Generate A Random Password</button>
    <p id="test"></p>
```

__________________

<h3> 2.Setting CSS </h3>

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.


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

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


<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5bkc79qr3znznyvy1ax.png">
___________________


<h3> 3. Setting javascript </h3>

Let the fun part begin :

```javascript
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;
}
```
<br>

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

1. First we need to create a function 

```javascript
function myFunction() {

}
```

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

```javascript
function generate() {

    let letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"

}
```

3. 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) .

```javascript
function myFunction() {

    let letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

    let password = "";
}
```


4. We want to create some random letters from the variable we just created.
We do this with 'for loop' and math object , like this :

```javascript
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<br>


<i>You can learn more about math object <a src="https://dev.to/eidorianavi/the-math-object-in-javascript-25li"> <b>here</b> </a> </i>



<br>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.


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

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

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

{% codepen https://codepen.io/nazaneyn/pen/bGBpzPZ %}



________________________

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