Add password strength indicator with dynamic UI updates

Author: Moiz-CodeByte

Day #14 - Password Generator/index.html

@@ -25,6 +25,16 @@ <h1>Password Generator</h1>
             <button id="copyBtn" type="button">Copy</button>
         </div>
 
+        <div class="strength-wrap">
+            <div class="strength-head">
+                <span>Strength</span>
+                <span id="strengthText">Medium</span>
+            </div>
+            <div class="strength-track" aria-hidden="true">
+                <div id="strengthBar" class="strength-bar"></div>
+            </div>
+        </div>
+
         <button id="generateBtn" type="button" class="generate">Generate Password</button>
         <p id="message" aria-live="polite"></p>
     </main>

Day #14 - Password Generator/script.js

@@ -8,6 +8,8 @@ const passwordInput = document.getElementById("password");
 const generateBtn = document.getElementById("generateBtn");
 const copyBtn = document.getElementById("copyBtn");
 const message = document.getElementById("message");
+const strengthText = document.getElementById("strengthText");
+const strengthBar = document.getElementById("strengthBar");
 
 const chars = {
     uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
@@ -27,6 +29,35 @@ function getSelectedPool() {
     return pool;
 }
 
+function getStrengthLevel() {
+    let score = 0;
+    const length = Number(lengthInput.value);
+
+    if (length >= 10) score += 1;
+    if (length >= 14) score += 1;
+    if (uppercaseInput.checked) score += 1;
+    if (lowercaseInput.checked) score += 1;
+    if (numbersInput.checked) score += 1;
+    if (symbolsInput.checked) score += 1;
+
+    if (score <= 2) {
+        return { label: "Weak", width: "33%", color: "#e24a4a" };
+    }
+
+    if (score <= 4) {
+        return { label: "Medium", width: "66%", color: "#f0a500" };
+    }
+
+    return { label: "Strong", width: "100%", color: "#2ea043" };
+}
+
+function updateStrengthUI() {
+    const level = getStrengthLevel();
+    strengthText.textContent = level.label;
+    strengthBar.style.width = level.width;
+    strengthBar.style.backgroundColor = level.color;
+}
+
 function generatePassword() {
     const length = Number(lengthInput.value);
     const pool = getSelectedPool();
@@ -46,10 +77,16 @@ function generatePassword() {
 
     passwordInput.value = result;
     message.textContent = "Password generated.";
+    updateStrengthUI();
 }
 
 lengthInput.addEventListener("input", () => {
     lengthValue.textContent = lengthInput.value;
+    updateStrengthUI();
+});
+
+[uppercaseInput, lowercaseInput, numbersInput, symbolsInput].forEach((input) => {
+    input.addEventListener("change", updateStrengthUI);
 });
 
 generateBtn.addEventListener("click", generatePassword);
@@ -69,3 +106,4 @@ copyBtn.addEventListener("click", async () => {
 });
 
 generatePassword();
+updateStrengthUI();

Day #14 - Password Generator/style.css

@@ -57,6 +57,34 @@ h1 {
     margin-bottom: 14px;
 }
 
+.strength-wrap {
+    margin-bottom: 14px;
+}
+
+.strength-head {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    font-weight: 700;
+    margin-bottom: 6px;
+}
+
+.strength-track {
+    width: 100%;
+    height: 8px;
+    background: #ececec;
+    border-radius: 999px;
+    overflow: hidden;
+}
+
+.strength-bar {
+    height: 100%;
+    width: 50%;
+    border-radius: inherit;
+    transition: width 0.2s ease, background-color 0.2s ease;
+    background: #f0a500;
+}
+
 #password {
     width: 100%;
     padding: 10px;