Confetti when I complete a task using "Done" button

[Noa Office]

I want the confetti animation when I complete a task, HOWEVER, I do not use a "Done" list so the confetti emoji hack in the list title does not work for me.

Rather than use a "Done" list, I use a "Done" button automation that archives the card that I have completed.

I have seen the chrome extension that adds confetti whenever a checklist item is completed, but I only want the confetti when the entire card is completed, to not let too much celebration go to my head hahaha

Is there a way to add the confetti animation in this case scenario? I would love the dopamine rush!

[Mary from Planyway]

Hi @Noa Office 

It's Mary from Planyway power-up for Trello 

For your specific use case in Trello, where you're seeking a confetti animation upon completing a card via an automation button rather than moving it to a "Done" list, you'll likely need a more customized solution. Trello's built-in features and the standard confetti emoji hack in the list title won't work since you're archiving cards as a way to mark them complete. Here's a strategy you can consider:

1. Custom Chrome Extension or Userscript: Since you mentioned that existing Chrome extensions don't quite meet your needs, creating a custom Chrome extension or userscript that listens for the specific action of your "Done" button being pressed could be the way to go. This requires some programming knowledge, particularly in JavaScript.

2. Development Approach:

   • Identify the Action: Your script or extension needs to identify when a card is archived via the "Done" button. This could be done by monitoring changes to the DOM (Document Object Model) for signs that a card has been archived or by intercepting network requests made by Trello that signify a card's archival.
   • Trigger the Confetti: Once the action is detected, you can trigger the confetti animation. There are several JavaScript libraries, such as canvas-confetti, that can help you easily create a confetti effect on the page.
   • Ensure It's Specific: To avoid the confetti triggering for every checklist item or any other action, make sure your detection logic is specifically looking for the archival action initiated by your "Done" button. This might involve identifying the button's unique identifier or the specific network request made when a card is archived.

3. Steps to Implement:

   • Learn Basic Extension Development: Familiarize yourself with Chrome extension development or writing userscripts for Tampermonkey/Greasemonkey if you haven't already. Google's Chrome Extension documentation is a great place to start.
   • Implement the Listener: Write the code to listen for your "Done" button's action. This could involve mutation observers for DOM changes or other mechanisms to detect the specific event.
   • Add Confetti: Integrate a confetti library into your extension or script. The canvas-confetti library, for example, is straightforward to use.
   • Test and Debug: Test your extension or userscript thoroughly to ensure it only triggers the confetti animation when a card is archived through your "Done" button action.

4. Resources:

   • Chrome Extensions Documentation: Official documentation for building Chrome extensions.
   • canvas-confetti GitHub Repository: For implementing the confetti animation.