How to generate random passwords using JavaScript

Posted on January 26, 2021, at 8:00 PM [IST], created by Admin, Website: codewithbishal.com

Preview :

Password

Copy

Random password generator using JavaScript:

What is a random password generator?

=> Our awesome, random password generator gives visitors an attractive random password generator that generates passwords with a click of a button.

How can I use this random password generator using JavaScript?

=> You can easily copy the code or can download the code from our website and can simply paste it anywhere to get the random password generator.

Do I need to know how to code?

=> No, you don't need to know how to code you can simply copy code from here and paste it wherever you want your random password generator. Also, you can try it on our website using the "TRY IT NOW" option or can download the code using the "Download" button below.

Is it safe to use the random password generator in HTML?

=> Yes, it's completely safe to use the random password generator and you can check the strength of these passwords by clicking here.
Note: We do not take responsibility for the password generated here.

What are the advantages of the random password generator?

=> Random password generator is a very good way for generating random passwords on click.

How can I download the source code of the random password generator?

=> Scroll the page to the bottom there you will find our download button to download the code.

Overview of the Blog :

=> In this blog, you can learn, how to make a random password generator using HTML, CSS, and JavaScript By Code With Bishal. Just Copy The Code From Here And Paste It Into Your Website or portfolio. To Preview scroll the page to the beginning. If you are having any problem viewing the code just refresh the page. The random password generator is a lightweight and easy-to-use HTML, CSS, and JavaScript code that creates a random password generator for you. In this blog, there are fifth sections on the webpage, in the first section, you can get a preview of the blog, in the second section there are few FAQs and an overview of the blog, in the third section there are few more coding blogs you might like, in the fourth section you can Try our random password generator using the "TRY IT NOW" button, after that, you can copy the code and paste it [that's the fifth section] and from the last section You can download the source code.

You might like this :

Email Validation using HTML, CSS and JavaScript Create Draggable Lists with Javascript Countdown timer using JS

Image Gallery with Filtering (HTML, CSS and JavaScript) Social media icons with hover effect(Pure CSS)

<!DOCTYPE html>
<html>
<head>
<title>Random password generator using HTML,CSS and JavaScript - Code With Bishal</title>
<style>
  @import url("https://fonts.googleapis.com/css2?family=Potta+One&display=swap");
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-family: "Potta One", sans-serif;
      }
      label {
        position: relative;
      }
      label input {
        font-family: "Potta One", sans-serif;
        font-size: 1rem;
        color: black;
        background: transparent;
      
        padding: 1rem 1.2rem;
        min-width: 24rem;
      
        border-radius: 0.2rem;
        border: 2px solid #7a7a7a56;
      
        transition: border-color 0.2s;
      }
      label p {
        color: #f9f9f9;
        font-size: 1rem;
        user-select: none;
      
        position: absolute;
        top: 30%;
        transform: translateY(-90%);
      
        margin-left: 0.8rem;
        padding: 0 0.4rem;
      
        background: white;
        color: black;
      
        transition: top 0.2s, font-size 0.2s, color 0.2s;
      }
      label input:not(:placeholder-shown) {
        border-color: #f80743;
      }
      label input:not(:placeholder-shown) + p {
        top: 0;
        font-size: 0.9rem;
        color: #ff4754;
      }
      .genpass {
        font-family: Potta One;
        font-size: 1rem;
        margin-top: 1.2rem;
        padding: 1rem 1.2rem;
        min-width: 24rem;
        border-radius: 0.2rem;
        background: #ff4754;
        color: #040404;
        transition: opacity 0.2s;
      }
      .genpass:focus,.genpass{
        border: none;
        outline: none;
      }
      .genpass:hover {
        cursor: pointer;
        opacity: 0.6;
      }
      @media (max-width: 700px) {
    .genpass{
      padding-top: 5%;
    }
  }
  </style>
</head>

<body>
<label> 
<input type="text" placeholder=" " disabled>
<p>Password</p>
</label>
<button class="genpass" id="passgen" title="Click to Generate Password">Generate Password</button>
<script>
  const input = document.querySelector("input");
  const button = document.querySelector("#passgen");
  function GeneratePassword(length = 8) {
  const cwb =
      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$!%^&*()_+=-";
  
    let password = "";
    for (let i = 0; i < length; ++i) {
      let at = Math.floor(Math.random() * (cwb.length + 1));
      password += cwb.charAt(at);
    }
    return password;
  }
  button.addEventListener("click", () => {
    input.value = GeneratePassword(8);
  });
</script>
</body>
</html>

Step by step guide of creating a random password generator (If you want to make a password strength checker click Here ) :

Step 1

=> Add the Broiler plate of HTML

              

<!DOCTYPE html>

<html>

<head>

<title>Random password generator - Code With Bishal</title>

</head>

<!-- created by Code With Bishal - www.codewithbishal.com
-->

<body>

</body>

</html>

Step 2)

=> Add CSS (External or Internal)

If you are using External CSS then create a file

                
                    style.css

And add code :

                
<link rel="stylesheet" href="style.css">

If you want to use Internal CSS than add

                <style>   </style>

tag Between

                <head>   </head>

then add the CSS code between style tag or inside

style.css


@import url("https://fonts.googleapis.com/css2?family=Potta+One&display=swap");

then add below code to make your code responsive

                
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Potta One", sans-serif;
}

