chore: updated copy on c button

helloarman · Oct 8, 2024 · 32eeeff · 32eeeff
1 parent edd7dc4
commit 32eeeff
Showing 1 changed file with 25 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -27,21 +28,23 @@
             font-size: 18px;
             font-weight: bold;
             cursor: pointer;
-            color: #218947; /* default color */
+            color: #218947;
+            /* default color */
         }
 
         .copied {
             color: green;
         }
     </style>
 </head>
+
 <body>
     <div class="container">
         <h2>Pixel to VW Converter</h2>
         <label for="pixelInput">Enter value in pixels:</label>
         <input type="number" id="pixelInput" placeholder="Enter pixels" />
         <p class="output">
-            Output: 
+            Output:
             <span id="clampOutput" title="Click to copy">clamp(7px, 0.53vw, 10px)</span>
         </p>
     </div>
@@ -51,7 +54,7 @@ <h2>Pixel to VW Converter</h2>
         const outputField = document.getElementById('clampOutput');
         const viewportWidth = 1903; // default viewport width
 
-        inputField.addEventListener('input', function() {
+        function updateOutput() {
             let pixelValue = parseFloat(inputField.value);
             if (!isNaN(pixelValue)) {
                 let lowerBound = Math.max(0, pixelValue - 3);  // reducing 3 from the input
@@ -60,27 +63,34 @@ <h2>Pixel to VW Converter</h2>
             } else {
                 outputField.textContent = 'clamp(7px, 0.53vw, 10px)';  // default example output
             }
-        });
+        }
 
-        outputField.addEventListener('click', function() {
+        function copyToClipboard() {
             const clampText = outputField.textContent;
             navigator.clipboard.writeText(clampText).then(() => {
                 outputField.classList.add('copied');  // Change color to indicate successful copy
                 outputField.textContent = "Copied!";
-                
+
                 setTimeout(() => {
                     outputField.classList.remove('copied');
-                    let pixelValue = parseFloat(inputField.value);
-                    if (!isNaN(pixelValue)) {
-                        let lowerBound = Math.max(0, pixelValue - 3);  
-                        let vwValue = (pixelValue / viewportWidth) * 100;
-                        outputField.textContent = `clamp(${lowerBound}px, ${vwValue.toFixed(2)}vw, ${pixelValue}px)`;
-                    } else {
-                        outputField.textContent = 'clamp(7px, 0.53vw, 10px)';  // default
-                    }
+                    updateOutput();  // Revert to the current clamp output
                 }, 2000);  // Revert back after 2 seconds
             });
+        }
+
+        // Update the clamp output when input changes
+        inputField.addEventListener('input', updateOutput);
+
+        // Copy to clipboard on output click
+        outputField.addEventListener('click', copyToClipboard);
+
+        // Add keydown event listener for "C" key shortcut
+        document.addEventListener('keydown', function (event) {
+            if (event.key === 'c' || event.key === 'C') {
+                copyToClipboard();
+            }
         });
     </script>
 </body>
-</html>
+
+</html>