Make values one-clip copyable

Author: csswizardry

_posts/2024-11-18-core-web-vitals-colours.md

@@ -30,6 +30,7 @@ slides and presentations, here you go:
     .c-cwv-colours__colour {
       flex: 1;
       padding: 1.5rem;
+      cursor: copy;
     }
 
       .c-cwv-colours__title {
@@ -70,6 +71,25 @@ slides and presentations, here you go:
 
 </ul>
 
+<script>
+  (() => {
+    document.querySelectorAll('.c-cwv-colours__colour').forEach(colourElement => {
+      colourElement.title = 'Click to copy hex code';
+      colourElement.addEventListener('click', () => {
+        const valueElement = colourElement.querySelector('.c-cwv-colours__value');
+        const value = valueElement.textContent;
+
+        // Copy the value to the clipboard
+        navigator.clipboard.writeText(value).then(() => {
+          console.log(`Copied to clipboard: ${value}`);
+        }).catch(err => {
+          console.error('Failed to copy text: ', err);
+        });
+      });
+    });
+  })();
+</script>
+
 ## More Colour Formats?
 
 <strong style="color: #09ce6b;">Good</strong>