From 406c74b91feb0718e96108be974102616e866930 Mon Sep 17 00:00:00 2001
From: Balogun Muhammed <oluwashemilore24434@gmail.com>
Date: Wed, 15 Apr 2026 22:12:06 +0100
Subject: [PATCH] Feature: Added password length

---
 Password Generator/index.css  |  4 +++-
 Password Generator/index.html |  6 ++++++
 Password Generator/index.js   | 26 +++++++++++++-------------
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/Password Generator/index.css b/Password Generator/index.css
index b8bbf74..544f12e 100644
--- a/Password Generator/index.css	
+++ b/Password Generator/index.css	
@@ -3,7 +3,9 @@ body{
     font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     background-color: #1F2937;
 }
-
+#password{
+    color: white;
+}
 .container{
     margin-left: 20%;
     margin-right: 10%;
diff --git a/Password Generator/index.html b/Password Generator/index.html
index 4e75e50..33c5005 100644
--- a/Password Generator/index.html	
+++ b/Password Generator/index.html	
@@ -11,6 +11,12 @@
       <h2 id="headline1">Generate a</h2>
       <h2 id="headline2">random password</h2>
       <p id="line">Never use an insecure password</p>
+
+      <!-- New input field for password length -->
+       <div><label for="password" id="password">Password Length</label><br>
+      <input type="number" placeholder="e.g 12" id="passlen"></div>
+      
+
       <button id="btn">Generate Password</button>
       <hr />
       <div class="password-container">
diff --git a/Password Generator/index.js b/Password Generator/index.js
index da55d4a..04d956e 100644
--- a/Password Generator/index.js	
+++ b/Password Generator/index.js	
@@ -3,26 +3,25 @@ let headline = document.getElementById("headline1");
 let body = document.querySelector("body");
 let line = document.querySelector("#line");
 let hr = document.querySelector("hr");
-let headline2 = document.querySelector("#headline2");
+let password = document.querySelector("#password");
 
 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";
+    password.style.color = "#000000";
   } 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";
+    password.style.color = "#E8E7E9";
   }
 });
 
-
 const lowercaseChars = "abcdefghijklmnopqrstuvwxyz";
 const uppercaseChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
 const numberChars = "0123456789";
@@ -40,10 +39,11 @@ const generatePassword = (length) => {
 };
 
 const displayPassword = () => {
+  let number = Number(document.getElementById("passlen").value);
   let dPassword1 = document.querySelector(".Password1");
-  dPassword1.textContent = generatePassword(13);
+  dPassword1.textContent = generatePassword(number);
   let dPassword2 = document.querySelector(".Password2");
-  dPassword2.textContent = generatePassword(12);
+  dPassword2.textContent = generatePassword(number);
 };
 
 document.getElementById("btn").addEventListener("click", displayPassword);