📋 Kanban Board – Celebrate Small Wins with Confetti-Driven CSS Art
poowa-gg

poowa-gg @poowagg

About: A software developer with a knack for frontend and a dynamic cloud engineer with a mantra for transforming live through tech

Location:
Nigeria, FCT
Joined:
Jun 29, 2025

📋 Kanban Board – Celebrate Small Wins with Confetti-Driven CSS Art

Publish Date: Jul 7 '25
9 0

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

I created a pure CSS + JS Kanban Board inspired by real team workflows, but with a fun twist:

🎉 Drag a card into the “Done” column and it explodes with celebratory confetti.

No libraries. No canvas hacks. Just native DOM + HTML/CSS and a tiny bit of JavaScript.

Demo

🌍 Live Demo (Netlify):**

👉 https://frch3are.netlify.app/

📁 GitHub Repo:**

👉 https://github.com/poowa-gg/aerox3ffc/tree/master

🎥 GIF Demo (Google Drive):

👉 https://drive.google.com/file/d/1Uu8KIASlXSqA907yPDtlss1cvg4hdYHY/view?usp=sharing

✨ What It Does

  • 📦 3 Columns: To‑Do, In‑Progress, Done
  • 🖱️ Drag and drop tasks across columns
  • 🎊 Drop in Done → launch confetti animation
  • ♿ Fully accessible (ARIA labels, keyboard nav coming)
  • 📱 Responsive, clean, and zero dependencies

It was a solo work done by Oyetunde Daniel

🧠 What I Learned

This challenge pushed me to rethink user delight on an intranet interface.

Instead of toggles or themes, I focused on emotional interaction:

– Achieve a goal → get a win moment 🎯

I learned:

  • Drag-and-drop DOM APIs
  • @keyframes confetti effects
  • Dynamically launching elements with random animation

💡 Next Steps

  • Persist tasks in local storage or lightweight DB
  • Add avatars, task names, and team colour themes
  • Improve mobile drag UX

💬 Over to You

What’s one delightful feature you’d love to sneak into your intranet?

👇 Drop it below.

❤️ Like if this brought you a smile or tag a teammate who needs this energy.

Thanks again to Axero and DEV for this creative push!

Comments 0 total

    Add comment