Password Generator Tool: Build Your Own with HTML CSS and JavaScript

Creating a password generator is an excellent project to enhance your programming skills, especially if you are a beginner or intermediate student of web development. It combines core concepts of HTML, CSS and JavaScript, enabling you to create a practical and functional application.

Also Read: Responsive Footer using HTML and CSS

Password-Generator-Tool-Build-Your-Own-with-HTML-CSS-and-JavaScript

In this guide, we will break down the process of building a password generator step by step, focusing on the structure, design and functionality. By the end, you'll have a fully working tool and a deeper understanding of important web development concepts.

Password Generator Overview

The password generator we’ll create will allow users to:

Select the desired length of the password.
Choose character types such as lowercase, uppercase, numbers and special symbols.
Generate a secure password based on the selected criteria.
Copy the generated password to the clipboard for easy use.

We’ll also ensure the tool is visually appealing and responsive, with clear feedback for user actions.

Setting Up the HTML Structure

The HTML structure is the backbone of our project. It defines the interface elements like input fields, buttons, sliders and checkboxes. Here’s what we’ll include:

<div class="password-generator">
  <h2>Password Generator</h2>
  <div class="password-output">
    <input type="text" id="password" readonly>
    <button class="bi copy-btn"></button>
  </div>

  <label for="length-input">
    <span class="length-val-box">12</span>
    <input type="range" id="length-input" min="4" max="30" value="12">
  </label>

  <div class="options-wrapper">
    <p>Advance Options</p>
    <div class="options">
      <label><input type="checkbox" id="lowercase" checked>Lowercase (a-z)</label>
      <label><input type="checkbox" id="uppercase" checked>Uppercase (A-Z)</label>
      <label><input type="checkbox" id="numbers" checked>Numbers (0-9)</label>
      <label><input type="checkbox" id="special" checked>Special (@#$%...)</label>
    </div>
  </div>
  <button class="generate-btn">Generate Password</button>
</div>

Input Field: Displays the generated password and is set to readonly so users can’t edit it manually.
Range Input: Allows users to select the length of the password.
Checkboxes: Represent different character sets like lowercase, uppercase, numbers and special characters.

Styling with CSS

CSS brings the project to life by making it visually appealing and user-friendly. Here are the key aspects we’ll focus on:

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&display=swap");

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 320px;
  min-height: 100vh;
  background: #151f29;
  font-family: 'Fredoka';
}

.password-generator {
  display: grid;
  width: 450px;
  padding: 20px;
  color: #c8c8c8;
  border-radius: 8px;
  background-color: #191c25;
  box-shadow: -1px -1px 0px 0px #4848485e, inset -1px -1px 0px 0px #00000057;
}

.password-generator h2 {
  text-align: center;
  font-weight: 500;
}

.password-output {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 25px 0 15px;
  padding: 10px 15px;
  border-radius: 8px;
  background-color: #0e0e0e78;
  box-shadow: -1px -1px 0px 0px #3a3a3a5e, inset -1px -1px 0px 0px #00000057;
}

#password {
  width: 100%;
  border: none;
  outline: none;
  font-size: 14px;
  letter-spacing: 1px;
  color: #e9e9e9;
  background-color: transparent;
}

.copy-btn {
  border: none;
  cursor: pointer;
  background: none;
  padding: 5px 10px;
  border-radius: 5px;
  color: #e9e9e9;
}

.copy-btn:hover {
  color: #b4cff4ec;
}

.copy-btn::before {
  content: "\F759";
}

.copy-btn.copied::before {
  content: "\F26D";
  color: #6eaaff;
  font-size: 14px;
}

label[for="length-input"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

label {
  cursor: pointer;
  font-size: 16px;
  padding: 12px 15px;
  border-radius: 5px;
  background-color: #1a1a1a61;
  box-shadow: -1px -1px 0px 0px #3a3a3a5e, inset -1px -1px 0px 0px #00000057;
}

.length-val-box::before {
  content: "Password Length: ";
}

#length-input {
  cursor: pointer;
}

.options-wrapper {
  margin-top: 25px;
}

.options {
  display: grid;
  gap: 12px;
  margin-top: 15px;
  grid-template-columns: repeat(2, 1fr);
}

.password-generator input[type=checkbox] {
  margin-right: 6px;
  vertical-align: middle;
}

