From 7501d551c1898bc298d832a10e5f1f67085f24e8 Mon Sep 17 00:00:00 2001
From: Prince-Bassi <princebassi179@gmail.com>
Date: Thu, 1 Jan 2026 23:21:05 +0530
Subject: [PATCH] Added length input for generating variable length passwords

---
 Password Generator/index.css  | 20 ++++++++++++++++++
 Password Generator/index.html |  6 ++++++
 Password Generator/index.js   | 38 ++++++++++++++++++++++++-----------
 3 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/Password Generator/index.css b/Password Generator/index.css
index b8bbf74..185e8ed 100644
--- a/Password Generator/index.css	
+++ b/Password Generator/index.css	
@@ -26,6 +26,26 @@ body{
     border-radius:.5rem;
 }
 
+#length-input label {
+    font-size: large;
+    font-weight: 500;
+    color: #55F991;
+    margin-right: 1rem;
+}
+
+#length-input input {
+    color: white;
+    background-color: #273549;
+    border: 2px solid black;
+    padding: .5rem;
+    min-width: 5rem;
+    border-radius: .5rem;
+}
+
+#length-input input:focus {
+    outline: none;
+}
+
 hr{
     color: #273549;
     position: absolute;
diff --git a/Password Generator/index.html b/Password Generator/index.html
index 4e75e50..a356f1f 100644
--- a/Password Generator/index.html	
+++ b/Password Generator/index.html	
@@ -12,6 +12,12 @@ <h2 id="headline1">Generate a</h2>
       <h2 id="headline2">random password</h2>
       <p id="line">Never use an insecure password</p>
       <button id="btn">Generate Password</button>
+
+      <div id="length-input">
+        <label for="length-input">Length (6-20):</label>
+        <input type="number" name="length-input" min="6" max="20" />
+      </div>
+      
       <hr />
       <div class="password-container">
         <button id="PassContainer">
diff --git a/Password Generator/index.js b/Password Generator/index.js
index da55d4a..5b122af 100644
--- a/Password Generator/index.js	
+++ b/Password Generator/index.js	
@@ -4,21 +4,28 @@ let body = document.querySelector("body");
 let line = document.querySelector("#line");
 let hr = document.querySelector("hr");
 let headline2 = document.querySelector("#headline2");
+let length_input_label = document.querySelector("#length-input label");
+let length_input = document.querySelector("#length-input input");
 
 mode.addEventListener("change", () => {
   if (mode.checked) {
     headline.style.color = "#000000";
-    body.style.backgroundColor = "#ECFDF5"
-    line.style.color = "#6B7280"
-    hr.style.color = "#E8E7E9"
-    headline2.style.color = "#10B981"
-    
+    body.style.backgroundColor = "#ECFDF5";
+    line.style.color = "#6B7280";
+    hr.style.color = "#E8E7E9";
+    headline2.style.color = "#10B981";
+    length_input_label.style.color = "#000000";
+    length_input.style.color = "#000000";
+    length_input.style.backgroundColor = "#FFFFFF";
     
   } else {
-    headline2.style.color = "#55F991"
+    headline2.style.color = "#55F991";
     headline.style.color = "aliceblue";
-    body.style.backgroundColor = "#1F2937"
-    hr.style.color = "#273549"
+    body.style.backgroundColor = "#1F2937";
+    hr.style.color = "#273549";
+    length_input_label.style.color = "#55F991";
+    length_input.style.color = "#FFFFFF";
+    length_input.style.backgroundColor = "#273549";
   }
 });
 
@@ -40,10 +47,17 @@ const generatePassword = (length) => {
 };
 
 const displayPassword = () => {
-  let dPassword1 = document.querySelector(".Password1");
-  dPassword1.textContent = generatePassword(13);
-  let dPassword2 = document.querySelector(".Password2");
-  dPassword2.textContent = generatePassword(12);
+  let password_length = length_input.value;
+
+  if (password_length <= +length_input.max && password_length >= +length_input.min) { //Converting max, min to Number with +
+    let dPassword1 = document.querySelector(".Password1");
+    dPassword1.textContent = generatePassword(password_length);
+    let dPassword2 = document.querySelector(".Password2");
+    dPassword2.textContent = generatePassword(password_length);
+  }
+  else {
+    alert("Password length out of range (6 - 20)");
+  }
 };
 
 document.getElementById("btn").addEventListener("click", displayPassword);