close

DEV Community

Gift Egbonyi
Gift Egbonyi

Posted on • Edited on

🔑 Build a Simple Password Generator with HTML, CSS & JavaScript

#javascript #html #css #passwordgenerator

Hey friends!

I'm late today aren't I? These past few weeks have been so hectic for me as I'm building two full-stack projects but I must show up for our weekly date, so here I am😊

Today we’ll build a simple but super useful tool — a Password Generator.

What we’ll learn:

  • How to use DOM elements to take user input.
  • How to generate random characters with JavaScript.
  • How to combine logic + UI for a real-world mini-project.

What We’re Building

A password generator where the user can:

  • Choose the length of the password.
  • Toggle if they want numbers, symbols and uppercase letters.
  • Copy the generated password with one click.

Here’s the live demo 👇

👉 See it on CodePen

Step 1: HTML

We’ll start with a simple form:

<div class="card">
  <h2>Password Generator</h2>

  <div class="form">
    <label>Password Length:</label>
    <input type="number" id="length" min="4" max="20" value="12" />

    <label>
      <input type="checkbox" id="numbers" checked />
      Include Numbers
    </label>

    <label>
      <input type="checkbox" id="symbols" checked />
      Include Symbols
    </label>

    <label>
      <input type="checkbox" id="uppercase" checked />
      Include Uppercase
    </label>

    <button id="generate">Generate Password</button>
    <p id="result"></p>
    <button id="copy">Copy</button>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Step 2: CSS

Keep it clean and centered:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea, #764ba2);
  font-family: sans-serif;
}

.card {
  background: #fff;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  width: 300px;
}

h2 {
  text-align: center;
  margin-bottom: 1rem;
}

.form label {
  display: block;
  margin-top: 0.5rem;
}

button {
  margin-top: 1rem;
  width: 100%;
  padding: 0.6rem;
  border: none;
  border-radius: 8px;
  background: #667eea;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
}

#result {
  margin-top: 1rem;
  padding: 0.8rem;
  background: #f4f4f4;
  border-radius: 8px;
  font-weight: bold;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

Step 3: JavaScript Logic

This is where the magic happens:

const lengthInput = document.getElementById("length");
const numbers = document.getElementById("numbers");
const symbols = document.getElementById("symbols");
const uppercase = document.getElementById("uppercase");
const generateBtn = document.getElementById("generate");
const result = document.getElementById("result");
const copyBtn = document.getElementById("copy");

const lower = "abcdefghijklmnopqrstuvwxyz";
const upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const nums = "0123456789";
const syms = "!@#$%^&*()_+[]{}<>?";

function generatePassword(length, useNumbers, useSymbols, useUppercase) {
  let chars = lower;
  if (useNumbers) chars += nums;
  if (useSymbols) chars += syms;
  if (useUppercase) chars += upper;

  let password = "";
  for (let i = 0; i < length; i++) {
    password += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return password;
}

generateBtn.addEventListener("click", () => {
  const len = +lengthInput.value;
  const pwd = generatePassword(len, numbers.checked, symbols.checked, uppercase.checked);
  result.textContent = pwd || "⚠️ Please select at least one option!";
});

copyBtn.addEventListener("click", () => {
  if (!result.textContent) return;
  navigator.clipboard.writeText(result.textContent);
  alert("Password copied to clipboard!");
});
Enter fullscreen mode Exit fullscreen mode

Wrap Up

And that’s it! we’ve just built a fully functional password generator with:

  • HTML for the form
  • CSS for styling
  • JavaScript for the logic

🔗 Try the live demo here: Password Generator on CodePen

🙋🏽‍♀️ Over to You!

Challenge for You

  • Add a strength indicator (weak, medium, strong).
  • Style it in your own unique way.
  • Try adding a “regenerate” button!

Let me know if you do the challenge! I'd like to see yours! Connect with me on GitHub

Was this tutorial helpful? Got questions? Or any insight to help me write better tutorials? Let me know in the 💬!

That’s it for today’s midweek mini tutorial!

I’m keeping things light, fun and useful; one small project at a time.

*If you enjoyed this, leave a 💬 or 🧡 to let me know. *

And if you’ve got an idea for something you'd like me to try out next Wednesday, drop it in the comments. 👇

Follow me to see more straight-forward and short tutorials like this :)

If you are curious about what I do, check out my Portfolio

:-)

Web trails
You can also find me here on LinkedIn
or here X (Twitter)

✍🏾 I’m documenting my learning loudly every Wednesday. Follow along if you're learning JavaScript too!
Let’s keep learning together!

💡 Tip

Try rebuilding this from memory after going through it once. That’s the best way to reinforce what you’ve learned.

See you next Wednesday 🚀

Top comments (0)