creocodigo
Password Generator using JavaScript

Password Generator using JavaScript

Shikhar Baniya's photo
Shikhar Baniya
·

3 min read

Hello Coders! Welcome to JS Project Blog. In this, we're going to see how to create a Random Password Generator using jQuery and JavaScript. You might have used the Chrome "Use Suggested Password" feature, which suggests you random password of characters. This project does exactly like that. It asks for the length of your password and generate one for you.

Here's a preview-

Random Password Generator.gif

That being said, let us get started.

Step - 1: Like always, create 3 files - index.html, style.css and script.js

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Random Password Generator</title>
</head>

<body>

    <body>
        <div id="namer">
            <div id="namer-input">
                <input type="text" id="length" name="namername" placeholder="Type the length">
            </div>
            <div class="namer-controls">
                <div><span>Generate</span></div>
                <div><span>Reset</span></div>
            </div>
        </div>

        <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <script src="script.js"></script>
    </body>

</html>

Step - 3: Below is the CSS code for styling.

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Andada|Permanent+Marker|Raleway:300');
* {
 box-sizing: border-box;
}
body {
 background: #f6f7fc;
 position: relative;
 font-family: 'Roboto', sans-serif;
 color: #fff;
}
#namer {
 position: relative;
 max-width: 400px;
 margin: 150px auto 0;
}
#namer input {
 border: 0;
 border-bottom: 2px solid #DD4A48;
 width: 100%;
 font-size: 30px;
 line-height: 35px;
 height: 70px;
 text-align: center;
 padding: 10px;
 background: transparent;
 color: #4A403A;
}
#namer input.shake {
 animation-name: shaker;
 animation-duration: 200ms;
 animation-timing-function: ease-in-out;
 animation-delay: 0s;
}
#namer input:focus {
 outline: 0;
 color: #4A403A;
}
#namer input::placeholder {
 color: #f09391;
}

.namer-controls {
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 30px;
 margin: 20px 0;
 text-align: center;
 opacity: 0.3;
 cursor: not-allowed;
}

.namer-controls.active {
 opacity: 1;
 cursor: pointer;
}

.namer-controls div {
 float: left;
 width: 33.33%;
}

.namer-controls div span {
    background: #DD4A48;
    border-radius: 999px;
    box-shadow: #DD4A48 0 10px 20px -10px;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 18px;
  font-weight: 700;
  opacity: 1;
  letter-spacing: 1px;
  padding: 8px 18px;
}

.namer-controls div span:last-child {
 margin-right: 0;
}

.namer-controls div span.active {
 box-shadow: none;
 background-color: #DD4A48;
 color: #fff;
}

#namer-input.serious input {
 letter-spacing: 2px;
 text-transform: uppercase;
 font-family: 'Andada', serif;
 font-weight: 500;
}

#namer-input.modern input {
 font-family: 'Raleway', sans-serif;
 text-transform: lowercase;
 font-weight: 300;
 letter-spacing: 10px;
}

#namer-input.cheeky input {
 font-family: 'Permanent Marker', cursive;
 font-size: 40px;
}

Step - 3: Below is the jQuery code for adding and removing the class.

JS

$("#namer input").on("change keyup paste", function() {
    var inputValue = $(this).val();

    if (inputValue) {
        $(".namer-controls").addClass("active");
        $("#namer").addClass("active");
    } else {
        $(".namer-controls").removeClass("active");
        $("#namer").removeClass("active");
    }
});

$(document).on("click", ".namer-controls.active span", function() {
        var text = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        var len = document.getElementById("length").value;
        for( var i=0; i < len; i++ ){
            text += possible.charAt(Math.floor(Math.random() * possible.length));
        }
        $("#namer input").val(text);
});

$(document).ready(function() {
    $("#namer-input input").focus();
});

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love

HTML5CSSJavaScriptjQueryWeb Development