Clean up code

Carlgo11 · Oct 23, 2023 · 40f4eef · 40f4eef
1 parent d5dac4b
commit 40f4eef
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 78 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+.*
+!.gitignore
+package-lock.json
+package.json
+node_modules
diff --git a/css/main.css b/css/main.css
@@ -43,14 +43,11 @@ main {
     border: 1px solid #dfe1e5;
 }
 
-#password:hover {
-    box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
-}
-
 #password-container {
     opacity: 0;
     transition: visibility 0s, opacity 0.5s;
 }
+
 #pass-inner {
     display: grid;
     grid-template-columns: auto 36px;
@@ -68,14 +65,22 @@ label[for=password] {
     margin-bottom: .5rem;
 }
 
-#password-button {
+#copy {
     height: 100%;
     aspect-ratio: 1;
-    color: currentColor;
     background: #24933f;
     border: none;
 }
 
+#copy > svg {
+    height: 1.2em;
+    fill: #fff;
+}
+
+button {
+    border-color: transparent;
+}
+
 button:active {
     opacity: .8;
 }
@@ -119,16 +124,12 @@ body {
         color: unset;
     }
 
-    * {
-        border-color: transparent;
-    }
     #password {
         border: 0 !important;
         background-color: #444;
     }
 
     #password:hover {
-        box-shadow: none !important;
         background-color: #494949;
     }
 }
@@ -176,6 +177,7 @@ a {
         text-align: center;
     }
 }
