Auto-generate password on slider input and replace 'Generate' button …

…with 'Copy' functionality
CyberSphinxxx · Oct 11, 2024 · 9f46762 · 9f46762
1 parent 204f184
commit 9f46762
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -14,14 +14,13 @@ <h1 id="projectName">Password Sentinel</h1>
         <h1>Generate Your Password</h1>
         <div class="password-container">
             <input type="text" id="password" readonly>
-            <button id="generateBtn">Generate Password</button>
+            <button id="copyBtn">Copy Password</button>
         </div>
 
         <div class="controls">
-            <label>Password length:
-                <input type="range" id="lengthSlider" min="6" max="30" value="12" oninput="updateLength()">
-                <span id="lengthValue">12</span>
-            </label>
+            <label for="passwordLength">Password length: </label>
+            <input type="range" id="passwordLength" min="6" max="30" value="12">
+            <span id="lengthValue">12</span>
 
             <div class="checkboxes">
                 <label><input type="checkbox" id="includeUppercase" checked> Uppercase</label>

diff --git a/scripts.js b/scripts.js
@@ -1,6 +1,6 @@
 const passwordField     = document.getElementById('password');
-const generateBtn       = document.getElementById('generateBtn');
-const lengthSlider      = document.getElementById('lengthSlider');
+const copyBtn           = document.getElementById('copyBtn');
+const lengthSlider      = document.getElementById('passwordLength');
 const lengthValue       = document.getElementById('lengthValue');
 const strengthIndicator = document.getElementById('strengthIndicator');
 const strengthImage     = document.getElementById('strengthImage');
@@ -10,54 +10,81 @@ const includeLowercase  = document.getElementById('includeLowercase');
 const includeNumbers    = document.getElementById('includeNumbers');
 const includeSymbols    = document.getElementById('includeSymbols');
 
+// Character sets for generating password
 const UPPERCASE = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 const LOWERCASE = 'abcdefghijklmnopqrstuvwxyz';
 const NUMBERS   = '0123456789';
 const SYMBOLS   = '!@#$%^&*()_+-=[]{}|;:,.<>?';
 
-generateBtn.addEventListener('click', generatePassword);
+// Event listener for the password length slider (automatically generates password)
+lengthSlider.addEventListener('input', function() {
+    updateLength();
+    generatePassword(); // Automatically generates password when the slider is moved
+});
 
+// Event listener for copying password to clipboard
+copyBtn.addEventListener('click', function() {
+    passwordField.select();
+    document.execCommand('copy');
+    alert('Password copied to clipboard!'); // Notification when password is copied
+});
+
+// Function to generate random password
 function generatePassword() {
-    let length = parseInt(lengthSlider.value);
+    const length = lengthSlider.value;
+    const includeUppercaseChecked = includeUppercase.checked;
+    const includeLowercaseChecked = includeLowercase.checked;
+    const includeNumbersChecked = includeNumbers.checked;
+    const includeSymbolsChecked = includeSymbols.checked;
+
     let charSet = '';
-    if (includeUppercase.checked) charSet += UPPERCASE;
-    if (includeLowercase.checked) charSet += LOWERCASE;
-    if (includeNumbers.checked) charSet += NUMBERS;
-    if (includeSymbols.checked) charSet += SYMBOLS;
+    if (includeUppercaseChecked) charSet += UPPERCASE;
+    if (includeLowercaseChecked) charSet += LOWERCASE;
+    if (includeNumbersChecked) charSet += NUMBERS;
+    if (includeSymbolsChecked) charSet += SYMBOLS;
 
     let password = '';
     for (let i = 0; i < length; i++) {
         password += charSet.charAt(Math.floor(Math.random() * charSet.length));
     }
 
     passwordField.value = password;
-    evaluateStrength(password);
+    evaluateStrength(password); // Update the password strength
 }
 
+// Function to update the length displayed next to the slider
 function updateLength() {
     lengthValue.textContent = lengthSlider.value;
 }
 
+// Function to evaluate the strength of the password and update the UI
 function evaluateStrength(password) {
     let strength = 0;
-    if (password.length >= 8) strength++;
+
+    if (password.length >= 8)   strength++;
     if (/[A-Z]/.test(password)) strength++;
     if (/[a-z]/.test(password)) strength++;
-    if (/\d/.test(password)) strength++;
+    if (/\d/.test(password))    strength++;
     if (/[^A-Za-z0-9]/.test(password)) strength++;
 
+    // Update strength indicator and image based on strength level
     if (strength <= 2) {
         strengthIndicator.textContent = 'Password Strength: Weak';
         strengthImage.src = 'images/weak.png';
     }
-    
-    else if (strength === 3 || strength === 4) {
+
+    else if (strength === 3 || 4) {
         strengthIndicator.textContent = 'Password Strength: Medium';
         strengthImage.src = 'images/medium.png';
     }
-    
+
     else {
         strengthIndicator.textContent = 'Password Strength: Strong';
         strengthImage.src = 'images/strong.png';
     }
 }
+
+window.onload = function() {
+    updateLength();
+    generatePassword();
+};
diff --git a/styles.css b/styles.css
@@ -35,10 +35,11 @@ body {
     font-size: 14px;
 }
 
-#generateBtn {
-    width: 100%;
+#copyBtn {
+    width: 75%;
     padding: 10px;
     font-size: 14px;
+    cursor: pointer;
 }
 
 .controls {