add copy password functionality and improve button layout

Signed-off-by: TBS96 <9tbs6@proton.me>

Author: TBS96

index.html

@@ -12,7 +12,10 @@
 
         <h1>Password Strength Checker</h1>
 
-        <button class="passGenBtn">Generate Password</button>
+        <div class="btns">
+            <button class="passGenBtn">Generate Password</button>
+            <button id="copyBtn"></button>
+        </div>
 
         <div id="password"></div>
 

js/script.js

@@ -1,4 +1,6 @@
 const passGenBtn = document.querySelector('.passGenBtn');
+const passwordShow = document.getElementById('password');
+const copyBtn = document.getElementById('copyBtn');
 
 const generatePassword = passGenBtn.addEventListener('click', () => {
     const lengthNum = 12;
@@ -12,7 +14,6 @@ const generatePassword = passGenBtn.addEventListener('click', () => {
         console.log(randomIndex, password, i);
     }
 
-    const passwordShow = document.getElementById('password');
     passwordShow.textContent = password;
 
     checkStrength(password);
@@ -47,6 +48,30 @@ const changeBgColor = (strength) => {
     document.body.style.backgroundColor = bgColors[strength - 1] || '#ffd4d4';
 };
 
+copyBtn.innerText = '📋';
+
+copyBtn.addEventListener('click', async () => {
+    if (!passwordShow.textContent) {
+        alert('No password to copy!');
+        return;
+    }
+
+    try {
+        await navigator.clipboard.writeText(passwordShow.textContent);
+        passwordShow.style.backgroundColor = 'lightgreen';
+        setTimeout(() => {
+            passwordShow.style.backgroundColor = 'transparent';
+        }, 2000);
+        copyBtn.innerText = '✔️';
+
+        setTimeout(() => {
+            copyBtn.innerText = '📋';
+        }, 2000);
+    }
+    catch (err) {
+        console.error(`Failed to copy: ${err}`);
+    }
+})
 
 
 

styles/style.css

@@ -10,13 +10,20 @@ body {
     border: 5px solid green;
     background-color: cornsilk;
 }
+.btns {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
 
 .passGenBtn {
     padding: 10px 20px;
     background-color: green;
     color: white;
     font-size: 18px;
     border: none;
+    border-radius: 5px;
     cursor: pointer;
     transition: 0.5s ease;
 }
@@ -40,4 +47,23 @@ body {
     margin-top: 20px;
     font-size: 1.2em;
     font-weight: bold;
+}
+
+#copyBtn {
+    padding: 10px 20px;
+    background-color: rgb(40, 40, 168);
+    font-size: 18px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: 0.5s ease;
+}
+
+#copyBtn:hover {
+    background-color: rgba(40, 40, 168, 0.87);
+}
+
+#copyBtn:active {
+    background-color: rgb(94, 224, 94);
+    transform: translateX(12px);
 }