DEV Community

Cover image for Random Password Generator app in Javascript (Free source code)
Code with Ayan
Code with Ayan

Posted on

Random Password Generator app in Javascript (Free source code)

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.

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)

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">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />

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

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

    <script src="script.js"></script>
Enter fullscreen mode Exit fullscreen mode

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;
  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;
  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;
   margin-left: 85px
#button:hover {
    color: white;
    background-color: #db7900
Enter fullscreen mode Exit fullscreen mode

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.setSelectionRange(0, 999);
      alert("copied to clipboard")
Enter fullscreen mode Exit fullscreen mode

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

Top comments (3)

lukeshiru profile image
Luke Shiru

A few things:

  1. Don't use Math.random for password generation, is safer to use the Crypto API.
  2. Don't use document.execCommand, it's deprecated. Use the Clipboard API.
  3. Avoid alert and similar method that block JavaScript execution until it's closed.
  4. Disabling user selection with user-select: none is a really bad practice from the UX perspective.
  5. Avoid styling input or other elements by tag name unless you're on a modular environment such as the shadow DOM or you have CSS Module set up.
  6. Avoid adding event handlers directly in HTML, and instead use addEventListener from JavaScript.
  7. Instead of listening to the click event on buttons, you should be listening to the submit event in a wrapping form which produces a better UX.
  8. Use actual button elements instead of a or div which has a really bad UX and a11y.

Lastly, might I ask what tutorial or guide did you follow to do this? Yours is I think the 4th post I've seen so far in DEV with pretty much the exact same code and end result, and I would like to check your source to create a post warning other junior devs about this outdated tutorials.


thomasbnt profile image
Thomas Bnt

Hello ! Don't hesitate to put colors on your codeblock like this example for

console.log('Hello world!');
Enter fullscreen mode Exit fullscreen mode

Example of how to add colors and syntax in codeblocks