Merge pull request #8 from ChrisJabb21/PC01

ChrisJabb21 · web-flow · commit e90b84454001 · 2026-06-02T16:33:04.000-04:00
Pc01 Complete first issue and moved other UI feature enchancements to separate task issue action items.
diff --git a/.gitignore b/.gitignore
@@ -74,6 +74,9 @@ web_modules/
 .cache
 .parcel-cache
 
+# MacOS hidden files
+.DS_Store
+
 # Next.js build output
 .next
 out
@@ -137,3 +140,5 @@ dist
 # Vite logs files
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+
diff --git a/images/Screenshot of initial UI JS functionality 2026-06-02 .png b/images/Screenshot of initial UI JS functionality 2026-06-02 .png
diff --git a/index.html b/index.html
@@ -7,14 +7,13 @@
     </head>
     <script type="module" src="js/index.js"></script>
     <body>
-        <h1>Password Generator</h1>
-        <h2>Generate a strong password with just one click!</h2>
-        <div class="main">
+        <h1>PassCraft: Password Generator</h1>
+        <h2>Generate strong passwords with just one click!</h2>
+        <div>
             <div class="btn-wrapper">
-                <button class="btn">Generate Password</button>
+                <button class="btn" id="generateButton">Generate Password</button>
                 <div class="password-wrapper">
-                    <span class="password"></span>
-                    <button class="copy-btn">Copy</button>
+                    <span class="password" id="output"></span>
                 </div>
             </div>
         </div>
diff --git a/js/generate.js b/js/generate.js
@@ -14,7 +14,7 @@ export function generatePassword({
     lowerCase = true,
     upperCase = true,
     digits= true,
-    symbols = false,
+    symbols = true,
     noLookAlikes = true
 }) {
     // The sets object defines the character sets for lowercase letters, uppercase letters, digits, and symbols. Each property of the sets object contains a string of characters that belong to that set.
diff --git a/js/index.js b/js/index.js
@@ -11,7 +11,21 @@ const password = generatePassword({
 const characterSetSize = 26 + 26 + 10 + 24; // lowercase + uppercase + digits + symbols
 const entropy = estimateEntropyBits(20, characterSetSize);
 
+const button = document.getElementById("generateButton");
+const output = document.getElementById("output");
+button.addEventListener("click", () => {
+    const password = generatePassword({
+        length: 20,
+        lowerCase: true,
+        upperCase: true,
+        digits: true,
+        symbols: true,
+    });
+    const characterSetSize = 26 + 26 + 10 + 24; // lowercase + uppercase + digits + symbols
+    const entropy = estimateEntropyBits(20, characterSetSize);
 console.log("Estimated entropy ");
 console.log(`${entropy} bits`);
 console.log("Generated password:");
-console.log(password);
+console.log(password);
+output.textContent = password;
+});
diff --git a/styles.css b/styles.css
@@ -1,39 +1,23 @@
-.main {
-    margin-top: 100px;    
-}
 
-.search-input {
-    display: flexwrap;
+
+.btn-wrapper,.password-wrapper, .password {
+    flex-wrap: wrap;
     max-width: 100%;
     margin: 0;
     margin-left: auto;
     margin-right: auto;
-    line-height: 24px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    padding-left: 30px;
-    padding-right: 30px;
-    border: 1px solid #dfe1e5;
-    border-radius: 24px;
-}
-
-.btn-wrapper {
-    display: flex;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
     justify-content: center;
 }
 
 .btn {
-    margin-left: 4px;
-    margin-right: 4px;
-    margin-top: 30px;
+    margin: auto;
     background: #dfe1e5;
     border: none;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    padding-left: 16px;
-    padding-right: 16px;
     border-radius: 4px;
-    font-size: 14px;
+    box-shadow: 0 0.25rem 0.25rem rgba(60, 64, 67, .3), 0 2px 6px rgba(60, 64, 67, .15);
+    font-size: 0.875rem;
 }
 
 body {
@@ -42,8 +26,11 @@ body {
     width: auto;
     margin-left: auto;
     margin-right: auto;
-    display: flexbox;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
 }
+
 img {
     width: 380px;
     max-width: 100%;
@@ -57,7 +44,8 @@ a {
 }
 
 button, input {
-    display: flexbox;
+    display: flex;
+    flex-wrap: wrap;
     max-width: 100%;
     border-width: 3px;
     border-color: #121212;
