Secure Password Generator Using HTML, CSS And JavaScript.

This tutorial will guide you through the process of creating a Secure Password Generator using HTML, CSS and JavaScript. With a modern user interface design and complete source code you will learn step-by-step how to develop a functional and secure password generator.

Table Of Contents

Introduction
Features of Password Generator
Requirements:
HTML Structure
Styling with CSS
JavaScript for Functionality
Final Output
Conclusion

Introduction

Hey everyone! Today I am starting an exciting project creating a secure password generator from scratch using HTML, CSS, and JavaScript. This generator is designed to be smooth and functional with a user-friendly interface.

By the end of this article, you’ll be able to see the secure password generator in action by clicking the “View Demo” button and testing it out for yourself. This project is not only super interesting but also an excellent opportunity for beginner developers to enhance their skills.

Features of Password Generator

Random password generation(Uppercase , numbers and Symbols).
Customizable length (choose how long your password should be).
Copy to clipboard to easy use.
Modern, user friendly design.

Requirements:

Understand basic structure of HTML, CSS and JavaScript.
Text Editors: visual Studio Code, Sublime Text or others.
Web Browser: for testing purpose such as Google Chrome, Microsoft Edge, etc.

Don’t copy the code until you understand.

HTML Structure

1.Head Section(<head>)

Meta Tags: Defines the character encoding (UTF-8) and makes the page responsive(Viewport).
Title: Sets the webpage title to “Secure Password Generator”.
Font Icons:
–Google Fonts(Poppins): Used for better typography.
–Font Awesome Icons: Provides icons for button and labels.
CSS Link: Connect to external stylesheet (style.css) for styling.

2. Body Section (<body>)

