Adding Copy Buttons with Bitty

Hitting a Single Bitty has a .quickCopy() method. It does two things: Copies the content of the target element. Updates the text of the Copy button to say "Copied" for two seconds then reverts it. For example: content.html<bitty-9 data-connect="/blog/01/n6/6r/q5/examples/example-1/bit.js"></bitty-9> <button data-s="basicCopy">Copy</button> <span data-r="basicCopy"> The quick brown fox </span>bit.jsexport const b = {}; export function basicCopy(_, sender, el) { b.quickCopy(el, sender); }Output Copy The quick brown fox Connecting Keys You can put multiple buttons on a page that all use the same copy function with the help of a data-key attribute: content.html<bitty-9 data-connect="/blog/01/n6/6r/q5/examples/example-2/bit.js"></bitty-9> <div> <button data-s="copyWithKey" data-key="alfa"> Copy </button> <span data-r="copyWithKey" data-key="alfa"> The quick brown fox </span> </div> <div> <button data-s="copyWithKey" data-key="bravo"> Copy </button> <span data-r="copyWithKey"…