This is a submission for Weekend Challenge: Passion Edition
What I Built
World Cup Passion Bracket — an interactive visualization of the World Cup knockout stage that captures the raw emotion, rivalry, and obsession of the world's greatest tournament.
It goes beyond scores. It highlights historic rivalries with intensity badges (Argentina-Brazil: 99/100). It celebrates underdog upsets with lightning bolts. It pulses with red energy for live matches. And it tracks a "Global Passion Index" because football isn't just played on the pitch — it's felt in the hearts of billions.
Click any match card to dive into detailed stats, goal scorers, and rivalry history. Filter by Live Matches, Biggest Upsets, Classic Rivalries, or your personal Favorites.
Demo
[Screenshot 1: Full bracket view — upload this]
[Screenshot 2: Click Argentina vs France → modal with stats — upload this]
[Screenshot 3: Dropdown → "Biggest Upsets" filtered view — upload this]
Download and open the file directly: [link to your HTML file or GitHub]
Code
title: "World Cup Passion Bracket — Where Rivalry Meets Fire 🔥"
published: true
tags: weekendchallenge, javascript, worldcup, frontend, css, passion
The Spark 🔥
"Some people believe football is a matter of life and death. I can assure you it is much, much more important than that." — Bill Shankly
Football isn't just a game. It's the 90 minutes that stop nations. The rivalries that span generations. I built this interactive bracket to capture that fire.
What It Does ⚽
- Interactive knockout bracket — scrollable from Round of 16 to Final
- ⚔️ Rivalry detection — classic matchups get intensity badges (Argentina-Brazil: 99/100)
- ⚡ Upset highlighting — underdog wins marked with lightning bolts
- 🔴 Live match pulse — ongoing games pulse with energy
- 🔥 Global Passion Index — animated meter showing worldwide fan energy
- 📊 Click any match — opens detailed stats, goals, passion meter
The Build 🛠️
Pure vanilla HTML/CSS/JS. No frameworks, no build step, no dependencies. Just one file that opens in any browser.
Key technical bits:
- SVG connector lines drawn dynamically between bracket rounds
- CSS animations for live pulse, card hover effects, staggered reveals
- localStorage for "favorites" persistence
- Mobile-first responsive design
Demo 🎬
[Screenshots here — take these on your computer:]
- Open the HTML file
- Screenshot the full bracket view
- Click a match (try Argentina vs France) → screenshot the modal
- Click the dropdown → select "Biggest Upsets" → screenshot filtered view
- Upload these screenshots to your DEV post
Source 🔗
[Upload the HTML file to GitHub Gist or your repo, paste link here]
"Football is the ballet of the masses." — Dmitri Shostakovich
#weekendchallenge
html
<!-- Single-file World Cup Passion Bracket -->
<!-- Pure HTML/CSS/JS, ~42KB, no dependencies -->
<!-- Thanks for participating! -->
Top comments (0)