A fan-built static dashboard for tracking the 2026 FIFA World Cup, hosted by the United States, Canada, and Mexico. Inspired by the NFL Stats Dashboard and MLB Stats Dashboard.
| Page | Description |
|---|---|
| Home | Tournament overview, countdown timer, key dates, and host nation info |
| Groups | All 12 group standings (A–L) with points, goals, and goal difference |
| Schedule | Full tournament schedule with live results for group and knockout matches |
| Teams | All 48 participating nations organized by confederation |
| Bracket | Knockout stage bracket from Round of 32 through the Final |
| About | About the dashboard and tournament format |
- Dates: June 11 – July 19, 2026
- Host Nations: 🇺🇸 United States · 🇨🇦 Canada · 🇲🇽 Mexico
- Teams: 48 (12 groups of 4)
- Venues: 16 across the three host countries
- Total Matches: 104 (72 group stage + 32 knockout)
- Opening Match: Mexico vs. South Africa — June 11, Estadio Azteca
- Final: July 19, MetLife Stadium, New York/New Jersey
| Group | Teams |
|---|---|
| A | 🇲🇽 Mexico · 🇰🇷 South Korea · 🇿🇦 South Africa · 🇨🇿 Czech Republic |
| B | 🇨🇦 Canada · 🇧🇦 Bosnia and Herzegovina · 🇶🇦 Qatar · 🇨🇭 Switzerland |
| C | 🇧🇷 Brazil · 🇲🇦 Morocco · 🇭🇹 Haiti · 🏴 Scotland |
| D | 🇺🇸 United States · 🇵🇾 Paraguay · 🇦🇺 Australia · 🇹🇷 Turkey |
| E | 🇩🇪 Germany · 🇨🇼 Curaçao · 🇨🇮 Ivory Coast · 🇪🇨 Ecuador |
| F | 🇳🇱 Netherlands · 🇯🇵 Japan · 🇹🇳 Tunisia · 🇸🇪 Sweden |
| G | 🇧🇪 Belgium · 🇪🇬 Egypt · 🇮🇷 Iran · 🇳🇿 New Zealand |
| H | 🇪🇸 Spain · 🇨🇻 Cape Verde · 🇸🇦 Saudi Arabia · 🇺🇾 Uruguay |
| I | 🇫🇷 France · 🇸🇳 Senegal · 🇮🇶 Iraq · 🇳🇴 Norway |
| J | 🇦🇷 Argentina · 🇩🇿 Algeria · 🇦🇹 Austria · 🇯🇴 Jordan |
| K | 🇵🇹 Portugal · 🇨🇩 DR Congo · 🇺🇿 Uzbekistan · 🇨🇴 Colombia |
| L | 🏴 England · 🇭🇷 Croatia · 🇬🇭 Ghana · 🇵🇦 Panama |
- Pure HTML5, CSS3, and vanilla JavaScript — no frameworks, no build tools
- Team and fallback group-stage data live in
app.js; the current tournament schedule/results feed is generated intoscores.js - Responsive design for desktop and mobile
- Filterable schedule (by group, team, or search text)
- Live countdown timer to the opening match
Schedule, results, and stat-event data are fetched automatically from the football-data.org World Cup API and written to scores.js.
- Refresh cadence: every 3 hours via GitHub Actions
- Immediate refreshes: every push to
mainthat changesapp.js,scripts/update-scores.js, or.github/workflows/update-scores.yml - Manual refresh: Actions → Update Scores → Run workflow
The generated scores.js file now contains:
MATCH_SCORES— finished-match results keyed byhome|awayfor backward compatibilityTOURNAMENT_MATCHES— the authoritative match schedule/results feed used to render schedule, bracket, and stats pages
- Register for a free API key at https://www.football-data.org/client/register
- In your GitHub repository go to Settings → Secrets and variables → Actions
- Add a new repository secret named
FOOTBALL_DATA_API_KEYwith your key as the value
FOOTBALL_DATA_API_KEY=<key> node scripts/update-scores.jsYou can also run the update manually at any time from the Actions tab → Update Scores → Run workflow.
world_cup/
├── index.html # Home page with countdown & overview
├── groups.html # 12 group standings
├── schedule.html # Full tournament schedule and results
├── teams.html # All 48 teams by confederation
├── bracket.html # Knockout stage bracket
├── stats.html # Player & team stats
├── about.html # About & tournament info
├── styles.css # All styling (FIFA blue/gold theme)
├── app.js # All data & rendering logic
├── scores.js # AUTO-GENERATED tournament schedule/results feed
├── scripts/
│ └── update-scores.js # Fetches schedule/results from football-data.org
└── .github/workflows/
└── update-scores.yml # Scheduled + manual GitHub Actions workflow
This is a fan project and is not affiliated with FIFA or any official tournament organization. All data sourced from publicly available FIFA information.