Enhance password generator user experience

Password Generator/index.css

@@ -133,4 +133,72 @@ input:checked + .slider:before {
 
 .slider.round:before{
     border-radius: 50%;
+}
+
+.length-container {
+  margin: 20px 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.length-container label {
+  font-weight: bold;
+}
+
+.length-container input {
+  width: 70px;
+  padding: 6px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+.theme-container{
+    display:flex;
+    align-items:center;
+    gap:12px;
+    margin-top:20px;
+}
+
+.theme-text{
+    color:white;
+    font-size:16px;
+    font-weight:600;
+}
+.password-box{
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+
+    margin-top:1.5em;
+    margin-right:2em;
+
+    width:17em;
+    min-height:3em;
+
+    padding:10px 15px;
+
+    border-radius:.5rem;
+
+    background:#273549;
+
+    border:2px solid #000;
+}
+
+.copy-btn{
+    background:#10B981;
+    color:white;
+
+    border:none;
+
+    border-radius:5px;
+
+    padding:6px 10px;
+
+    cursor:pointer;
+
+    font-size:12px;
+}
+
+.copy-btn:hover{
+    background:#0ea371;
 }

Password Generator/index.html

@@ -11,18 +11,40 @@
       <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 class="length-container">
+  <label for="passwordLength">Password Length:</label>
+  <input
+    type="number"
+    id="passwordLength"
+    min="4"
+    max="32"
+    value="12"
+  />
+</div>
+
+<button id="btn">Generate Password</button>
+
       <hr />
       <div class="password-container">
-        <button id="PassContainer">
-          <p class="Password1"></p>
-        <button id="PassContainer">
-          <p class="Password2"></p>
+        <div class="password-box">
+    <p class="Password1"></p>
+    <button id="copyBtn1" class="copy-btn">📋 Copy</button>
+  </div>
+
+  <div class="password-box">
+    <p class="Password2"></p>
+    <button id="copyBtn2" class="copy-btn">📋 Copy</button>
+  </div>
       </div>
-      <label class="switch" for="modeChanger">
+      <div class="theme-container">
+    <span class="theme-text">Theme</span>
+
+    <label class="switch" for="modeChanger">
         <input type="checkbox" id="modeChanger">
         <span class="slider round"></span>
-      </label>
+    </label>
+</div>
+
 
     </div>
   </body>

Password Generator/index.js

@@ -40,10 +40,43 @@ const generatePassword = (length) => {
 };
 
 const displayPassword = () => {
+  const lengthInput = document.getElementById("passwordLength");
+  let length = parseInt(lengthInput.value, 10);
+
+  // Validation
+  if (isNaN(length) || length < 4) {
+    length = 4;
+  } else if (length > 32) {
+    length = 32;
+  }
+
   let dPassword1 = document.querySelector(".Password1");
-  dPassword1.textContent = generatePassword(13);
   let dPassword2 = document.querySelector(".Password2");
-  dPassword2.textContent = generatePassword(12);
+
+  dPassword1.textContent = generatePassword(length);
+  dPassword2.textContent = generatePassword(length);
 };
 
 document.getElementById("btn").addEventListener("click", displayPassword);
+
+const copyPassword = (selector) => {
+
+  const text = document.querySelector(selector).textContent;
+
+  if (!text) {
+    alert("Generate a password first!");
+    return;
+  }
+
+  navigator.clipboard.writeText(text);
+
+  alert("Password copied!");
+};
+
+document
+  .getElementById("copyBtn1")
+  .addEventListener("click", () => copyPassword(".Password1"));
+
+document
+  .getElementById("copyBtn2")
+  .addEventListener("click", () => copyPassword(".Password2"));