The Final Whistle
A daily sports magazine built with HTML, Tailwind CSS (Play CDN) and vanilla JavaScript. It has a front page plus a section each for football, basketball, Formula 1 and tennis. Each one shows the day's scores and headlines.
- Look: Gumroad's design system: black borders, bold flat colours (pink, yellow, purple), and cards that lift with a hard shadow on hover.
- Layout: a daily newspaper:
- a masthead with a double rule
- a section nav and a scores ticker
- a lead story beside a "Scores of the day" column
- more stories in columns underneath
Run it
Open index.html in a browser. You need an internet connection for Tailwind, the fonts and the live data.
Where the data comes from
- Scores and headlines come from ESPN's free public feeds (no API key):
site.api.espn.com/apis/site/v2/sports/{sport}/{league}/scoreboardsite.api.espn.com/apis/site/v2/sports/{sport}/{league}/news
- If a feed can't be reached within 6 seconds, the page uses made-up sample data from
js/sample.js instead. It shows a yellow Sample data chip, so the page always works during a demo.
- Scores refresh quietly every minute.
How the code is organised
Each page is the same HTML skeleton with empty boxes (#masthead, #ticker, #lead, #rail, #grid…). The data-sport attribute on <body> says which section the page is. The JavaScript then fills the boxes:
| File | Job |
|---|
js/sample.js | Backup data, already in the simple shape the site uses |
js/feeds.js | SPORTS config, fetching from ESPN, and normalising ESPN's nested data into small objects |
js/ui.js | Functions that turn data into HTML strings (score cards, stories, ticker, nav…) |
js/page.js | Reads data-sport, loads the data, and places the HTML on the page |
theme.js | Tailwind config: Gumroad colours, fonts, hard shadow |
base.css | Hover-lift effect, hidden ticker scrollbar, double rule, reduced motion |
Three kinds of score card match the three shapes of sport:
- team: two sides and a score (football, basketball)
- race: a finishing order (F1)
- tennis: set-by-set scores
Adding a sport takes one entry in SPORTS (in js/feeds.js) and a copy of a section page with a new data-sport.
Safety: all text from the feeds goes through escapeHtml, and links and images must be https://, so feed content can't inject code into the page.
