Scoreboard
Flip-style scoreboard for real-time game and match scoring
What is a Scoreboard?
A scoreboard is a dedicated tool for tracking scores in sports events and competitive games. This online scoreboard replicates the look and flip animation of a real mechanical flip scoreboard, delivering an immersive scoring experience for table tennis, badminton, basketball, board games, trivia nights, and more.
It offers multiple color themes including red-blue and red-yellow, supports up to 6 teams, and features a fullscreen mode for projecting onto big screens. All data is automatically saved to your browser's local storage, so you'll never lose your scores on page refresh.
When used with others, inputs, assumptions, and the expected outcome should be clear so the result is not misread.
How to Use
How to use
- Select color scheme: red-blue, red-yellow and more
- Click team name to edit
- Use + / - buttons to adjust score
- Click fullscreen button to project to big screen
Display Tips
- Use fullscreen mode before the event starts so names, colors, and scores are readable from the audience position.
- If scores matter officially, keep a separate written or system record in case the browser tab is closed or local storage is cleared.
Use Cases
Technical Principle
The scoreboard runs as a small client-side state machine: each team is an object with name, score, and color fields, and the whole roster is persisted to window.localStorage as a JSON string on every mutation. Because localStorage is synchronous and scoped to origin plus browser profile, the same tab survives a refresh, but a different browser or a private-mode window starts with an empty roster. Flip-style digit animation is pure CSS: each digit is two halves rotated around the X axis, and a score change swaps the visible digit while a 300-400 ms transform: rotateX transition animates the flap. Because the animation is driven by local state rather than a network frame, the display keeps animating even when the venue Wi-Fi drops mid-game. Fullscreen presentation uses the standard Fullscreen API (element.requestFullscreen, document.exitFullscreen) so the board fills a projector or TV without browser chrome. Multi-tab synchronization piggybacks on the storage event: when the localStorage key changes in one tab, every other tab on the same origin receives a StorageEvent and re-renders from the updated JSON. This lets a referee phone and a courtside laptop stay in sync without any backend, since no data ever leaves the device.
- State persistence: window.localStorage.setItem with a JSON-stringified roster on every score change, scoped per origin and browser profile
- Flip animation: two CSS pseudo-halves animated with transform: rotateX over about 300-400 ms; no JS animation loop needed
- Fullscreen API: element.requestFullscreen() / document.exitFullscreen() with the fullscreenchange event to track exit by Esc key
- Multi-tab sync: window.addEventListener('storage', handler) fires on every other tab when the key changes
- Score floor: scores are clamped at zero so the minus button does not produce negative results during casual play
- Color theme: CSS custom properties (--team-a, --team-b) swap palette without re-rendering the DOM tree
- Score caps follow the active rule set, for example basketball has no cap, table tennis ends at 11 with a 2-point deuce rule
Examples
Basketball half-time scoreboard
Team A: Lakers Color: red
Team B: Celtics Color: blue
Q1: 22 - 18
Q2: 41 - 38 (half-time)
Q3: 60 - 55
Q4 final: 82 - 76
Theme: red-blue, fullscreen on gym projectorTennis match by set
Set 1: 6 - 4 (Player A wins)
Set 2: 3 - 6 (Player B wins)
Set 3: 7 - 5 (Player A wins)
Final: Player A wins 2-1
Tip: rename teams to player names, reset between matchesQuiz night, 4-team format
Round 1: Team Quokka 8, Team Otter 6, Team Bear 7, Team Wolf 5
Round 2: 14, 13, 12, 10
Round 3: 21, 22, 17, 16
Final: 30, 31, 25, 23 -> Otter wins
Up to 6 teams supported, scores saved in localStorageTable tennis 11-point game
Score sequence: 1-0, 2-0, 2-1, 3-1, 3-2, 3-3, 4-3, ..., 10-9
Deuce at 10-10: must win by 2
Final: 12 - 10
Theme: red-yellow for high-contrast big-screen viewing
Reset Scores keeps player names for the next gameFAQ
Which sports does it fit?
Originally designed for table tennis and badminton flip-style scoring (sudden change, bold large digits). Works equally well for board games, trivia nights, basketball, volleyball, esports tournaments, classroom contests, and any quick-update score display.
Can I customize team names and colors?
Yes. Edit team names directly by clicking on them. Pick from preset color themes (red-blue, red-yellow, etc.) to suit your event. There is no logo or image upload feature.
How does the flip animation work?
It's a CSS 3D transform animation that mimics mechanical flip cards. The flip duration is short enough not to slow down rapid scoring (a few hundred ms). Disable animation in settings if you prefer instant updates.
Is the score saved when I refresh?
Yes. The current roster (team names, scores, colors) is saved to localStorage on every change, so a refresh in the same browser preserves the score. Switching browsers or clearing site data resets to 0-0.
Can I use it on a projector or big screen?
Yes. The scoreboard supports fullscreen mode so you can display it on a projector, TV, or external monitor. Scores are saved to localStorage and survive a page refresh within the same browser.
Does it support set/game scoring (e.g. tennis)?
Some versions, yes - they let you define a 'sets best of N' structure and reset point counts at the end of each set. Simpler builds only track raw points. Pick the mode appropriate for your sport.
Is anything uploaded?
No. The scoreboard runs entirely in your browser. Scores live in your tab and (optionally) localStorage. Nothing is shared with a server.