In today’s digital world, using strong and secure passwords is extremely important.
A Password Generation App helps users create random, secure, and hard-to-guess passwords instantly.
In this project, we build a simple and user-friendly Password Generator App that generates strong passwords using a combination of letters, numbers, and special characters.
This project is ideal for beginners who want to understand real-world JavaScript logic along with clean UI design.
Tools & Resources That Support My Web Development Work
Discover the exact hardware and services I use daily — from laptops and keyboards to hosting and domains.
1. Video Tutorial – Password Generation App
To understand this project clearly, watch the complete video tutorial where the Password Generation App is explained step by step.
The video demonstrates:
How the app works
How passwords are generated
How the copy feature works
2. HTML Structure of the App
HTML is used to create the basic structure of the Password Generation App.
It includes elements such as:
Title of the app
Password display field
Generate and Copy buttons
Below, you can find the complete HTML code used in this project.
👉 Full HTML Code Below
Password Generation App || CodeByGaurav
Password Generator
3. CSS Styling for the Password Generator
CSS is used to design the visual appearance of the app.
It gives the Password Generator a modern dark theme, proper spacing, and smooth button hover effects.
With CSS, the app becomes:
Visually attractive
User-friendly
Responsive on different screen sizes
👉 Full CSS Code Below
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background: #3498db;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main {
width: 400px;
background: #2980b9;
padding: 20px;
border-radius: 5px;
text-align: center;
color: white;
}
h1 {
margin-bottom: 20px;
}
.generatePass {
position: relative;
}
.generatePass input {
width: 100%;
height: 50px;
border: none;
outline: none;
border-radius: 4px;
font-size: 22px;
padding: 4px 8px;
}
.generatePass i {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: black;
font-size: 22px;
cursor: pointer;
}
.selectItems {
margin: 20px 0px;
}
.select {
display: flex;
justify-content: space-between;
padding: 5px 0px;
}
.select label {
font-size: 20px;
}
.select input[type="number"] {
width: 70px;
padding: 4px 8px;
border: none;
outline: none;
border-radius: 4px;
font-size: 16px;
}
.select input[type ="checkbox"]{
width: 18px;
cursor: pointer;
}
.generateBtn{
width: 100%;
background: lightblue;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 4px;
font-weight: 500;
cursor: pointer;
}
4. JavaScript Logic Behind Password Generation
JavaScript is the core of this Password Generation App.
It handles:
Random password creation
Password length control
Copy-to-clipboard functionality
The logic is simple, clean, and beginner-friendly, making this project perfect for learning JavaScript fundamentals.
👉 Full JavaScript Code Below
const upperSet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
const lowerSet = "abcdefghijklmnopqrstuvwxyz"
const numberSet = "1234567890"
const symbolSet = "~!@#$%^&*()_+/"
const passwordGenerate = document.getElementById("passwordGenerate");
const lengthRange = document.getElementById("length");
const lower = document.getElementById("lower");
const upper = document.getElementById("upper");
const number = document.getElementById("number");
const symbol = document.getElementById("symbol");
const generateBtn = document.getElementById("generateBtn");
const generateRandom = (getData) => {
return getData[Math.floor(Math.random() * getData.length)]
}
const generatePassword = (password = "") => {
let selectOption = 0;
if (lower.checked) {
password += generateRandom(lowerSet)
selectOption++
}
if (upper.checked) {
password += generateRandom(upperSet)
selectOption++
}
if (number.checked) {
password += generateRandom(numberSet)
selectOption++
}
if (symbol.checked) {
password += generateRandom(symbolSet)
selectOption++
}
if (parseInt(lengthRange.value) < selectOption) {
lengthRange.value = selectOption
}
if (!password) {
return alert("Please select al least one option to generate a Password.")
}
if (password.length < lengthRange.value) {
return generatePassword(password)
} else {
passwordGenerate.value = password.substring(0, lengthRange.value)
}
}
generateBtn.addEventListener("click", () => {
generatePassword()
})
document.getElementById("copyBtn").addEventListener("click", () => {
let inpValue = passwordGenerate.value;
if (!inpValue) {
alert("Nothing to Copy!")
return
}
navigator.clipboard.writeText(inpValue)
.then(() => {
alert("Password Copied!")
})
.catch(() => {
alert("Failed to copy!")
})
})
5. Why Use a Password Generation App?
Using a Password Generator helps to:
Create strong and secure passwords
Avoid weak or repeated passwords
Improve online security
Save time during account creation
This app is useful for developers, students, and anyone concerned about digital safety.
Final Conclusion
The Password Generation App is a small but powerful utility project.
It improves your understanding of JavaScript logic, DOM manipulation, and UI design while creating something practically useful.
This project is highly recommended for beginners and can be enhanced further with additional features like password strength indicators or length selectors.

I like the way you make so much beautifull layouts and now I want to say you to upload your course
Thank you so much 😊
I’m really glad you like the layouts.
A full course is not available right now, but I’m planning to share more detailed tutorials and projects very soon. Stay connected!