From 32eeeff4f13165203ca7e7f802b7d679ed8cd42e Mon Sep 17 00:00:00 2001 From: Arman Rahman Date: Tue, 8 Oct 2024 19:38:48 +0600 Subject: [PATCH] chore: updated copy on c button --- index.html | 40 +++++++++++++++++++++++++--------------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index c611fae..33c98d3 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -27,7 +28,8 @@ font-size: 18px; font-weight: bold; cursor: pointer; - color: #218947; /* default color */ + color: #218947; + /* default color */ } .copied { @@ -35,13 +37,14 @@ } +

Pixel to VW Converter

- Output: + Output: clamp(7px, 0.53vw, 10px)

@@ -51,7 +54,7 @@

Pixel to VW Converter

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 @@

Pixel to VW Converter

} 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(); + } }); - + + \ No newline at end of file