Dear friends and family: I hope you're doing well. Using Bootstrap and Javascript, I'll show you how to construct your own password generator with a copy button. To create safe passwords for DBMS(Database Management System) and other highly sensitive web applications, a password generator may be essential I included a copy button so you may copy the password and store it somewhere. If you use Google Chrome or other compatible browsers, they will prompt you to save the created passwords.
##Prerequisites. You should be familiar with Javascript. Knowledge of HTML and CSS.
You'll learn How to.
Create a Password Generator Copy button.
##Setup & Structure of Files. To begin, make a folder called Generator and arrange it as follows:
###File Structure
Generator:
├── assets
│ ├── css
│ │ ├── style.css
│ └──js
│ ├── passgen.js
│
|
└── index.html
1. Setting The Javascript Magic :smile:
Open the already created passgen.js file and paste the following code into it
function genPass() {
// define result variable
var password = "";
// define allowed characters
var characters = "0123456789@#$%!-&*ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
// define length of password character
var long = "30";
for (var i = 0; i < long; i++) {
// generate password
gen = characters.charAt(Math.floor(Math.random() * characters.length));
password += gen;
}
// send the output to the input
document.getElementById('pass').value = password;
}
// Copy password button
function copy() {
// get password from input text field
var copyText = document.getElementById("pass");
// Set selection range to copy longer text on mobile devices
copyText.setSelectionRange(0, 9999);
//Copy the text from the text field
navigator.clipboard.writeText(copyText.value);
// Get the toast container
var x = document.getElementById("toast")
// Add the "show" class to the container
x.className = "show";
//Show toast for 3sec
setTimeout(function() { x.className = x.className.replace("show", ""); }, 3000);
}
- The first thing we need to do is construct a function. You may call it whatever you want, but I went with genpass ().
function genPass() { } - In order to save the loop's output, we establish a variable named password.
function genPass() { // define result variable var password = ""; } - Next, we define the characters that can be used in the password string.You can even add new characters to the existing password string if you like.Before the alphabets, numbers and special characters were introduced to create a variable that was dominated by these characters.
function genPass() { // define result variable var password = ""; // define allowed characters var characters = "0123456789@#$%!-&*ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; } - Then we define the length of our password.The string long was chosen for a reason that will be explained later.
function genPass() { // define result variable var password = ""; // define allowed characters var characters = "0123456789@#$%!-&*ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; // define length of password character var long = "30"; } The password is then generated using a for loop.
for (var i = 0; i < long; i++) { // generate password gen = characters.charAt(Math.floor(Math.random() * characters.length)); password += gen; }A counter is created and set to zero before any loop execution begins. To construct counters, this phrase
iis often used. The scope of variables generated here is the loop. They are deleted once the loop has ended.for (var i = 0;)Every iteration is preceded by a check for the condition.The condition is set to check if the counter is less than the specified length.This expression evaluates to true if it is omitted. The loop's statement is executed if it evaluates to true. The loop ends if it evaluates to false.
for (i < long;)After each iteration, the final expression
for (i++)is executed. If the condition is true, it increases the length of the long variable by the amount specified by the condition.for (var i = 0; i < long; i++) { // generate password gen = characters.charAt(Math.floor(Math.random() * characters.length)); password += gen; }Using the math.random() function, you would generate random passwords. Numbers are rounded to the closest integer using Math.floor. The
characters.lengthcounts how many characters are in the character variable and creates a random string from that amount.
Let's finish off by putting the produced string in the input box. Using the tag's id, we transmit the value.
document.getElementById('pass').value = password;
Creating the copy function
The first thing we need to do is construct a function. You may call it whatever you want, but I went with copy().
In order to get the text to copy , we selected the element by its id.
- Next we called the selection range variable to copy a very long variable up to 9999.
- Then we called the function to copy the text to clipboard. *Last but not least, we created a function to display a toast to indicate that the password was successfully copied. ```js
function copy() { } // Copy password button function copy() { // get password from input text field var copyText = document.getElementById("pass"); // Set selection range to copy longer text on mobile devices copyText.setSelectionRange(0, 9999); //Copy the text from the text field navigator.clipboard.writeText(copyText.value); // Get the toast container var x = document.getElementById("toast") // Add the "show" class to the container x.className = "show"; //Show toast for 3sec setTimeout(function() { x.className = x.className.replace("show", ""); }, 3000); }
### 2. Setting HTML
Open the already created `index.html` file and paste the following code into it
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Password Generator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<section class="login-clean">
<form method="post">
<h1><strong>Password Generator</strong></h1>
<div class="mt-5 mb-5"></div>
<div class="mb-3">
<input class="form-control" type="text" id="pass" placeholder="Click the Generate Password Button">
</div>
<div class="mb-3 ">
<button class="btn btn-primary re w-100 " type="button" onclick="copy()">
<i class="fa fa-copy "></i> Copy</button>
<button class="btn btn-primary d-block w-100 " type="button" style="background: var(--bs-indigo); " onclick="genPass();">Generate Password</button>
</div>
</form>
<div id="toast">Password Copied !</div>
</section>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="assets/js/passgen.js "></script>
</body>
</html>
Setting Css
Open the already created style.css file and paste the following code into it
.login-clean {
background: #f1f7fc;
padding: 80px 0;
}
.login-clean form {
max-width: 520px;
width: 90%;
margin: 0 auto;
background-color: #ffffff;
padding: 40px;
border-radius: 4px;
color: #505e6c;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}
.login-clean form .form-control {
background: #f7f9fc;
border: none;
border-bottom: 1px solid #dfe7f1;
border-radius: 0;
box-shadow: none;
outline: none;
color: inherit;
text-indent: 1px;
height: 42px;
}
.login-clean form .btn-primary {
background: #f4476b;
border: none;
border-radius: 4px;
padding: 11px;
box-shadow: none;
margin-top: 26px;
text-shadow: none;
outline: none !important;
}
.login-clean form .btn-primary:hover,
.login-clean form .btn-primary:active {
background: #eb3b60;
}
.login-clean form .btn-primary:active {
transform: translateY(1px);
}
#toast {
visibility: hidden;
background: #333333;
border-radius: 2px;
position: fixed;
color: #fff;
text-align: center;
left: 50%;
min-width: 250px;
margin-left: -140px;
bottom: 50px;
padding: 16px;
padding-left: 32px;
}
#toast.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 50px;
opacity: 1;
}
}
@keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 50px;
opacity: 1;
}
}
@-webkit-keyframes fadeout {
from {
bottom: 50px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}
@keyframes fadeout {
from {
bottom: 50px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}
This is what you get when you run the codes above.
And when you click the copy button you get.
You can find the code hereand you can leave a star.You are allowed to copy the source code and use it in your own projects. Please like and comment below. Don't forget to follow us and share the post; doing so will motivate us to develop more lessons in the future.