|
| JavaScript Password Generator by Code Armor |
Hey guys! Today we will learn how to Build a JavaScript password generator. This app contains only pure HTML, CSS, and JavaScript. So it is essential to have basic knowledge of JavaScript. If you are a beginner, it is a good project for you.
This is customizable and can create any type of password. Now let's take a look at its features:-
- We can set password length between (4 - 32) characters from its custom range bar.
- We can generate passwords in uppercase, lowercase, numbers, and symbols if we wish.
- We are also able to copy the generated password with one click. It also shows a popup when the password is copied.
Now, it's time to set up our project.
How to make a JavaScript password generator?
- First, we are going to create our folder structure for the app.
- Then we will make the structure of our app using HTML.
- Style our app using CSS.
- Then add logic using JavaScript.
Creating folder structure for the app
This app has a simple structure. There are only three files in this
application which are index.html, style.css,
and index.js. Create these files in your main app folder.
Now, let's make an HTML structure for our app.
Making the Html structure of our app
Go to the index.html file in your app. Clear all
previous code and paste the given code into it.
<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="style.css" /> <title>password generator</title> </head> <body> <!-- HTML CODE --> <div class="container"> <div class="password-generator"> <div id="tooltip">Copied!</div> <div class="header"> <input type="text" id="inputBox" placeholder="Generate Password" readonly /> <span title="Copy Text !" id="copyBtn"><svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24" width="24"> <path d="M5 22q-.825 0-1.413-.587Q3 20.825 3 20h2Zm-2-3.5v-2h2v2ZM3 15v-2h2v2Zm0-3.5v-2h2v2ZM3 8q0-.825.587-1.412Q4.175 6 5 6v2Zm3.5 14v-2h2v2ZM9 18q-.825 0-1.412-.587Q7 16.825 7 16V4q0-.825.588-1.413Q8.175 2 9 2h9q.825 0 1.413.587Q20 3.175 20 4v12q0 .825-.587 1.413Q18.825 18 18 18Zm0-2h9V4H9v12Zm1 6v-2h2v2Zm3.5 0v-2h2q0 .825-.587 1.413Q14.325 22 13.5 22Z" /> </svg></span> </div> <form> <div class="checkboxDiv"> <input type="checkbox" id="uppercase" checked /> <label for="uppercase">Include uppercase</label> </div> <div class="checkboxDiv"> <input type="checkbox" id="lowercase" checked /> <label for="lowercase">Include lowercase</label> </div> <div class="checkboxDiv"> <input type="checkbox" id="numbers" checked /> <label for="numbers">Include numbers</label> </div> <div class="checkboxDiv"> <input type="checkbox" id="symbols" /> <label for="symbols">Include symbols</label> </div> <div class="rangeBoxDiv"> <div style="width: 85%"> <label for="length">Password Length:</label><input type="range" id="length" min="4" max="32" value="8" step="2" /> </div> <span id="passwordLengthBox">8</span> </div> <button type="submit" class="button">Generate Password</button> </form> </div> </div> </body> <script src="index.js"></script> </html>
This code is with an HTML boilerplate. So, no need to create a different boilerplate for it. In this app, we used our custom font.
This structure has a javascript password generator div. Let's take a close look at it. It has three components tooltip, header, and form.
The tooltip is created to indicate that password is copied.
The header contains an Input box and a copy button. This input box shows generated password. And copy button copied it.
This form contains components to customize passwords. This form has four checkboxes to include uppercase letters, lowercase letters, numbers, and symbols in the password. One range div to customize password length. And a button to generate the password.
We created our app structure. It's time to style our app.
Styling our app
Go to the style.css file. Add the given styles properties to it.
If you want to give your custom styles, you are free to do so.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background: rgba(103, 232, 249, 1);
color: black;
font-family: 'Ubuntu', sans-serif;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.password-generator {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.25rem 0;
background: rgba(220, 252, 231, 0.8);
border-radius: 0.375rem;
width: 20rem;
}
#tooltip{
position: absolute;
top: -10%;
right: 1rem;
background: #10B981;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
color: #ffffff;
font-weight: 500;
opacity: 0;
transition: 0.5s;
}
.header {
width: 100%;
display: flex;
padding: 0 1rem 0.5rem 1rem;
}
#inputBox {
border-style: none;
outline: none;
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
padding: 0.6rem 0 0.6rem 0.6rem;
width: 100%;
background: rgb(255, 255, 255);
align-items: center;
justify-content: center;
}
#copyBtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14%;
background: white;
cursor: pointer;
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.icon {
fill: rgb(59, 90, 72);
}
.active {
fill: #10B981;
}
form {
display: flex;
flex-direction: column;
padding: 0 4rem;
user-select: none;
}
.checkboxDiv {
display: flex;
padding: 0.4rem 0;
}
input[type=checkbox] {
margin: 0 0.4rem;
}
input[type=range] {
margin: 0.8rem 0;
background-color: rgba(116, 121, 131, 0.6);
width: 100%;
border-radius: 0.5rem;
appearance: none;
cursor: pointer;
height: 3px;
}
.rangeBoxDiv {
width: 100%;
display: flex;
align-items: center;
margin: 0.8rem 0 0.8rem 0;
}
#passwordLengthBox {
display: inline-flex;
margin: 0 0 0 0.5rem;
background-color: #ffffff;
font-weight: 600;
justify-content: center;
align-items: center;
height: 2rem;
border-radius: 0.25rem;
width: 15%;
}
.button {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
background-color: #10B981;
color: #ffffff;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
border-radius: 1.5rem;
border: none;
cursor: pointer;
}
.button:hover {
background-color: #059669;
}
We use a flex layout and some basic CSS properties in this app. There is nothing to tell about the CSS style in this app. So, let's move on.
Creating logic with JavaScript
Go to your index.js file and paste the given code into it.
const form = document.querySelector("form");
const inputBox = document.querySelector("#inputBox");
const range = document.querySelector('input[type=range]')
const passwordLengthBox = document.querySelector('#passwordLengthBox')
const copyBtn = document.querySelector('#copyBtn')
const tooltip = document.getElementById('tooltip')
const uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const lowercase = "abcdefghijklmnopqrstuvwxyz";
const numbers = "0123456789";
const symbols = "!\"#§%&'()*+,-./:;<=>?@[\\]^_`{|}~";
range.addEventListener("change", (e) => {
// console.log(e.target.value);
passwordLengthBox.textContent = e.target.value
})
form.addEventListener("submit", (event) => {
event.preventDefault();
const length = range.value
let characters = "";
if (document.querySelector("#uppercase").checked)
characters += uppercase;
if (document.querySelector("#lowercase").checked)
characters += lowercase;
if (document.querySelector("#numbers").checked) characters += numbers;
if (document.querySelector("#symbols").checked) characters += symbols;
let password = "";
for (let i = 0; i < length; i++) {
const index = Math.floor(Math.random() * characters.length);
password += characters[index];
}
inputBox.value = password;
copyBtn.addEventListener("click", (e) => {
navigator.clipboard.writeText(password)
tooltip.style.opacity = `1`
setTimeout(() => {
tooltip.style.opacity = `0`
}, 1000)
})
});
Here, it calls the necessary elements from the document. Then four variables are declared to store uppercase letters, lowercase letters, numbers, and symbols. Now the event listener is defined to display range value or password length.
A function that creates a password and is called by an event listener. It is called when the form is submitted by the user. In this function, two variable lengths and character is defined. The length variable contains the password length, and the character variable is empty at the beginning. Later it stores all the password characters. Now some conditions are added to check checkboxes. When a specific checkbox is checked, its value will be added. Such as, if you check the "uppercase" checkbox, the character variable will have an uppercase letter. Now an empty variable is declared named password. Then a loop is created to generate a random password and show it in the input box.
We also create a function that calls on clicking the copy button. When the user clicks the copy button and text will be copied. And a popup will display. After one-second popup will automatically be removed.
That's it.