PasswordGenerator/script.js at main · cjpanda/PasswordGenerator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
const passwordText = document.getElementById("passwordText");
const characterNumber = document.getElementById("characterNumber");
const passwordLengthInput = document.getElementById("passwordLength");
const includeUppercaseCheckbox = document.getElementById("includeUppercase");
const includeLowercaseCheckbox = document.getElementById("includeLowercase");
const includeNumbersCheckbox = document.getElementById("includeNumbers");
const includeSymbolsCheckbox = document.getElementById("includeSymbols");
const generatePasswordButton = document.getElementById(
  "generatePasswordButton"
);

const passwordStrength = document.getElementById("passwordStrength");
const passwordStrengthBox1 = document.getElementById("passwordStrengthBox1");
const passwordStrengthBox2 = document.getElementById("passwordStrengthBox2");
const passwordStrengthBox3 = document.getElementById("passwordStrengthBox3");
const passwordStrengthBox4 = document.getElementById("passwordStrengthBox4");
const errorMessageChars = document.getElementById("errorMessageChars");
const errorMessageCheckbox = document.getElementById("errorMessageCheckbox");
const copyImage = document.getElementById("copyImage");

copyImage.addEventListener("click", () => {
  const passwordText = document.getElementById("passwordText");
  const generatedPassword = passwordText.textContent;

  navigator.clipboard
    .writeText(generatedPassword)
    .then(() => {
      // Password copied successfully
      console.log("Password copied to clipboard:", generatedPassword);
      window.alert("Password copied to clipboard,");
    })
    .catch((error) => {
      // Unable to copy password
      console.error("Failed to copy password:", error);
      window.alert("Failed to copy password");
    });
});

function generatePassword() {
  const length = parseInt(passwordLengthInput.value);
  const includeUppercase = includeUppercaseCheckbox.checked;
  const includeLowercase = includeLowercaseCheckbox.checked;
  const includeNumbers = includeNumbersCheckbox.checked;
  const includeSymbols = includeSymbolsCheckbox.checked;

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

  let allowedChars = "";
  let generatedPassword = "";
  if (includeUppercase) allowedChars += uppercaseChars;
  if (includeLowercase) allowedChars += lowercaseChars;
  if (includeNumbers) allowedChars += numberChars;
  if (includeSymbols) allowedChars += symbolChars;

  // Calculate password strength
  let strength = "";
  if (length >= 0 && length <= 4) {
    strength = "Weak";
  } else if (length > 4 && length <= 8) {
    strength = "Medium";
  } else {
    strength = "Strong";
  }
  // Update password strength text
  passwordStrength.textContent = strength;
  // Update password strength boxes based on strength level
  switch (strength) {
    case "Weak":
      passwordStrengthBox1.style.backgroundColor = "red";
      passwordStrengthBox2.style.backgroundColor = "transparent";
      passwordStrengthBox3.style.backgroundColor = "transparent";
      passwordStrengthBox4.style.backgroundColor = "transparent";

      passwordStrengthBox1.style.border = "2px solid transparent";
      passwordStrengthBox2.style.border = "2px solid var(--text-color)";
      passwordStrengthBox3.style.border = "2px solid var(--text-color)";
      passwordStrengthBox4.style.border = "2px solid var(--text-color)";
      break;
    case "Medium":
      passwordStrengthBox1.style.backgroundColor = "orange";
      passwordStrengthBox2.style.backgroundColor = "orange";
      passwordStrengthBox3.style.backgroundColor = "transparent";
      passwordStrengthBox4.style.backgroundColor = "transparent";

      passwordStrengthBox1.style.border = "2px solid orange";
      passwordStrengthBox2.style.border = "2px solid orange";
      passwordStrengthBox3.style.border = "2px solid var(--text-color)";
      passwordStrengthBox4.style.border = "2px solid var(--text-color)";
      break;
    case "Strong":
      passwordStrengthBox1.style.backgroundColor = "green";
      passwordStrengthBox2.style.backgroundColor = "green";
      passwordStrengthBox3.style.backgroundColor = "green";
      passwordStrengthBox4.style.backgroundColor = "green";

      passwordStrengthBox1.style.border = "2px solid green";
      passwordStrengthBox2.style.border = "2px solid green";
      passwordStrengthBox3.style.border = "2px solid green";
      passwordStrengthBox4.style.border = "2px solid green";
      break;
    default:
      passwordStrengthBox1.style.backgroundColor = "transparent";
      passwordStrengthBox2.style.backgroundColor = "transparent";
      passwordStrengthBox3.style.backgroundColor = "transparent";
      passwordStrengthBox4.style.backgroundColor = "transparent";
  }

  if (length <= 0) {
    errorMessageChars.textContent = "Password cant be less than 0 characters";
  } else {
    errorMessageChars.textContent = "";
  }

  if (
    !includeUppercase &&
    !includeLowercase &&
    !includeNumbers &&
    !includeSymbols
  ) {
    errorMessageCheckbox.textContent =
      "At least 1 set of characters must be selected";
    return; // Exit the function early if no checkbox is checked
  } else {
    errorMessageCheckbox.textContent = "";
  }

  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * allowedChars.length);
    generatedPassword += allowedChars[randomIndex];
  }

  passwordText.textContent = generatedPassword;
}

function updateCharacterNumber() {
  characterNumber.textContent = passwordLengthInput.value;
}

generatePasswordButton.addEventListener("click", generatePassword);
passwordLengthInput.addEventListener("input", updateCharacterNumber);

// Initial update of character number display
updateCharacterNumber();
generatePassword();