Hey Devs, Today we’ll learn How to Create a Random Password Generator with Javascript. I hope you enjoy this post.
Javascript Random Password Generator 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. Here, 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.
Demo
Random Password Generator with Javascript | source code
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
Lets add some styling using 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 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.
JavaScript Code
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
Take a look at my other amazing CSS and Javascript tutorials:
- Responsive footer design in HTML and CSS
- Dark Mode Toggle Button using JavaScript
- Change background colour using Javascript
My Website: codewithayan, see this to checkout all of my amazing Tutorials.
Top comments (0)