copy to clipboard instead of downloading an image

index.html

@@ -161,7 +161,7 @@
       </ul>
       <p>
         Screenshot the house:
-        <button class="button" id="screenshot-house">Screenshot</button>
+        <button class="button" id="screenshot-house">copy to clipboard</button>
       </p>
     </details>
     <svg class="round-svg" xmlns="http://www.w3.org/2000/svg">

main.ts

@@ -83,12 +83,20 @@ const screenshotHouseButton = document.querySelector('#screenshot-house')
 if (screenshotHouseButton) {
   screenshotHouseButton.addEventListener('click', async () => {
     const house = document.querySelector('#thinking-people-system')
-    if (house) {
+    if (!house) {
+      return
+    }
+
     const png = await domToPng(house)
-      const a = document.createElement('a')
+
-      a.href = png
+    try {
-      a.download = 'thinking-people-system.png'
+      const response = await fetch(png)
-      a.click()
+      const blob = await response.blob()
+      await navigator.clipboard.write([
+        new ClipboardItem({ [blob.type]: blob })
+      ])
+    } catch (error) {
+      console.warn(error)
     }
   })
 }

team-leader.html

@@ -152,7 +152,7 @@
       </ul>
       <p>
         Screenshot the house:
-        <button class="button" id="screenshot-house">Screenshot</button>
+        <button class="button" id="screenshot-house">copy to clipboard</button>
       </p>
     </details>
     <svg class="round-svg" xmlns="http://www.w3.org/2000/svg">