Then style the input

 
label {
  position: relative;
}
label input {
  font-family: "Potta One", sans-serif;
  font-size: 1rem;
  color: black;
  background: transparent;

  padding: 1rem 1.2rem;
  min-width: 24rem;

  border-radius: 0.2rem;
  border: 2px solid #7a7a7a56;

  transition: border-color 0.2s;
}
label p {
  color: #f9f9f9;
  font-size: 1rem;
  user-select: none;

  position: absolute;
  top: 30%;
  transform: translateY(-90%);

  margin-left: 0.8rem;
  padding: 0 0.4rem;

  background: white;
  color: black;

  transition: top 0.2s, font-size 0.2s, color 0.2s;
}
label input:not(:placeholder-shown) {
  border-color: #f80743;
}
label input:not(:placeholder-shown) + p {
  top: 0;
  font-size: 0.9rem;
  color: #ff4754;
}

Then add style to the button


.genpass {
  font-family: Potta One;
  font-size: 1rem;
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  min-width: 24rem;
  border-radius: 0.2rem;
  background: #ff4754;
  color: #040404;
  transition: opacity 0.2s;
}
.genpass:focus,.genpass{
  border: none;
  outline: none;
}
.genpass:hover {
  cursor: pointer;
  opacity: 0.6;
}
@media (max-width: 700px) {
.genpass{
  padding-top: 5%;
}
}

Step 3)

Add JavaScript (Internal or external)

If you are using an Internal script then add the JavaScript code (copy from below) in between :

                
                    <script>   </script>

and If you are using external JavaScript then create a file


                    app.js

and add :


        <script src="app.js"></script>

In your HTML file

OR copy the code from below

Step 1) Add your HTML Code -

HTML Code


<!DOCTYPE html>

<html>

<head>

<title>Generate Password - Code With Bishal</title>

</head>

<!-- created by Code With Bishal - www.codewithbishal.com
-->

<body>

<label> 

<input type="text" placeholder=" " disabled>

<p>Password</p>

</label>
<button class="genpass" id="passgen" title="Click to Generate Password">Generate Password</button>

</body>

</html>

Copy Contents

Step 2) Add your CSS Code -

CSS Code

              
<style>

@import url("https://fonts.googleapis.com/css2?family=Potta+One&display=swap");
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: "Potta One", sans-serif;
    }
    label {
      position: relative;
    }
    label input {
      font-family: "Potta One", sans-serif;
      font-size: 1rem;
      color: black;
      background: transparent;
    
      padding: 1rem 1.2rem;
      min-width: 24rem;
    
      border-radius: 0.2rem;
      border: 2px solid #7a7a7a56;
    
      transition: border-color 0.2s;
    }
    label p {
      color: #f9f9f9;
      font-size: 1rem;
      user-select: none;
    
      position: absolute;
      top: 30%;
      transform: translateY(-90%);
    
      margin-left: 0.8rem;
      padding: 0 0.4rem;
    
      background: white;
      color: black;
    
      transition: top 0.2s, font-size 0.2s, color 0.2s;
    }
    label input:not(:placeholder-shown) {
      border-color: #f80743;
    }
    label input:not(:placeholder-shown) + p {
      top: 0;
      font-size: 0.9rem;
      color: #ff4754;
    }
    .genpass {
      font-family: Potta One;
      font-size: 1rem;
      margin-top: 1.2rem;
      padding: 1rem 1.2rem;
      min-width: 24rem;
      border-radius: 0.2rem;
      background: #ff4754;
      color: #040404;
      transition: opacity 0.2s;
    }
    .genpass:focus,.genpass{
      border: none;
      outline: none;
    }
    .genpass:hover {
      cursor: pointer;
      opacity: 0.6;
    }
    @media (max-width: 700px) {
  .genpass{
    padding-top: 5%;
  }
}
</style>

Copy Contents

Step 3) Add your JavaScript Code -

JavaScript Code

                
<script>

const input = document.querySelector("input");
const button = document.querySelector("#passgen");
function GeneratePassword(length = 8) {
const cwb =
    "[email protected]#$!%^&*()_+=-";

  let password = "";
  for (let i = 0; i < length; ++i) {
    let at = Math.floor(Math.random() * (cwb.length + 1));
    password += cwb.charAt(at);
  }
  return password;
}
button.addEventListener("click", () => {
  input.value = GeneratePassword(8);
});
</script>

Copy Contents

Download Source Code

Nibedan

Op website...

How to generate random passwords using JavaScript

Preview :

Random password generator using JavaScript:

You might like this :

Step by step guide of creating a random password generator (If you want to make a password strength checker click Here ) :

Step 1

=> Add the Broiler plate of HTML
`<!DOCTYPE html> <html> <head> <title>Random password generator - Code With Bishal</title> </head>  <body> </body> </html>`

Step 2)

=> Add CSS (External or Internal)

If you are using External CSS then create a file

And add code :

If you want to use Internal CSS than add

tag Between

then add the CSS code between style tag or inside
`style.css`

then add below code to make your code responsive

Then style the input

Then add style to the button

Step 3)

Add JavaScript (Internal or external)

If you are using an Internal script then add the JavaScript code (copy from below) in between :

and If you are using external JavaScript then create a file

and add :

In your HTML file

OR copy the code from below

Step 1) Add your HTML Code -

Step 2) Add your CSS Code -

Step 3) Add your JavaScript Code -