Password Generator Using HTML CSS JS With Free Source Code
Introduction
Hello coders, In this article we’re gonna build a Password Generator Using HTML CSS JS. This password generator is mainly JavaScript based project. The UI of this project is build using HTML CSS and the functionality is added using JavaScript. By creating this JavaScript project you will learn about some JS concepts like DOM, events etc and you’ll get to know that how these works.
This Password Generator Using HTML CSS JS contains lowercase and uppercase letters. It also contains symbols and number to generate your password. A slider is also available for length of the password. Using this you can generate how long password you want and what specifications you need in your password. You can also copy the generated password by clicking the copy button.
This project isn’t a major project but it will help you to learn fundamentals of JavaScript. This will help you to grow your skills.
Let’s see the code.
index.html
This is our HTML code. Using this code we’ve build the basic structure of our password generator. Our DOCTYPE defines that our document is a HTML5 document. In the head tag of the file, the meta tags, a title and links are included for our document.
The body tag is main part of the document as it contains the main content of our project password generator. A main div with class container contains whole content of the page. First we’ve created a heading for our password generator. After that a disabled input box is created where the generated password will appear. After that a slider is created for length of the password.
Next, we’ve created the checkboxes for password options. For each password option we’ve created a label tag and an input field. Lowercase, Uppercase, Numbers and symbols options are added for password option. At last we’ve added a password generator button with the id btn.
This is all about our HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PassWord Generator</title><link rel="preload" as="image" imagesrcset="https://developergoutam.com/wp-content/uploads/2024/09/post18-768x660.png 768w, https://developergoutam.com/wp-content/uploads/2024/09/post18-300x258.png 300w, https://developergoutam.com/wp-content/uploads/2024/09/post18-1024x881.png 1024w, https://developergoutam.com/wp-content/uploads/2024/09/post18-150x129.png 150w, https://developergoutam.com/wp-content/uploads/2024/09/post18-450x387.png 450w, https://developergoutam.com/wp-content/uploads/2024/09/post18.png 1042w" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergoutam.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.0" type="font/woff2" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
</head>
<body>
<div class="container">
<h1>Password Generator</h1>
<div class="inputBox">
<input type="text" class="passBox" id="passBox" disabled>
<span class="material-symbols-outlined" id="copyIcon">
content_copy
</span>
</div>
<input type="range" min="1" max="16" value="8" id="inputSlider">
<div class="row">
<p>Password Length</p>
<span id="sliderValue"></span>
</div>
<div class="row">
<label for="lowerCase">Include Lowercase (a-z)</label>
<input type="checkbox" id="lowerCase" checked>
</div>
<div class="row">
<label for="upperCase">Include Uppercase (A-Z)</label>
<input type="checkbox" id="upperCase" checked>
</div>
<div class="row">
<label for="specialChar">Include Symbols (#&@)</label>
<input type="checkbox" id="specialChar" checked>
</div>
<div class="row">
<label for="numbers">Include Numbers (0-9)</label>
<input type="checkbox" id="numbers" checked>
</div>
<button type="button" id="btn">Generate Password</button>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
This code is our CSS code, Using this code we’ve styled our password generator. In this first of all, using universal selector we reset margin and padding of the document. Box-sizing is set to border-box and font is set as sans-serif.
We’ve set the min width and min height for the body. Using flexbox we centered the our body. A liner-gradient background is given to body. The text color of the body is set as white.
The container sits in center of the page. Using flexbox we’ve centered the container. Border radius and box shadow is also given to the container for it’s interactivity. Then we styled the heading of the container by giving some margin, padding, font-weight and font-size.
After that we styled all our input buttons by giving them CSS properties like margin, padding and some flexbox properties and more. Input box for the password and slider is also designs for the interactivity of the password generator.
At last, we’ve styled the password generator button and used hover effect for the generate password button. We styled the button by giving padding, margin, background and some other CSS properties.
This was all about our CSS code.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
min-height: 100vh;
min-width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right bottom,
#dbe6f6 ,
#c5796d);
color: #fff;
}
.container{
display: flex;
flex-direction: column;
border: 2px solid #000;
border-radius: 10px;
padding: 28px 32px;
background: transparent;
box-shadow: 10px 10px 5px #835c56;
}
.container h1{
font-weight: 800;
font-size: 28px;
margin: 8px auto;
color: #000;
}
.inputBox{
position: relative;
}
.inputBox span{
position: absolute;
top: 16px;
right: 6px;
color: #000;
font-size: 28px;
cursor: pointer;
}
.passBox{
background: #fff;
border: none;
outline: none;
border-radius: 10px;
width: 100%;
padding: 10px;
font-size: 24px;
margin: 8px auto;
}
.row{
display: flex;
margin-block: 8px;
}
.row p, .row label{
flex-basis: 100%;
font-size: 20px;
font-weight: 600;
color: #000;
}
.row input{
width: 20px;
height: 20px;
}
#btn{
padding: 10px;
border-radius: 5px;
border: none;
background: rgb(54, 54, 162);
font-size: 22px;
font-weight: 700;
color: #fff;
margin-block: 8px;
cursor: pointer;
}
#btn:hover{
background: rgb(32, 32, 147);
}
script.js
This is a simple JavaScript code that generates a password. In this, the user can select the length by using slider and select the option of whether password needs to have lowercase letters, uppercase letters, numbers, and symbols by making use of checkboxes. The generatePassword function will be called when the “Generate Password” button is clicked, creating a password according to the criteria chosen.
It combines characters from different groups, such as lowercase or uppercase letters, according to what is checked for the user, then selects randomly characters from that combined group until it has reached the desired length.
There is also a copy icon where it brings out the copy function of the password that can easily be copied. When you click, this site copies the password into your clipboard and briefly changes to show the action. This makes the process extremely simple and thus easy to come up with really secure passwords.
This was all about our JS code.
let inputSlider = document.getElementById("inputSlider");
let passBox = document.getElementById("passBox");
let sliderVal = document.getElementById("sliderValue");
let lowerCase = document.getElementById("lowerCase");
let upperCase = document.getElementById("upperCase");
let symbols = document.getElementById("specialChar");
let num = document.getElementById("numbers");
let btn = document.getElementById("btn");
let copyIcon = document.getElementById("copyIcon");
sliderVal.textContent = inputSlider.value;
inputSlider.addEventListener("input", () => {
sliderVal.textContent = inputSlider.value;
});
btn.addEventListener("click", () => {
passBox.value = generatePassword();
});
let lowercase = "abcdefghijklmnopqrstuvwxyz";
let uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let allSymbols = "~!#$%^&*";
let allNumbers = "0123456789";
function generatePassword() {
let genPass = "";
let allChars = "";
allChars += lowerCase.checked ? lowercase : "";
allChars += upperCase.checked ? uppercase : "";
allChars += symbols.checked ? allSymbols : "";
allChars += num.checked ? allNumbers : "";
if (allChars == "" || allChars.length == 0) {
return genPass;
}
let i = 1;
while (i <= inputSlider.value) {
genPass += allChars.charAt(Math.floor(Math.random() * allChars.length));
i++;
}
return genPass;
}
copyIcon.addEventListener('click', ()=>{
if(passBox.value != "" || passBox.value.length >= 1){
navigator.clipboard.writeText(passBox.value);
copyIcon.innerText="check";
copyIcon.title="Password Copied";
}
setTimeout( ()=>{
copyIcon.innerHTML="content_copy";
copyIcon.title="";
}, 3000)
})