Create a Secure Password Generator with JavaScript

Welcome back to our blog! Today, we’re going to walk you through the creation of a simple yet powerful password generator using JavaScript. This tool allows users to generate random passwords with customizable length and options for including uppercase letters, numbers, and special symbols. Perfect for anyone looking to improve online security!

What You’ll Learn

In this tutorial, we’ll cover:

Setting up the HTML structure for the password generator.
Styling the password generator with CSS for a sleek and modern design.
Implementing the password generation logic using JavaScript.
Adding functionality to copy the generated password to the clipboard.

Let’s dive into the code!

HTML Structure: Creating the Form

The password generator interface is simple yet functional. Here’s the breakdown:

Length Input: A number input field to choose the length of the password.
Checkboxes: Options to include uppercase letters, numbers, and symbols in the password.
Password Display: An area to show the generated password.
Buttons: Two buttons—one for generating the password and another for copying the password to the clipboard.

Here’s the HTML structure of the password generator:

<div class="container">
  <h2>Password Generator</h2>
  <label>
    Length:
    <input type="number" id="length" min="4" max="50" value="12" />
  </label>
  <div class="checkboxes">
    <label><input type="checkbox" id="uppercase" checked /> Include Uppercase</label>
    <label><input type="checkbox" id="numbers" checked /> Include Numbers</label>
    <label><input type="checkbox" id="symbols" checked /> Include Symbols</label>
  </div>
  <div class="password-display" id="passwordDisplay">Click Generate</div>
  <button onclick="generatePassword()">Generate Password</button>
  <button onclick="copyToClipboard()">Copy to Clipboard</button>
</div>

Styling with CSS

We want the password generator to look sleek and professional. Here’s a simple yet effective CSS design that gives it a modern feel.

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #f1f5f9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background: #1e293b;
    padding: 2rem;
    border-radius: 16px;
    width: 320px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
}

h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: #93c5fd;
}

label {
    display: block;
    margin-top: 12px;
    font-size: 0.95rem;
    color: #cbd5e1;
}

input[type="number"] {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    border-radius: 8px;
    border: 1px solid #334155;
    background-color: #0f172a;
    color: #f1f5f9;
    outline: none;
    transition: border 0.2s ease;
}

input[type="number"]:focus {
    border-color: #3b82f6;
}

.checkboxes {
    margin: 12px 0;
}

.checkboxes label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

.password-display {
    background: #334155;
    padding: 12px;
    border-radius: 8px;
    margin: 15px 0;
    word-wrap: break-word;
    font-weight: bold;
    text-align: center;
    color: #facc15;
    letter-spacing: 1px;
    transition: background 0.3s ease;
}

button {
    width: 100%;
    padding: 10px;
    background: linear-gradient(to right, #3b82f6, #60a5fa);
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.3s ease, transform 0.2s ease;
}

button:hover {
    background: linear-gradient(to right, #2563eb, #3b82f6);
}

button:active {
    transform: scale(0.98);
}

JavaScript: Generating the Password

Now, let’s write the JavaScript code that powers the password generator. We’ll define a function to generate the password based on the user’s input, and another function to copy the password to the clipboard.

function generatePassword() {
    const length = document.getElementById("length").value;
    const includeUpper = document.getElementById("uppercase").checked;
    const includeNumbers = document.getElementById("numbers").checked;
    const includeSymbols = document.getElementById("symbols").checked;

    const lowerChars = "abcdefghijklmnopqrstuvwxyz";
    const upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    const numberChars = "0123456789";
    const symbolChars = "!@#$%^&*()_+~`|}{[]:;?><,./-=";

    let charPool = lowerChars;
    if (includeUpper) charPool += upperChars;
    if (includeNumbers) charPool += numberChars;
    if (includeSymbols) charPool += symbolChars;

    let password = "";
    for (let i = 0; i < length; i++) {
        const index = Math.floor(Math.random() * charPool.length);
        password += charPool[index];
    }

    document.getElementById("passwordDisplay").textContent = password;
}

function copyToClipboard() {
    const password = document.getElementById("passwordDisplay").textContent;
    navigator.clipboard.writeText(password).then(() => {
        alert("Password copied to clipboard!");
    }).catch(err => {
        alert("Failed to copy!");
    });
}

Conclusion

With just a few lines of HTML, CSS, and JavaScript, you can build a secure and user-friendly password generator. This tool allows users to generate customized passwords, providing an extra layer of security for their online accounts.

Feel free to tweak the design and functionality to suit your needs. We hope you enjoyed this tutorial! If you found it helpful, don’t forget to share it with others and follow us on social media for more exciting web development tips.

Happy coding!