Password Generator with Strength Checker in JavaScript

Share this Article
Reading Time: 5 minutes
444 Views

Inside this article we will see the concept i.e Password Generator with Strength Checker in JavaScript Example Tutorial. Article contains the classified information about Building a Simple Password Strength Checker in Javascript.

Having a secured and strong password is always important to web applications to avoid the chances of Brute force attack or any other security breach.

Learn More –

Let’s get started.

Application Programming

Create a folder say password-generator in your localhost directory. Create two files into it:

  • index.html
  • validate.js

Design Sign Up Form

Open index.html and write this code into it. It will create the frontend form where user can generate password.

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Password Generator with Strength Checker in JavaScript</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script src="validate.js"></script>
	<style>
		#strengthWrapper {
			width: 200px;
			height: 35px;
			border-radius: 3px;
		}
	</style>
</head>

<body>
	<div class="container">
		<h4>Password Generator with Strength Checker in JavaScript</h4>
		<br><br>
		<div class="row">
			<div class="col-md-6">
				<div class="col-md-12">
					<form name="form" class="form" action="#" method="post">
						<div class="row">
							<div class="form-group col-md-6" style="padding: 0px 2px 0px 15px">
								<input type="text" name="password" id="password" class="form-control" placeholder="Password..">
							</div>
							<div class="form-group col-md-4" style="padding: 1px 2px 3px 1px">
								<input type="button" id="generatePassword" class="btn btn-primary btn-md" value="Generate Password">
							</div>
						</div>
						<div class="row hidden" id="strengthSection">
							<div class="form-group col-md-6">
								<div id="strengthWrapper">
									<div class="form-control" id="strength"></div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

Strong Password Generator Settings

Open validate.js file and write this complete code into it.

$(document).ready(function() {

    $("#password").keyup(function() {
        validatePassword();
    });

    $("#generatePassword").click(function() {

        var password = Array(20).fill('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~!@-#$')
            .map(x => x[Math.floor(crypto.getRandomValues(new Uint32Array(1))[0] / (0xffffffff + 1) * x.length)]).join('');

        $("#password").val(password);
        validatePassword();

    });
});

function validatePassword() {
    var pass = $("#password").val();
    if (pass != "") {
        $("#strengthSection").removeClass('hidden');
        if (pass.length <= 8) {
            $("#strength").css("background-color", "#FF0000").text("Very Weak").animate({ width: '200px' }, 300);
        }
        if (pass.length > 8 && (pass.match(/[a-z]/) || pass.match(/\d+/) || pass.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/))) {
            $("#strength").css("background-color", "#F5BCA9").text("Weak").animate({ width: '200px' }, 300);
        }
        if (pass.length > 8 && ((pass.match(/[a-z]/) && pass.match(/\d+/)) || (pass.match(/\d+/) && pass.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)) || (pass.match(/[a-z]/) && pass.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)))) {
            $("#strength").css("background-color", "#FF8000").text("Good").animate({ width: '200px' }, 300);
        }
        if (pass.length > 8 && pass.match(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,24}$/)) {
            $("#strength").css("background-color", "#00FF40").text("Strong").animate({ width: '200px' }, 300);
        }
    } else {
        $("#strength").animate({ width: '200px' }, 300);
        $("#strengthSection").addClass('hidden');
    }
}
                                                                                                                  

Application Testing

Open browser and type your application URL:

URL: http://localhost/password-generator/index.html

Whenever you type any password value into input, it will check it’s strength.

Next, if you want to generate a strong password instead of typing. Click on Generate Password button.

We hope this article helped you to learn Password Generator with Strength Checker in JavaScript Tutorial in a very detailed way.

Buy Me a Coffee

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.

Was this post helpful?

Get PHP Web Development Courses on Offer in just ₹299
Get PHP Web Development Courses on Offer in just ₹299