Password Generator

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Password Generator</title>
<style>
body {
  font-family: Arial, sans-serif;
  background: #1e1e1e;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background: #2c2c2c;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  text-align: center;
}

.password-box {
  display: flex;
  margin-bottom: 10px;
}

.password-box input {
  flex: 1;
  padding: 8px;
  font-size: 16px;
  border: none;
  border-radius: 4px 0 0 4px;
}

.password-box button {
  padding: 8px;
  border: none;
  background: #ffc107;
margin-top:-0px;
  color: #000;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.slider-container {
  margin: 15px 0;
}

input[type="range"] {
  width: 100%;
}

.settings label {
  display: block;
  margin: 5px 0;
  text-align: left;
  font-size: 14px;
}

button {
  background: #ffcc00;
  padding: 10px;
  width: 100%;
  border: none;
  margin-top: 15px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 6px;
}
</style>
</head>
<body>
  <div class="container">
    <h2>Password Generator</h2>
    <div class="password-box">
      <input type="text" id="password" readonly>
      <button onclick="copyPassword()">📋</button>
    </div>

    <div class="slider-container">
      <label>Password Length</label>
      <input type="range" id="lengthSlider" min="4" max="32" value="15" oninput="updateLength()">
      <span id="lengthValue">15</span>
    </div>

    <div class="settings">
      <label><input type="checkbox" id="lowercase" checked> Lowercase (a-z)</label>
      <label><input type="checkbox" id="uppercase"> Uppercase (A-Z)</label>
      <label><input type="checkbox" id="numbers"> Numbers (0-9)</label>
      <label><input type="checkbox" id="symbols"> Symbols ($+^)</label>
      <label><input type="checkbox" id="excludeDuplicate"> Exclude Duplicate</label>
      <label><input type="checkbox" id="includeSpaces"> Include Spaces</label>
    </div>

    <button onclick="generatePassword()">Generate Password</button>
  </div>

  <script>
function updateLength() {
  document.getElementById('lengthValue').innerText = document.getElementById('lengthSlider').value;
}

function copyPassword() {
  const password = document.getElementById("password");
  password.select();
  document.execCommand("copy");
  alert("Password copied!");
}

function generatePassword() {
  const length = +document.getElementById('lengthSlider').value;
  const lowercase = document.getElementById('lowercase').checked;
  const uppercase = document.getElementById('uppercase').checked;
  const numbers = document.getElementById('numbers').checked;
  const symbols = document.getElementById('symbols').checked;
  const excludeDuplicate = document.getElementById('excludeDuplicate').checked;
  const includeSpaces = document.getElementById('includeSpaces').checked;

  const lowerSet = 'abcdefghijklmnopqrstuvwxyz';
  const upperSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  const numberSet = '0123456789';
  const symbolSet = '~!@#$%^&*()_+{}|:<>?';
  const space = '   ';

  let chars = '';
  if (lowercase) chars += lowerSet;
  if (uppercase) chars += upperSet;
  if (numbers) chars += numberSet;
  if (symbols) chars += symbolSet;
  if (includeSpaces) chars += space;

  let password = '';
  let usedChars = new Set();

  for (let i = 0; i < length; i++) {
    let char = chars[Math.floor(Math.random() * chars.length)];
    if (excludeDuplicate) {
      while (usedChars.has(char) && usedChars.size < chars.length) {
        char = chars[Math.floor(Math.random() * chars.length)];
      }
      usedChars.add(char);
    }
    password += char;
  }

  document.getElementById("password").value = password || 'Enable options';
}

</script>
</body>
</html>
HTMLify

Share this file:

Comments