Main Container (<div class=”container”): Wraps everything inside a centered box.
Heading (h1): Displays the title “Secure Password Generator” at the top.
Password Display (<div class=”password-display”>):
–Input Field (input type=”text” id=”password”>): Shows the generated password.
–Copy Button (<button id=”copyBtn”>): Copies the password to the clipboard.
Strength Indicator (<div class=”strength-indicator”> ):
Strength Bar (<div id=”strengthBar”>): A visual indicator showing password strength.
Password Customization Options (<div class=”options”>):
–Password Length ( <input type=”number”> ): Allows the user to set the password length (8-50).
–Checkboxes ( <input type=”checkbox”>) for:
– Uppercase letters (A-Z)
– Numbers (0-9)
– Symbols (!@#$…)
Generate Button ( <button id=”generateBtn”>: Clicking this button generates a new password.
Security Info ( <div class=”Security-info”> ): Displays a small message informing users that passwords are generated locally for security.
JavaScript File Connection:
–<script src=”script.js”> </script>: Links the JavaScript file, which makes the password generator functional.

The complete code is waiting for you bellow-go ahead, start the building.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secure Password Generator</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
   <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>🔒 Secure Password Generator</h1>
        
        <div class="password-display">
            <input type="text" id="password" placeholder="Click generate to create password" readonly>
            <button class="copy-btn" id="copyBtn">
                <i class="far fa-copy"></i>
                Copy
            </button>
        </div>

        <div class="strength-indicator">
            <div class="strength-bar" id="strengthBar"></div>
        </div>

        <div class="options">
            <div class="option">
                <label for="length">Password Length</label>
                <input type="number" id="length" min="8" max="50" value="16">
            </div>
            <div class="option">
                <label for="uppercase">Include Uppercase (A-Z)</label>
                <input type="checkbox" id="uppercase" checked>
            </div>
            <div class="option">
                <label for="numbers">Include Numbers (0-9)</label>
                <input type="checkbox" id="numbers" checked>
            </div>
            <div class="option">
                <label for="symbols">Include Symbols (!@#$)</label>
                <input type="checkbox" id="symbols" checked>
            </div>
        </div>

        <button id="generateBtn">
            <i class="fas fa-sync-alt"></i>
            Generate New Password
        </button>

        <div class="security-info">
            <i class="fas fa-shield-halved"></i>
            Passwords are generated locally in your browser
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

HTML

Styling with CSS

This CSS file styles the secure password Generator, making it visually appealing and responsive. below is a breakdown of its key sections:

1.Root Variable (:root)

This section defines custom CSS variables for colors:

–primary: Blue (#2A6BFF) -> Used for buttons & highlights.
–secondry: Green( #4CAF50) -> Used for icons.
–background: light grey (#f0f2f5) -> Background color.
–text: Dark grey (#2d3436) -> Text color.
–container-bg : white with transparency -> Used for the main container.

2. Global Styling (*)

Resets the default margin & padding (margin: 0; padding:0;).
Uses Poppins font ( font-family: ‘Poppins’, sans-serif;).
Enables box-sizing: border-box; for consistent sizing.

3. Body Styling (body)

Sets minimum height (min-height: 100vh;) to cover full screen.
Centers content using flexbox (display: flex; justify-content: center; align-items: center; ).
Uses a gradient background (linear-gradient (135deg, #e3f2fd, #f3e5f5)).

4. Container Styling (.container)

Background: white with blur effect (backdrop-filter: blur(10px);).
Rounded Corners: border-radius: 20px; .
Shadow Effect: Adds depth (box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);).
Hover Animation: Moves up slightly (transform: translateY(-5px);).

5. Header (h1)

Centered text with dark color (color: var(–text);).
font weight: 600.

6. Password Display (.password-display)

Contains an input field (#password) and a copy button (.copyBtn).
Copy Button Styling:
– Blue background (background: var(–primary);).
– Icon and text aligned with spacing.
– Hover effect: box-shadow: 0 3px 12px rgba(42, 107, 255, 0.3); .

7. Strength Indicator (.strength-indicator)

Gray background bar (#eee).
Strength bar (.strength-bar) dynamically changes width and color via JavaScript.

8. Options Styling (.options and .option)

Each setting (length, uppercase, numbers, symbols) is flex row (display: flex; justify-content: space-between;).
Checkboxes (input[type=”checkbox”;]) use the primary color (accent-color: var(–primary); ).
Hover Effect: Moves slightly right (transform: translateX(5px); ).

9. Generate Button (#generateBtn)

Full-width button with a blue background.
Hover Effect: Darker shade with a glowing effect (box-shadow: 0 5px 15px rgba(42, 107, 255, 0.4); ).

10. Security Info (.security-info)

Centered text with an icon (.fa-shield-halved ).
Green shield icon (color: var(–secondary) ).

11. Responsive Design (@media (max-width: 480px) )

Smaller padding for .container .
Reduced font size for h1.

The complete CSS is waiting for you bellow-go ahead, continue the building.

CSS

 :root {
            --primary: #2A6BFF;
            --secondary: #4CAF50;
            --background: #f0f2f5;
            --text: #2d3436;
            --container-bg: rgba(255, 255, 255, 0.95);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
            padding: 20px;
        }

        .container {
            background: var(--container-bg);
            min-height: 80px;
            padding: 2rem;
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            width: 100%;
            max-width: 550px;
            transition: transform 0.3s ease;
        }

        .container:hover {
            transform: translateY(-5px);
        }

        h1 {
            text-align: center;
            color: var(--text);
            margin-bottom: 2rem;
            font-weight: 600;
            font-size: 1.8rem;
        }

        .password-display {
            position: relative;
            margin-bottom: 2rem;
        }

        #password {
            width: 100%;
            padding: 1rem;
            font-size: 1.1rem;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            outline: none;
            background: #f8f9fa;
            color: var(--text);
            padding-right: 120px;
        }

        .copy-btn {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--primary);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .copy-btn:hover {
            background: #1a5bff;
            box-shadow: 0 3px 12px rgba(42, 107, 255, 0.3);
        }

        .options {
            margin-bottom: 2rem;
        }

        .option {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 10px;
            margin-bottom: 1rem;
            transition: transform 0.2s ease;
        }

        .option:hover {
            transform: translateX(5px);
        }

        label {
            font-size: 0.95rem;
            color: var(--text);
            font-weight: 500;
        }

        input[type="number"] {
            width: 70px;
            padding: 0.5rem;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1rem;
            text-align: center;
        }

        input[type="checkbox"] {
            width: 20px;
            height: 20px;
            accent-color: var(--primary);
            cursor: pointer;
        }

        .strength-indicator {
            height: 5px;
            background: #eee;
            border-radius: 5px;
            margin-bottom: 1.5rem;
            overflow: hidden;
        }

        .strength-bar {
            height: 100%;
            width: 0;
            transition: all 0.3s ease;
        }

        button#generateBtn {
            width: 100%;
            padding: 1rem;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        button#generateBtn:hover {
            background: #1a5bff;
            box-shadow: 0 5px 15px rgba(42, 107, 255, 0.4);
        }

        .security-info {
            text-align: center;
            margin-top: 1.5rem;
            font-size: 0.9rem;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .fa-shield-halved {
            color: var(--secondary);
        }

        @media (max-width: 480px) {
            .container {
                padding: 1.5rem;
            }
            
            h1 {
                font-size: 1.5rem;
            }
        }

CSS

JavaScript for Functionality

This JavaScript code creates a random password generator with interactive features, including password strength indication and copy-to-clipboard functionality. Below is a breakdown in a different format for better understanding.

1. Selecting HTML Elements

const generateBtn = document.getElementById('generateBtn');  // Generate button
const copyBtn = document.getElementById('copyBtn'); // Copy button
const passwordField = document.getElementById('password'); // Password display field
const lengthInput = document.getElementById('length'); // Password length input
const uppercaseCheck = document.getElementById('uppercase'); // Uppercase checkbox
const numbersCheck = document.getElementById('numbers'); // Numbers checkbox
const symbolsCheck = document.getElementById('symbols'); // Symbols checkbox
const strengthBar = document.getElementById('strengthBar'); // Password strength bar

2. Defining Character Sets

To generate a password we need different sets of characters

const upperLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; // Uppercase letters
const lowerLetters = 'abcdefghijklmnopqrstuvwxyz'; // Lowercase letters
const numbers = '0123456789'; // Numeric characters
const symbols = '!@#$%^&*()_+-=[]{}|;:,.<>?'; // Special characters

3. Function to Calculate Password Strength

The strength of a password is determined by its length and the variety of characters used.

function calculateStrength(password) {
    let strength = 0;

    if (/[A-Z]/.test(password)) strength += 25; // Includes uppercase letters
    if (/[0-9]/.test(password)) strength += 25; // Includes numbers
    if (/[^A-Za-z0-9]/.test(password)) strength += 25; // Includes special characters
    if (password.length >= 12) strength += 25; // Longer passwords are stronger

    // Update the strength bar visually
    strengthBar.style.width = strength + '%';
    strengthBar.style.backgroundColor = 
        strength < 50 ? '#ff4444' :   // Weak (Red)
        strength < 75 ? '#ffbb33' :   // Medium (Yellow)
                        '#00C851';    // Strong (Green)
}

It checks for uppercase letters, numbers, symbols and length.
The strength is updated based on these factors.
The strengthBar visually reflects the security level.

4. Function to Generate a Random Password

This function creates a new password based on the user’s preferences.

function generatePassword() {
    let chars = lowerLetters; // Default: lowercase letters only
    let password = '';

    // Add additional character sets based on user selection
    if (uppercaseCheck.checked) chars += upperLetters;
    if (numbersCheck.checked) chars += numbers;
    if (symbolsCheck.checked) chars += symbols;

    // Ensure at least one character type is selected
    if (chars === lowerLetters) {
        alert('Please select at least one character type!');
        return;
    }

    // Generate a password of the specified length
    for (let i = 0; i < lengthInput.value; i++) {
        const randomIndex = Math.floor(Math.random() * chars.length);
        password += chars[randomIndex];
    }

    // Shuffle the password characters for better randomness
    password = password.split('').sort(() => Math.random() - 0.5).join('');

    // Display the generated password
    passwordField.value = password;

    // Update the password strength
    calculateStrength(password);
}

The default password includes only lowercase letters.
If the user selects uppercase, numbers or symbols they are added to the pool.
A random password is generated using the selected characters.
The password is shuffled for better randomness.
The password is displayed in the input field.
The strength of the password is calculated and displayed.

5. Function to Copy Password to Clipboard

Users can copy the generated password with a button click.

function copyToClipboard() {
    if (!passwordField.value) return; // Prevent copying an empty password

    navigator.clipboard.writeText(passwordField.value).then(() => {
        // Temporarily change button text to indicate success
        copyBtn.innerHTML = `<i class="fas fa-check"></i> Copied!`;
        setTimeout(() => {
            copyBtn.innerHTML = `<i class="far fa-copy"></i> Copy`;
        }, 2000);
    });
}

If no passwords generated it does nothing.
The password is copied to the clipboard using navigator.clipboard.writeText( ).
The button text changes to “Copied” for 2 seconds, then resets.

6. Event Listeners to Handle User Actions

Theses lines make the buttons functional.

generateBtn.addEventListener('click', generatePassword); // Generate password when clicked
copyBtn.addEventListener('click', copyToClipboard); // Copy password when clicked

Clicking the “Generete” button creates a new password.
Clicking the “Copy” button copies the password to the clipboard.

7. Generate a Password When Page Loads

generatePassword();

When the page loads, a password is automatically generated.

JavaScript

const generateBtn = document.getElementById('generateBtn');
        const copyBtn = document.getElementById('copyBtn');
        const passwordField = document.getElementById('password');
        const lengthInput = document.getElementById('length');
        const uppercaseCheck = document.getElementById('uppercase');
        const numbersCheck = document.getElementById('numbers');
        const symbolsCheck = document.getElementById('symbols');
        const strengthBar = document.getElementById('strengthBar');

        const upperLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        const lowerLetters = 'abcdefghijklmnopqrstuvwxyz';
        const numbers = '0123456789';
        const symbols = '!@#$%^&*()_+-=[]{}|;:,.<>?';

        function calculateStrength(password) {
            let strength = 0;
            if (/[A-Z]/.test(password)) strength += 25;
            if (/[0-9]/.test(password)) strength += 25;
            if (/[^A-Za-z0-9]/.test(password)) strength += 25;
            if (password.length >= 12) strength += 25;
            
            strengthBar.style.width = strength + '%';
            strengthBar.style.backgroundColor = 
                strength < 50 ? '#ff4444' :
                strength < 75 ? '#ffbb33' : '#00C851';
        }

        function generatePassword() {
            let chars = lowerLetters;
            let password = '';
            
            if(uppercaseCheck.checked) chars += upperLetters;
            if(numbersCheck.checked) chars += numbers;
            if(symbolsCheck.checked) chars += symbols;

            if(chars === lowerLetters) {
                alert('Please select at least one character type!');
                return;
            }

            for(let i = 0; i < lengthInput.value; i++) {
                const randomIndex = Math.floor(Math.random() * chars.length);
                password += chars[randomIndex];
            }

            password = password.split('').sort(() => Math.random() - 0.5).join('');
            passwordField.value = password;
            calculateStrength(password);
        }

        function copyToClipboard() {
            if(!passwordField.value) return;
            
            navigator.clipboard.writeText(passwordField.value).then(() => {
                copyBtn.innerHTML = `<i class="fas fa-check"></i> Copied!`;
                setTimeout(() => {
                    copyBtn.innerHTML = `<i class="far fa-copy"></i> Copy`;
                }, 2000);
            });
        }

        generateBtn.addEventListener('click', generatePassword);
        copyBtn.addEventListener('click', copyToClipboard);

        // Initial generation
        generatePassword();

JavaScript

Final Output

Conclusion

Congratulations! You have successfully built a Secure Password Generator using HTML, CSS and JavaScript. This project not only enhances your coding skills but also provides a practical tool for generating strong passwords with customization options.

What we learned:

How to structure an interactive webpage using HTML.
How to design a modern and user-friendly interface using CSS.
How to generate random passwords and implement a copy-to-clipboard feature with JavaScript.
How to improve password security with strength indicators and customization options.

This project is fully responsive and works directly in the browser ensuring privacy and security since passwords are generated locally.

View Demo

Download source code

HTML AND CSS Password generator

3 comments

Neo Login & Signup With HTML, CSS & JS: Complete Source Code Tutorial April 12, 2025 - 8:56 am

[…] Neo Login & Signup with HTML, CSS &… How to Create an Animated Clock with HTML,… Secure Password Generator using HTML, CSS and JavaScript. Circular Scroll Progress Bar Using HTML, CSS &… Stylish Accordion with HTML, CSS and […]

How To Create An Animated Clock With HTML, CSS And JavaScript April 12, 2025 - 8:58 am

3D Digital Clock With Animated Color Transitions June 21, 2025 - 3:03 pm

Introduction

Features of Password Generator

Requirements:

HTML Structure

Styling with CSS

JavaScript for Functionality

Final Output

Conclusion

STAY TUNED WITH US

Sign up for our newsletter to receive our posts, special events.

Coding Tutorial

Modern Website Footer Design Using HTML and CSS Only

How to build a professional About us page With HTML,CSS...

3D Digital Clock with Animated Color Transitions

Neo Login & Signup with HTML, CSS & JS: Complete...

How to Create an Animated Clock with HTML, CSS and...

Secure Password Generator using HTML, CSS and JavaScript.

Popular post

Secure Password Generator using HTML, CSS and JavaScript.

Introduction

Features of Password Generator

Requirements:

HTML Structure

Styling with CSS

JavaScript for Functionality

Final Output

Conclusion

Circular Scroll Progress Bar Using HTML, CSS & JavaScript

How to Create an Animated Clock with HTML, CSS and JavaScript

Related Posts

3 comments

Leave a Comment Cancel Reply

STAY TUNED WITH US

Sign up for our newsletter to receive our posts, special events.

Coding Tutorial

Popular post