.generate-btn {
  border: none;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
  color: #e8e8e8;
  line-height: 40px;
  border-radius: 5px;
  font-family: "Fredoka";
  transition: transform .3s;
  background: #213f69ec;
}

.generate-btn:active {
  transform: scale(0.98);
}

@media (max-width:425px) {
  .options {
    grid-template-columns: 1fr;
  }
}

@media (max-width:375px) {
  label[for="length-input"] {
    flex-direction: row-reverse;
  }

  .length-val-box::before {
    content: "";
  }
}

Layout: Use Flexbox or Grid to arrange the elements neatly.
Color Scheme: Choose a dark theme for a modern look, with contrasting text colors for readability.
Interactive Styles: Add hover effects for buttons and visual feedback for interactions.

Adding Functionality with JavaScript

JavaScript is the core of our password generator. It handles user interactions, generates passwords and ensures the tool works as expected.

const lengthInput = document.querySelector('#length-input'),
  lowercase = document.querySelector('#lowercase'),
  uppercase = document.querySelector('#uppercase'),
  numbers = document.querySelector('#numbers'),
  special = document.querySelector('#special'),
  copyBtn = document.querySelector('.copy-btn'),
  passwordField = document.querySelector('#password'),
  lengthValBox = document.querySelector(".length-val-box"),
  generateBtn = document.querySelector('.generate-btn'),
  checkboxes = [lowercase, uppercase, numbers, special];
let copyBtnTimer;

const mustCheckOne = (e) => {
  const checkedCount = checkboxes.filter(cb => cb.checked).length;
  if (checkedCount === 0) e.currentTarget.checked = true;
}

const generatePassword = () => {
  let password = '', charset = '';
  if (lowercase.checked) charset += 'abcdefghijklmnopqrstuvwxyz';
  if (uppercase.checked) charset += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  if (numbers.checked) charset += '0123456789';
  if (special.checked) charset += '!@#$%^&*()_+[]{}|;:,.<>?';

  for (let i = 0; i < lengthInput.value; i++) {
    password += charset.charAt(Math.floor(Math.random() * charset.length));
  }
  passwordField.value = password;
  clearTimeout(copyBtnTimer);
  copyBtn.classList.remove("copied");
}

const copyPassword = () => {
  passwordField.select();
  navigator.clipboard.writeText(passwordField.value);
  copyBtn.classList.add("copied");
  clearTimeout(copyBtnTimer);
  copyBtnTimer = setTimeout(() => copyBtn.classList.remove("copied"), 1000);
}

checkboxes.forEach(checkbox => checkbox.addEventListener('change', mustCheckOne));
lengthInput.addEventListener("input", () => lengthValBox.textContent = lengthInput.value)
copyBtn.addEventListener('click', copyPassword)
generateBtn.addEventListener('click', generatePassword)
window.onload = generatePassword;

Generate Random Characters: Use character sets like Lowercase, Uppercase, Numbers and Special Characters. Combine the selected character sets into one string and pick random characters to form the password.
Dynamic Password Length: Use the slider input value to determine the number of characters in the password.
Validation: Ensure at least one character set is selected. If all checkboxes are unchecked, recheck the last one automatically to avoid errors.
Copy-to-Clipboard Functionality: Use the navigator.clipboard.writeText API to copy the generated password.
Real-Time Updates: Display the selected password length next to the slider dynamically.

Handling User Interactions

To enhance user experience, we've added the following features:

Visual Feedback: Indicate when the password has been copied with a visual cue (e.g., changing the button's color or icon).
Error Prevention: Automatically manage checkboxes to ensure a valid password can always be generated.
Auto-Generate on Page Load: Generate a password as soon as the page loads, giving users something to start with.

Learning Outcomes

By completing this project, you’ll:

Understand how to manipulate the DOM with JavaScript.
Learn to use advanced input elements like sliders and checkboxes.
Gain experience in designing responsive layouts with CSS.
Explore practical applications of APIs like "navigator.clipboard".
Develop problem-solving skills by implementing validation logic.

Expanding the Tool

To take this project further, consider:

Adding Strength Indicators: Show the strength of the generated password (weak, medium, strong) based on its complexity.
Saving Preferences: Use local storage to remember the user’s settings (e.g., default length and character types).
Customizable Themes: Allow users to switch between light and dark modes.

Also Read: Create Jelly Button using HTML and CSS.

Building this password generator is not only a fun project but also a great way to reinforce your understanding of web development concepts. Dive in experiment and enhance it with your own creative ideas.

Download