+
 @media only screen and (max-height: 700px) {
     footer {
         display: none;

diff --git a/index.html b/index.html
@@ -6,24 +6,21 @@
     <meta name="description" content="Generate a Carl Password.">
     <meta name="author" content="Carlgo11">
     <meta name="theme-color" content="#24933F">
-    <link rel="apple-touch-icon" href="./img/apple/apple-touch-icon-64px.png" sizes="64x64">
-    <link rel="apple-touch-icon" href="./img/apple/apple-touch-icon-128px.png" sizes="128x128">
-    <link rel="apple-touch-icon" href="./img/apple/apple-touch-icon-256px.png" sizes="256x256">
-    <link rel="icon" href="./img/favicon.png" sizes="16x16" type="image/png">
-    <link rel="icon" href="./img/favicon.svg" sizes="any" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="img/apple/apple-touch-icon-64px.png" sizes="64x64">
+    <link rel="apple-touch-icon" href="img/apple/apple-touch-icon-128px.png" sizes="128x128">
+    <link rel="apple-touch-icon" href="img/apple/apple-touch-icon-256px.png" sizes="256x256">
+    <link rel="icon" href="img/favicon.png" sizes="16x16" type="image/png">
+    <link rel="icon" href="img/favicon.svg" sizes="any" type="image/svg+xml">
     <link rel="manifest" href="manifest.json">
-    <link rel="stylesheet" href="./css/main.css">
+    <link rel="stylesheet" href="css/main.css">
     <title>Carl Passwords</title>
 </head>
 <body>
-
 <h1 id="title">Need a Carl Password?</h1>
 
 <main>
-
     <!-- Options -->
     <div class="options">
-
         <div>
             <input checked="" id="l" type="checkbox">
             <label class="form-check-label" for="l">Lowercase letters</label>
@@ -69,11 +66,7 @@ <h1 id="title">Need a Carl Password?</h1>
             <!-- Password field -->
             <input id="password" type="text">
             <!-- Copy button -->
-            <button id="password-button">
-                  <svg height="16" fill="currentColor" viewBox="0 0 16 16">
-                    <path d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2Zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6ZM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1H2Z"/>
-                  </svg>
-              </button>
+            <button id="copy"><svg viewBox="0 0 16 16"><path d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2Zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6ZM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1H2Z"/></svg></button>
         </div>
     </div>
 </main>
@@ -82,6 +75,6 @@ <h1 id="title">Need a Carl Password?</h1>
     Created by <a href="https://carlgo11.com/">Carlgo11</a>
 </footer>
 
-<script src="./js/main.js"></script>
+<script src="js/main.js"></script>
 </body>
 </html>
diff --git a/js/main.js b/js/main.js
@@ -7,41 +7,34 @@ document.querySelectorAll('input[type=number]').forEach(el => {
 document.querySelectorAll('input[type=checkbox]').forEach(el => {
     el.onchange = () => localStorage.setItem(el.id, el.checked);
     const v = localStorage.getItem(el.id)
-    if (v === 'true') el.checked = true;
-    else if (v === 'false') el.checked = false;
+    if (v === 'true') el.checked = true; else if (v === 'false') el.checked = false;
 })
 
 document.addEventListener("DOMContentLoaded", () => {
     if ('serviceWorker' in navigator) navigator.serviceWorker.register('service-worker.js');
 });
 
 document.getElementById('generate').addEventListener('click', () => {
-    let pass = '';
-    const a = getAvailableChars();
+    const availableChars = getAvailableChars();
+    const maxLength = document.getElementById('length').value;
+    let password = '';
 
-    for (let i = 0; i < document.getElementById('length').value; i++) {
+    for (let i = 0; i < maxLength; i++) {
+        const typeIndex = getRandomInt(0, availableChars.length - 1);
+        const [min, max] = getRandomRange(availableChars[typeIndex]);
+        password += String.fromCharCode(getRandomInt(min, max));
+    }
 
-        const type = getRandomInt(0, a.length - 1);
-        let min;
-        let max;
-        /* Check if a is 2D array */
-        if (a[type][0] !== undefined && a[type][0].constructor === Array) {
-            const charRange = getRandomInt(0, a[type].length - 1);
-            min = a[type][charRange][0];
-            max = a[type][charRange][1];
-        } else {
-            min = a[type][0];
-            max = a[type][1];
-        }
-        pass += String.fromCharCode(getRandomInt(min, max));
+    document.getElementById('password').value = password;
+    document.getElementById('pass-inner').style.gridTemplateColumns = `min(${password.length}ch, calc(100% - 36px)) 36px`;
+
+    const passwordContainer = document.getElementById('password-container');
+    if (passwordContainer.style.opacity !== '1') {
+        passwordContainer.style.opacity = '1';
     }
-    document.getElementById('password').value = pass;
-    document.getElementById('pass-inner').style.gridTemplateColumns = `min(${pass.length}ch, calc(100% - 36px)) 36px`
-    const passwordDiv = document.getElementById('password-container');
-    if (passwordDiv.style.opacity !== '1') passwordDiv.style.opacity = '1';
 });
 
-document.getElementById('password-button').addEventListener('click', async () => {
+document.getElementById('copy').addEventListener('click', async () => {
     try {
         const passwordInput = document.getElementById('password');
         await navigator.clipboard.writeText(passwordInput.value);
@@ -51,39 +44,31 @@ document.getElementById('password-button').addEventListener('click', async () =>
     }
 });
 
+const getRandomRange = (range) => {
+    if (range[0] !== undefined && range[0].constructor === Array) {
+        const randomIndex = getRandomInt(0, range.length - 1);
+        return [range[randomIndex][0], range[randomIndex][1]];
+    } else {
+        return [range[0], range[1]];
+    }
+};
 
 const getRandomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
 
 const getAvailableChars = () => {
+    const charRanges = {
+        d: [48, 57], // Numbers
+        u: [65, 90], // Uppercase letters
+        l: [97, 122], // Lowercase letters
+        un: [[42128, 44031], [55216, 129647], [192, 8587], [42240, 42539]], // Unicode characters
+        s: [[33, 47], [58, 64], [91, 96], [123, 126]], // Special characters
+        sp: [32, 32] // Space
+    };
     let a = [];
-    /* Numbers */
-    if (document.getElementById('d').checked) {
-        a.push([48, 57]);
-    }
-
-    /* Uppercase letters */
-    if (document.getElementById('u').checked) {
-        a.push([65, 90]);
-    }
-
-    /* Lowercase letters */
-    if (document.getElementById('l').checked) {
-        a.push([97, 122]);
-    }
-
-    /* Unicode characters */
-    if (document.getElementById('un').checked) {
-        a.push([[42128, 44031], [55216, 129647], [192, 8587], [42240, 42539]]);
-    }
-
-    /* Special characters */
-    if (document.getElementById('s').checked) {
-        a.push([[33, 47], [58, 64], [91, 96], [123, 126]]);
-    }
-
-    /* Space */
-    if (document.getElementById('sp').checked) {
-        a.push([32, 32]);
+    for (const key in charRanges) {
+        if (document.getElementById(key).checked) {
+            a.push(charRanges[key]);
+        }
     }
     return a;
-}
+};
diff --git a/manifest.json b/manifest.json
@@ -4,7 +4,7 @@
   "description": "Generate a Carl Password.",
   "version": "0.1",
   "display": "standalone",
-  "theme_color": "#5CB85C",
+  "theme_color": "#24933F",
   "manifest_version": 2,
   "start_url": "./",
   "background_color": "#FFFFFF",