Preview :
Copy
Posted on January 26, 2021, at 8:00 PM [IST], created by Admin, Website: codewithbishal.com
Random password generator using JavaScript:
What is a random password generator?
=> Our awesome, random password generator gives visitors an attractive random password generator that generates passwords with a click of a button.
How can I use this random password generator using JavaScript?
=> You can easily copy the code or can download the code from our website and can simply paste it anywhere to get the random password generator.
Do I need to know how to code?
=> No, you don't need to know how to code you can simply copy code from here and paste it wherever you want your random password generator. Also, you can try it on our website using the "TRY IT NOW" option or can download the code using the "Download" button below.
Is it safe to use the random password generator in HTML?
=> Yes, it's completely safe to use the random password generator and you can check the strength of these passwords by clicking here.
Note: We do not take responsibility for the password generated here.
What are the advantages of the random password generator?
=> Random password generator is a very good way for generating random passwords on click.
How can I download the source code of the random password generator?
=> Scroll the page to the bottom there you will find our download button to download the code.
Overview of the Blog :
=> In this blog, you can learn, how to make a random password generator using HTML, CSS, and JavaScript By Code With Bishal. Just Copy The Code From Here And Paste It Into Your Website or portfolio. To Preview scroll the page to the beginning. If you are having any problem viewing the code just refresh the page. The random password generator is a lightweight and easy-to-use HTML, CSS, and JavaScript code that creates a random password generator for you. In this blog, there are fifth sections on the webpage, in the first section, you can get a preview of the blog, in the second section there are few FAQs and an overview of the blog, in the third section there are few more coding blogs you might like, in the fourth section you can Try our random password generator using the "TRY IT NOW" button, after that, you can copy the code and paste it [that's the fifth section] and from the last section You can download the source code.
<!DOCTYPE html>
<html>
<head>
<title>Random password generator - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
style.css
<link rel="stylesheet" href="style.css">
<style> </style>
<head> </head>
style.css
@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%;
}
}
<script> </script>
app.js
<script src="app.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Generate Password - 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>
<style>
@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%;
}
}
</style>
<script>
const input = document.querySelector("input");
const button = document.querySelector("#passgen");
function GeneratePassword(length = 8) {
const cwb =
"[email protected]#$!%^&*()_+=-";
let password = "";
for (let i = 0; i < length; ++i) {
let at = Math.floor(Math.random() * (cwb.length + 1));
password += cwb.charAt(at);
}
return password;
}
button.addEventListener("click", () => {
input.value = GeneratePassword(8);
});
</script>