Hello, guys today we will learn how to make a Strong Password Generator using HTML CSS, and JavaScript, So let’s get started.
Password generator
Passwords are a genuine security danger. Over 80% of hacking-related breaks are because of powerless or taken passwords, a recent report shows. So in the event that you need to shield your own data and resources, making secure passwords is a major initial step. Difficult to-break passwords are unpredictable with different sorts of characters (numbers, letters, and images). Making your passwords distinctive for every site or application additionally shields against hacking.
What is a password generator?
A secret key generator is an instrument that consequently produces a secret phrase dependent on rules that you set to make solid and eccentric passwords for every one of your records.
The best tips for password safety
- Ensure your passwords are at least 12 characters in length and contain letters, numbers, and uncommon characters.
- Always use a unique password for each account you create. The threat with reusing passwords is that when one webpage has a security issue, it’s simple for programmers to attempt the equivalent username and secret word mix on different sites.
- Evade powerless, normally utilized passwords like abc123, password1, or Temp!. Some examples of a strong password include: 0rXsHX0*nbv, %t&aEcw3zc etc.
- Change your passwords when you have reason to, for example, after you’ve shared them with somebody, after a website has had a break, or if it’s been longer than a year since you last turned it
First, we need to create three files index.html, Style.css and a file for JavaScript code (Custom.js) then we need to do code for Strong Password Generator —>
Password Generator Step:1
Add below code inside index.html
<!DOCTYPE html>
<html>
<head>
<title>Strong Password Generator</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="custom.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="strong_pass_row">
<h1>Strong Password Generator</h1>
<div class="strong_pass_generator">
<div class="strong_pass_generator_input">
<input type="text" name="password" id="strong_pass" placeholder="Create Password" readonly="">
<i onclick="copyToClipboard();" class="fa fa-copy"></i>
</div>
<div class="strong_pass_generator_btn">
<button onclick="getpass();" id="generatorbutton">Generate Password</button>
</div>
</div>
</div>
</body>
</html>
Password Generator Step:2
Then we need to add code for style.css which code i provide in below text.
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.strong_pass_row > h1 {
color: #000;
margin: 20px 0;
font-size: 25px;
line-height: 35px;
}
#strong_pass {
width: 100%;
height: 45px;
padding: 0 50px 0 20px;
background-color: #f5f5f5;
border: 1px solid #0f62fe;
transition: .5s;
font-size: 20px;
}
.strong_pass_generator_input {
position: relative;
}
.strong_pass_generator_input > i {
position: absolute;
top: 12px;
right: 15px;
font-size: 20px;
cursor: pointer;
}
#generatorbutton {
background-color: #0f62fe;
border: 1px solid transparent;
color: #fff;
cursor: pointer;
padding: calc(.875rem - 3px) 60px calc(.875rem - 3px) 20px;
display: block;
transition: background-color 0.5s;
font-size: 18px;
width: 100%;
text-align: left;
}
#generatorbutton:hover {
background-color: #0353e9;
}
#generatorbutton:focus {
border-color: #0f62fe;
box-shadow: 0 0 0 1px #0f62fe, inset 0 0 0 2px #fff;
}
.strong_pass_generator_input i.fa.fa-check {
color: green;
pointer-events: none;
}
#strong_pass.focus_success:focus {
outline-color: green;
}
Step:3
Finally we need to add code for our javaScript file (custom.js) which code i provide in below text.
function getpass() {
var chars = "0123456789~!@#$%^&*()_+}{[]|abcdefghikjlmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var pass = "";
var passLength = 16;
for (var i = 0; i < passLength; i++) {
var randPass = Math.floor(Math.random() * chars.length);
pass += chars.substring(randPass, randPass+1);
}
document.getElementById('strong_pass').value = pass;
}
function copyToClipboard() {
var copyText = document.getElementById('strong_pass');
var copyPass = document.getElementById('strong_pass').value;
var fa_iocn = document.getElementsByClassName('fa');
if (copyPass == "") {
alert("Please Generate Password");
}else {
$(fa_iocn).removeClass("fa-copy");
$(fa_iocn).addClass("fa-check");
$("#strong_pass").addClass("focus_success");
alert("Password Copied Successfully")
}
copyText.select();
copyText.setSelectionRange(0, 99999);
document.execCommand("copy");
}
$(".strong_pass_generator #generatorbutton").click(function(){
$(".strong_pass_generator i").removeClass("fa-check");
$(".strong_pass_generator i").addClass("fa-copy");
});