Random Password Generator app in Javascript (Free source code)

#javascript #webdev #css

Hey beautiful people, Today in this post we’ll learn How to Create a Random Password Generator app in Javascript with amazing design. To create it we are going to use simple CSS, HTML & Javascript and I haven't used any JQuery plugins or JavaScript libraries to create the Random Password Generator app in Javascript. I hope you enjoy this post.

Random Password Generator app is nowadays much used by many popular and different websites. You could have already seen them when creating an account on a platform. The password created using this app is going to be a very strong password, since it includes keyword combinations like numbers, symbols, uppercase, and lowercase alphabets. The password is going to be random and unique so it will not be an easy to guess. This prevents attacks from hackers and crackers.

I have used JavaScript's Math.floor and Math.random method to create the app. When generate button will be clicked. The different types of loops will create different passwords each time.

We will use HTML to create the structure of the app, CSS to design and style it and JavaScript to add functionality and other features of the app.

Demo
Below is how our JavaScript Password Generator looks like and how it works.

Now, as we have seen the demo so let's head to create this with HTML CSS & Javascript.

Random Password Generator in Javascript (Free source code)

HTML
First, add HTML. HTML is a markup language which describes the structure of the pages. Your file's name could be anything but makes sure it includes .html extension. For example PasswordGenerator.html .

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="box">
      <h2>Random Password Generater</h2>
      <input type="text" name="" placeholder="Password" id="password" readonly>

      <table>
        <th><div id="button" class="btn1"onclick="genPassword()">Generate</div></th>
        <th><a  id="button" class="btn2" onclick="copyPassword()">Copy</a></th>
      </table>
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS Code
Then, add CSS to our Feedback Form. CSS defines the design, layout and differences in display for different devices and screen sizes. External CSS is used to link with HTML so make sure it .css extension. For example PasswordGenerator.css. You could also use Internal CSS.

* {
    margin: 0;
    padding: 0;
    user-select: none; /*important*/
    box-sizing: border-box;
}
body {
    background-color: #FF8C00 ;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.box{
  background-color: white;
  padding-top: 30px;
  padding: 30px;
  margin-bottom: 12em;
}
.box h2{
  margin-bottom: 40px;
  text-align: center;
  font-size: 26px;
  color: rgb(219, 99, 0);
  font-family: sans-serif;
}
input {
  padding: 20px;
    user-select: none;
    height: 50px;
    width: 400px;
    border-radius: 6px;
    border: none;
    border: 2px solid #ff9411;
    outline: none;
    font-size: 22px;
}
input::placeholder{
  font-size: 23px;
} 
#button {
    font-family: sans-serif;
    font-size: 15px;

    margin-top: 40px;
    border: 2px solid #ff9411 ;
    width: 155px;
    height: 50px;
    text-align: center;
    background-color: #eb8a13;
    display: flex;
    color: rgb(255, 255, 255);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 7px;
}
.btn2{
   margin-left: 85px
 }
#button:hover {
    color: white;
    background-color: #db7900
}

JavaScript Code
JavaScript is a programming language which helps in adding functionality to your Website. Javascript would be doing the main work, it will generate the code when generate button is clicked. In varchars, I have added different numbers, numbers, symbols, etc. These symbols and numbers associated with each other will create random passwords. Math.random() will help here. The password will show in the input box. Copy button is directly connected to the input. It will copy written text in input box.

We have used External JavaScript to link, so makes sure it includes .js extension like PasswordGenerator.js . You could also paste the source code in the Script tag.

function genPassword() {
        var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var passwordLength = 12;
        var password = "";
        for (var i = 0; i <= passwordLength; i++) {
            var randomNumber = Math.floor(Math.random() * chars.length);
            password += chars.substring(randomNumber, randomNumber +1);
        }
        document.getElementById("password").value = password;
    }
    function copyPassword() {
      var copyText = document.getElementById("password");
      copyText.select();
      copyText.setSelectionRange(0, 999);
      document.execCommand("copy");
      alert("copied to clipboard")
    }

Congratulations! You have now successfully created our Random Password Generator app in Javascript

I hope that you have enjoyed this tutorial! Please feel free to leave your comments & suggestions on how we can improve. So, next time we could bring more improved content for you.

My Instagram page: codewithayan, you could contact me here