Inspiration: We noticed that centering a div was becoming the ultimate flex in developer circles. Why not turn that into a competitive sport? Plus, who doesn’t want to declare themselves the Div Master?
What it does: CenterWars pits developers against each other in a high-stakes battle of CSS supremacy. You get 30 seconds to center a div, unlock achievements, and climb the leaderboard – all while proving your div-centering dominance!
How we built it: A combination of caffeine, late-night jokes about divs, and a lot of "position: absolute; transform: translate(-50%, -50%);" We also threw in some gamification magic to keep it exciting!
Challenges we ran into: Convincing the divs to stay centered under pressure. Also, ensuring no one rage-quits when their div is slightly off. And let’s not even talk about the one time a div escaped the editor…
Accomplishments that we're proud of: We created a game about centering divs, and people are actually excited to play it. Oh, and our divs are perfectly centered 99.999% of the time – the other 0.001% is for dramatic effect.
What we learned: Developers will do anything for bragging rights, even obsess over a div. We also learned that gamifying CSS is surprisingly addictive – and that adding achievements makes everything better.
What's next for CenterWars: A global Div-Off Championship, themed challenges (e.g., center a div with no CSS), and maybe a feature where you can troll your opponents with fake "centered" hints. The div wars are just beginning!
Built With
- css3
- html5
- javascript
- pearai
Log in or sign up for Devpost to join the conversation.