Posted on April 13, 2021, 8 p.m. by Bishal ( 2638)
index.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>Random Password generator using JavaScript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
script.js
<head> </head>
of your HTML document:<script src="script.js"></script>
script.js
file:const input = document.querySelector("input");
const button = document.querySelector("#passgen");
function GeneratePassword(length = 8) {
const randomPassword =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$!%^&*()_+=-";
let password = "";
for (let i = 0; i < length; ++i) {
let at = Math.floor(Math.random() * (randomPassword.length + 1));
password += randomPassword.charAt(at);
}
return password;
}
button.addEventListener("click", () => {
input.value = GeneratePassword(8);
});
style.css
<head> </head>
of your HTML document:<link href="style.css" rel="stylesheet">
style.css
file:@import url("https://fonts.googleapis.com/css2?family=Potta+One&display=swap");
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Potta One", sans-serif;
}
label {
position: relative;
}
label input {
font-family: "Potta One", sans-serif;
font-size: 1rem;
color: black;
background: transparent;
padding: 1rem 1.2rem;
min-width: 24rem;
border-radius: 0.2rem;
border: 2px solid #7a7a7a56;
transition: border-color 0.2s;
}
<!DOCTYPE html>
<html>
<head>
<title>Random Password generator using JavaScript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<label>
<input type="text" placeholder=" " disabled>
<p>Password</p>
</label>
<button class="genpass" id="passgen" title="Click to Generate Password">Generate Password</button>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Potta+One&display=swap");
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Potta One", sans-serif;
}
label {
position: relative;
}
label input {
font-family: "Potta One", sans-serif;
font-size: 1rem;
color: black;
background: transparent;
padding: 1rem 1.2rem;
min-width: 24rem;
border-radius: 0.2rem;
border: 2px solid #7a7a7a56;
transition: border-color 0.2s;
}
label p {
color: #f9f9f9;
font-size: 1rem;
user-select: none;
position: absolute;
top: 30%;
transform: translateY(-90%);
margin-left: 0.8rem;
padding: 0 0.4rem;
background: white;
color: black;
transition: top 0.2s, font-size 0.2s, color 0.2s;
}
label input:not(:placeholder-shown) {
border-color: #f80743;
}
label input:not(:placeholder-shown) + p {
top: 0;
font-size: 0.9rem;
color: #ff4754;
}
.genpass {
font-family: Potta One;
font-size: 1rem;
margin-top: 1.2rem;
padding: 1rem 1.2rem;
min-width: 24rem;
border-radius: 0.2rem;
background: #ff4754;
color: #040404;
transition: opacity 0.2s;
}
.genpass:focus,.genpass{
border: none;
outline: none;
}
.genpass:hover {
cursor: pointer;
opacity: 0.6;
}
@media (max-width: 700px) {
.genpass{
padding-top: 5%;
}
}
const input = document.querySelector("input");
const button = document.querySelector("#passgen");
function GeneratePassword(length = 8) {
const randomPassword =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$!%^&*()_+=-";
let password = "";
for (let i = 0; i < length; ++i) {
let at = Math.floor(Math.random() * (randomPassword.length + 1));
password += randomPassword.charAt(at);
}
return password;
}
button.addEventListener("click", () => {
input.value = GeneratePassword(8);
});