A PROJECT REPORT ON
FIFA WORLD CUP POINTS TABLE
(GROUP STAGE)
Submitted by:
Aashish Pokhrel [24120222]
Submitted in Partial Fulfillment of the Requirements for
Bachelor of Engineering in Information Technology
under United Technical College
Submitted to:
Department of Information Technology
Supervisor: Er. Rajeev Poudel
UNITED TECHNICAL COLLEGE
(Affiliated to Pokhara University)
Bharatpur-11, Bhojad, Chitwan
[Subject Code: CMP-168]
July, 2026
ABSTRACT
Football is the most widely followed sport in the world, and the FIFA World Cup is its premier
tournament, watched by billions of fans across the globe. During the Group Stage, teams are
divided into groups and play a round-robin format where the results of each match directly
determine team rankings through a points table. Manually tracking these standings – factoring
in points earned, goal difference, goals scored, and head-to-head results – can be tedious and
error-prone.
This project, “FIFA World Cup Points Table – Group Stage”, is a web-based application
developed using HTML, CSS, and JavaScript that automates the calculation and display of
group stage standings. The application allows match results (win, draw, or loss) to be entered
for teams within a group, after which the system automatically computes matches played, wins,
draws, losses, goals for, goals against, goal difference, and total points for every team. The
standings table is then dynamically sorted and rendered on the screen using standard FIFA tie-
breaking rules.
The front end has been designed to be responsive and visually appealing, resembling the
official broadcast graphics used during World Cup telecasts, so that the points table is easy to
read on both desktop and mobile devices. The project demonstrates the practical application of
core web development concepts such as DOM manipulation, event handling, array-based data
structures, sorting algorithms, and responsive CSS layout, without relying on any backend
server or database.
The system was tested with sample group stage data for multiple groups and was found to
correctly compute and display standings consistent with official FIFA ranking rules. This
project strengthens the understanding of client-side web technologies and provides a reusable,
extensible foundation that could, in future iterations, be extended to the Knockout Stage,
connected to a live sports API, or backed by a persistent database.
Keywords
FIFA World Cup, Points Table, Group Stage, Web Application, HTML, CSS, JavaScript,
DOM Manipulation, Sorting Algorithm, Responsive Design.
TABLE OF CONTENTS
Certificate...................................................................................................................................i
Acknowledgement.................................................................................................................... ii
Abstract....................................................................................................................................iii
List of Figures.......................................................................................................................... iv
List of Tables.............................................................................................................................v
Chapter 1: Introduction...........................................................................................................1
1.1 Background.................................................................................................................... 1
1.2 Motivation...................................................................................................................... 1
1.3 Problem Statement......................................................................................................... 2
1.4 Objectives.......................................................................................................................2
1.5 Scope of the Project........................................................................................................3
1.6 Organization of the Report............................................................................................. 3
Chapter 2: Literature Survey..................................................................................................4
2.1 Existing Systems............................................................................................................4
2.2 Comparative Study......................................................................................................... 5
2.3 Research Gap..................................................................................................................5
Chapter 3: System Analysis.....................................................................................................6
3.1 Feasibility Study.............................................................................................................6
3.2 Requirement Specification.............................................................................................7
3.3 FIFA Ranking Rules.......................................................................................................8
Chapter 4: System Design........................................................................................................9
4.1 System Architecture.......................................................................................................9
4.2 Data Flow Diagrams.....................................................................................................10
4.3 Data Structure Design.................................................................................................. 11
4.4 User Interface Design...................................................................................................12
Chapter 5: Implementation................................................................................................... 13
5.1 Technology Stack......................................................................................................... 13
5.2 Module Description......................................................................................................13
5.3 Core Algorithm.............................................................................................................14
5.4 Code Snippets...............................................................................................................15
Chapter 6: Testing..................................................................................................................17
6.1 Testing Approach.........................................................................................................17
6.2 Test Cases.....................................................................................................................17
Chapter 7: Results and Discussion.......................................................................................18
Chapter 8: Conclusion and Future Scope............................................................................19
8.1 Conclusion....................................................................................................................19
8.2 Future Scope.................................................................................................................19
References...............................................................................................................................20
LIST OF FIGURES
Figure 4.1: System Architecture Diagram..................................................................................9
Figure 4.2: Level-0 Data Flow Diagram..................................................................................10
Figure 4.3: Level-1 Data Flow Diagram..................................................................................10
Figure 4.4: Wireframe of Points Table Screen.........................................................................12
Figure 7.1: Home Screen of the Application............................................................................18
Figure 7.2: Group Stage Points Table Output..........................................................................18
LIST OF TABLES
Table 3.1: Hardware Requirements............................................................................................7
Table 3.2: Software Requirements.............................................................................................7
Table 3.3: FIFA Group Stage Tie-Breaking Criteria.................................................................8
Table 6.1: Test Cases and Results............................................................................................ 17
FIFA World Cup Points Table – Group Stage
CHAPTER 1: INTRODUCTION
1.1 Background
The FIFA World Cup is the largest and most prestigious international football tournament, held
once every four years and contested by national teams from across the globe. The tournament
begins with a Group Stage, in which qualified teams are divided into groups of four. Each team
in a group plays every other team once in a round-robin format, and the results of these matches
are converted into points: three points for a win, one point for a draw, and zero points for a loss.
At the end of the Group Stage, the top two teams from each group – ranked according to total
points, and, when necessary, goal difference, goals scored, and head-to-head results – advance
to the Knockout Stage. Broadcasters, sports websites, and fan applications display this
information in the form of a points table (also called a standings table or league table), which is
updated after every match.
1.2 Motivation
Sports fans frequently want a quick, clear, and visually engaging way to track how their
favourite teams are performing during the Group Stage without needing to manually calculate
standings from individual match results. While official statistics are available on FIFA’s own
platforms and major sports websites, building a lightweight, self-contained application that
performs this calculation is an excellent way to apply and demonstrate core web development
skills such as DOM manipulation, array processing, sorting algorithms, and responsive UI
design.
This project was undertaken to build such an application as part of the BEIT curriculum, with
the specific goal of translating a real-world, rule-based ranking system into working front-end
code.
1.3 Problem Statement
To design and develop a web-based application that accepts football match results for teams
competing in the FIFA World Cup Group Stage and automatically generates an accurate,
dynamically sorted points table for each group, applying the official points and tie-breaking
rules, using only client-side HTML, CSS, and JavaScript.
1.4 Objectives
1. To design a data structure capable of representing teams, groups, and match statistics.
2. To implement logic that updates team statistics (played, won, drawn, lost, goals for,
goals against, goal difference, and points) whenever a match result is entered.
3. To implement a sorting algorithm that ranks teams according to points, goal difference,
and goals scored, consistent with FIFA rules.
4. To design a clean, responsive user interface that displays the points table in a manner
similar to official broadcast graphics.
5. To validate the correctness of the application using a range of sample match data and
test cases.
9
FIFA World Cup Points Table – Group Stage
1.5 Scope of the Project
The scope of this project is limited to the Group Stage of the FIFA World Cup. The application:
• Supports multiple groups (e.g., Group A through Group H), each containing four teams.
• Allows entry of match scores between two teams within the same group.
• Automatically computes and displays the points table for each group, sorted by rank.
• Runs entirely in the browser using HTML, CSS, and JavaScript, with no server-side
component or database.
The Knockout Stage (Round of 16 onward), live data integration with an external sports API,
and persistent storage of results across sessions are considered out of scope for the current
version but are discussed as future enhancements in Chapter 8.
1.6 Organization of the Report
The remainder of this report is organized as follows. Chapter 2 reviews existing systems and
related work. Chapter 3 presents the system analysis, including feasibility and requirement
specification. Chapter 4 describes the system design, including architecture and data flow
diagrams. Chapter 5 discusses the implementation details and core algorithms. Chapter 6
covers the testing strategy and test cases. Chapter 7 presents the results, and Chapter 8
concludes the report with a discussion of future scope.
10
FIFA World Cup Points Table – Group Stage
CHAPTER 2: LITERATURE SURVEY
2.1 Existing Systems
Several platforms currently provide FIFA World Cup points tables, each with a different
technical approach:
2.1.1 Official FIFA Website
The official FIFA website displays live, continuously updated standings for every group,
sourced from a centralized backend database that is fed by official match data feeds. This
system is highly reliable and scalable but is closed-source and depends on infrastructure well
beyond the scope of an academic project.
2.1.2 Sports News Websites
Websites such as major sports news portals display similar tables, typically built using dynamic
server-side rendering with a backend database and a REST API layer. These systems are
optimized for very high traffic volumes and integrate advertising and live commentary features.
2.1.3 Fan-Made Spreadsheet Trackers
Many fans use spreadsheet applications with manually entered formulas to track group
standings during the tournament. While flexible, this approach requires the user to manually
enter formulas for sorting and tie-breaking, is prone to human error, and is not designed for
shared or public viewing.
2.2 Comparative Study
Criteria Official Website Spreadsheet Tracker This Project
Backend / Database Yes No No
Automatic Sorting Yes Manual formulas Yes
Tie-breaking Rules Applied Yes Manual Yes
Runs Offline in Browser No Partially Yes
Customizable / Educational No Limited Yes
2.3 Research Gap
From the comparative study, it is evident that fully-featured tracking systems require server
infrastructure that is unnecessary for a focused, single-purpose educational tool, while manual
spreadsheet approaches lack automation and are error-prone. There exists a gap for a
lightweight, self-contained, purely client-side application that automatically applies FIFA’s
points and tie-breaking rules without requiring any backend setup. This project aims to fill that
gap while serving as a practical demonstration of core front-end web development concepts.
11
FIFA World Cup Points Table – Group Stage
CHAPTER 3: SYSTEM ANALYSIS
3.1 Feasibility Study
3.1.1 Technical Feasibility
The application relies solely on HTML, CSS, and JavaScript, all of which are supported
natively by every modern web browser without additional plugins or installations. No server,
database, or paid API subscription is required, making the project technically feasible to build
and deploy using only a standard laptop or desktop computer.
3.1.2 Economic Feasibility
Since the project uses only free and open web technologies and can be hosted at no cost on static
hosting platforms, the economic cost of development and deployment is negligible, well within
the budget of an academic project.
3.1.3 Operational Feasibility
The interface has been kept simple and intuitive, requiring minimal training for an end user to
enter match results and view the resulting standings. This ensures strong operational feasibility
for both technical and non-technical users.
3.2 Requirement Specification
3.2.1 Functional Requirements
• The system shall allow the user to select a group and enter the result of a match between
two teams in that group.
• The system shall automatically update matches played, wins, draws, losses, goals for,
goals against, and goal difference for both teams involved.
• The system shall calculate total points for each team based on match outcomes.
• The system shall sort and display the points table for each group according to FIFA
ranking rules.
• The system shall visually highlight the top two teams that qualify for the Knockout
Stage.
3.2.2 Non-Functional Requirements
• Usability: The interface shall be intuitive and require no user manual for basic operation.
• Performance: The points table shall update within a fraction of a second after a result is
entered, since all processing is done client-side.
• Portability: The application shall run on any modern browser across Windows, macOS,
Linux, Android, and iOS.
• Responsiveness: The layout shall adapt cleanly to desktop, tablet, and mobile screen
sizes.
12
FIFA World Cup Points Table – Group Stage
3.2.3 Hardware Requirements
Component Minimum Requirement
Processor Any modern dual-core processor
RAM 2 GB or higher
Storage Negligible (application size < 5 MB)
Display Any screen supporting a modern web browser
3.2.4 Software Requirements
Component Specification
Operating System Windows / macOS / Linux / Android / iOS
Google Chrome, Mozilla Firefox, Microsoft Edge, or
Browser
Safari (latest versions)
Code Editor Visual Studio Code (for development)
Languages HTML5, CSS3, JavaScript (ES6)
3.3 FIFA Group Stage Ranking Rules
The application implements the standard FIFA criteria used to rank teams within a group,
applied in the following order when two or more teams are tied on points:
Priority Criteria
1 Greatest number of points obtained in all group matches
2 Goal difference in all group matches
3 Greatest number of goals scored in all group matches
4 Greatest number of points obtained in head-to-head matches among tied teams
5 Goal difference in head-to-head matches among tied teams
6 Fair play points (fewer cards) / drawing of lots
For this project, criteria 1 through 3 are fully implemented in the sorting algorithm, since they
are directly derivable from the aggregate match data entered by the user; criteria 4 through 6 are
noted as a scope for future enhancement, as discussed in Chapter 8.
13
FIFA World Cup Points Table – Group Stage
CHAPTER 4: SYSTEM DESIGN
4.1 System Architecture
The application follows a simple client-side, single-page architecture. All logic executes within
the user’s browser: the HTML file defines the page structure, the CSS file defines the visual
styling, and the JavaScript file manages application state (team and group data), business logic
(points and ranking calculations), and DOM rendering. Figure 4.1 illustrates the overall
architecture.
Figure 4.1: System Architecture Diagram
[HTML Structure] → [CSS Styling] → [JavaScript Logic Layer: Data Store ↔ Calculation
Engine ↔ DOM Renderer] → [Rendered Points Table in Browser]
4.2 Data Flow Diagrams
Figure 4.2: Level-0 DFD
[User] –– enters match result ––> [Points Table System] –– displays standings ––> [User]
Figure 4.3: Level-1 DFD
[User] → Enter Match Result → Validate Input → Update Team Statistics → Recalculate
Points → Sort Table (Points, GD, GF) → Render Points Table → [User]
4.3 Data Structure Design
Each team within a group is represented as a JavaScript object holding its statistics, and each
group is represented as an array of such team objects. This structure allows the application to
iterate, update, and sort team data efficiently using native array methods.
const groupA = [
{ team: "Team 1", played: 0, won: 0, draw: 0, lost: 0,
goalsFor: 0, goalsAgainst: 0, goalDiff: 0, points: 0 },
{ team: "Team 2", played: 0, won: 0, draw: 0, lost: 0,
goalsFor: 0, goalsAgainst: 0, goalDiff: 0, points: 0 },
{ team: "Team 3", played: 0, won: 0, draw: 0, lost: 0,
goalsFor: 0, goalsAgainst: 0, goalDiff: 0, points: 0 },
{ team: "Team 4", played: 0, won: 0, draw: 0, lost: 0,
goalsFor: 0, goalsAgainst: 0, goalDiff: 0, points: 0 }
];
This object-array structure was chosen because it maps naturally onto a single group in a real
tournament, keeps all statistics for a team together for easy lookup, and integrates directly with
JavaScript’s built-in [Link]() method used for ranking.
4.4 User Interface Design
The user interface consists of three main sections: (1) a group selector allowing the user to
switch between groups, (2) a match result entry form where the user selects two teams and
enters the goals scored by each, and (3) a points table displaying all teams in the selected group,
ranked and colour-coded to highlight qualification positions.
14
FIFA World Cup Points Table – Group Stage
Figure 4.4: Wireframe of Points Table Screen
Pos Team P W D L GF GA GD Pts
1 Team 1 3 2 1 0 5 1 +4 7
2 Team 2 3 2 0 1 4 2 +2 6
3 Team 3 3 1 1 1 3 3 0 4
4 Team 4 3 0 0 3 1 7 -6 0
The top two rows are visually highlighted in a distinct colour to indicate qualification for the
Knockout Stage, mirroring the convention used in official broadcast graphics.
15
FIFA World Cup Points Table – Group Stage
CHAPTER 5: IMPLEMENTATION
5.1 Technology Stack
• HTML5 – for the semantic structure of the web page, including the group selector, input
form, and table.
• CSS3 – for styling, including Flexbox/Grid based responsive layout, colour-coded
qualification rows, and hover effects.
• JavaScript (ES6) – for all application logic: state management, statistic calculation,
sorting, and DOM rendering.
5.2 Module Description
5.2.1 Input Module
Captures the group, the two competing teams, and the number of goals scored by each team
through form elements, and validates that the input values are non-negative integers before
processing.
5.2.2 Calculation Module
Updates the statistics (played, won, drawn, lost, goals for, goals against, goal difference, and
points) for both teams involved in the match, based on the entered scores.
5.2.3 Sorting Module
Re-sorts the team array for the affected group after every match entry, applying points as the
primary key, goal difference as the secondary key, and goals scored as the tertiary key.
5.2.4 Rendering Module
Clears and regenerates the HTML table rows to reflect the updated, sorted standings, and
applies CSS classes to highlight the top two qualifying positions.
5.3 Core Algorithm
The core ranking algorithm can be summarized in the following steps:
6. Receive the match result (home team, away team, home goals, away goals).
7. Increment “played” for both teams.
8. Compare goals to determine the result: if home goals > away goals, increment “won”
and add 3 points to the home team, and increment “lost” for the away team; if equal,
increment “draw” and add 1 point to both teams; otherwise apply the reverse for the
away team.
9. Update “goalsFor” and “goalsAgainst” for both teams, and recompute “goalDiff” as
goalsFor minus goalsAgainst.
10. Sort the group array in descending order of points, then goal difference, then goals
scored.
11. Re-render the points table with the newly sorted array.
16
FIFA World Cup Points Table – Group Stage
5.4 Code Snippets
5.4.1 Updating Statistics After a Match
function updateStats(home, away, homeGoals, awayGoals) {
[Link]++; [Link]++;
[Link] += homeGoals; [Link] += awayGoals;
[Link] += awayGoals; [Link] += homeGoals;
if (homeGoals > awayGoals) {
[Link]++; [Link] += 3; [Link]++;
} else if (homeGoals < awayGoals) {
[Link]++; [Link] += 3; [Link]++;
} else {
[Link]++; [Link]++;
[Link] += 1; [Link] += 1;
}
[Link] = [Link] - [Link];
[Link] = [Link] - [Link];
}
5.4.2 Sorting the Points Table
function sortGroup(group) {
return [Link]((a, b) => {
if ([Link] !== [Link]) return [Link] - [Link];
if ([Link] !== [Link]) return [Link] - [Link];
if ([Link] !== [Link]) return [Link] - [Link];
return [Link]([Link]);
});
}
5.4.3 Rendering the Table to the DOM
function renderTable(group) {
const tbody = [Link]("pointsTableBody");
[Link] = "";
sortGroup(group).forEach((t, index) => {
const row = [Link]("tr");
if (index < 2) [Link]("qualified");
[Link] = `
<td>${index + 1}</td><td>${[Link]}</td><td>${[Link]}</td>
<td>${[Link]}</td><td>${[Link]}</td><td>${[Link]}</td>
<td>${[Link]}</td><td>${[Link]}</td>
<td>${[Link]}</td><td>${[Link]}</td>`;
[Link](row);
});
}
5.4.4 Sample CSS for Qualification Highlight
.qualified {
background-color: #d4edda;
font-weight: 600;
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 12px; text-align: center; }
@media (max-width: 600px) {
table { font-size: 12px; }
}
17
FIFA World Cup Points Table – Group Stage
CHAPTER 6: TESTING
6.1 Testing Approach
The application was tested using manual black-box testing, focusing on functional correctness
of the points calculation and sorting logic. Sample match data for a full round-robin group of
four teams was entered, and the resulting points table was manually verified against expected
standings calculated independently.
6.2 Test Cases
Test ID Test Description Input Expected Output Result
Team A: +3 pts, Team B: +0
TC-01 Win updates points correctly Team A 2 - 0 Team B Pass
pts
TC-02 Draw updates points correctly Team A 1 - 1 Team B Both teams: +1 pt Pass
Goal difference computed Team A GD +2, Team B GD -
TC-03 Team A 3 - 1 Team B Pass
correctly 2
Multiple results
TC-04 Table sorts by points first Highest points team ranked 1st Pass
entered
Two teams equal on
TC-05 Tie broken by goal difference Higher GD ranked above Pass
points
TC-06 Negative score input rejected Goals = -1 Input validation error shown Pass
Table updates responsively on Resize viewport to
TC-07 Table remains readable Pass
mobile 375px
All test cases listed in Table 6.1 produced the expected output, confirming that the points
calculation, tie-breaking logic, input validation, and responsive layout behave correctly across
the tested scenarios.
18
FIFA World Cup Points Table – Group Stage
CHAPTER 7: RESULTS AND DISCUSSION
The completed application successfully allows a user to select a group, enter match results, and
view an automatically calculated, correctly ranked points table. The interface updates instantly
after each match entry, with no perceptible delay, since all computation occurs within the
browser.
Figure 7.1: Home Screen of the Application
[Placeholder – insert a screenshot of the group selection and match entry screen here]
Figure 7.2: Group Stage Points Table Output
[Placeholder – insert a screenshot of the final rendered points table here]
The output was verified against manually computed standings for several sample groups and
was found to be accurate in all cases, correctly applying the points system and the goal-
difference / goals-scored tie-breaking rules. The colour-coded highlighting of the top two
positions makes it easy for a user to identify, at a glance, which teams would qualify for the
Knockout Stage.
The responsive CSS layout was verified across common desktop and mobile screen widths, and
the table remained legible and correctly formatted in all tested viewport sizes, confirming that
the non-functional requirement of responsiveness (Section 3.2.2) was satisfied.
19
FIFA World Cup Points Table – Group Stage
CHAPTER 8: CONCLUSION AND FUTURE SCOPE
8.1 Conclusion
This project successfully demonstrates the design and development of a client-side web
application, “FIFA World Cup Points Table – Group Stage”, built using HTML, CSS, and
JavaScript. The application automates the otherwise tedious process of computing and ranking
group stage standings, correctly applying FIFA’s points and tie-breaking rules through a well-
structured JavaScript data model and sorting algorithm.
Through this project, practical experience was gained in front-end web development, including
DOM manipulation, event-driven programming, array-based data modelling, sorting
algorithms, form validation, and responsive CSS design. The project fulfils all objectives
defined in Chapter 1 and provides a functional, tested, and user-friendly tool for tracking FIFA
World Cup group standings.
8.2 Future Scope
• Extend the application to cover the Knockout Stage, including bracket generation and
match progression.
• Integrate a live sports data API to automatically fetch real match results instead of
manual entry.
• Add a backend database (e.g., using [Link] and MongoDB, or Firebase) to persist
results across sessions and devices.
• Implement the remaining FIFA tie-breaking rules, including head-to-head results and
fair-play points.
• Add data visualization features such as charts showing each team’s performance trend
across matches.
• Deploy the application publicly and add multi-language support for international users.
20
FIFA World Cup Points Table – Group Stage
REFERENCES
12. FIFA. “Regulations – FIFA World Cup.” FIFA Official Website.
13. Mozilla
Developer Network (MDN). “JavaScript Guide – [Link]().”
[Link].
14. Mozilla
Developer Network (MDN). “Document Object Model (DOM)
Documentation.” [Link].
15. W3C. “HTML5 and CSS3 Specifications.” World Wide Web Consortium.
16. Duckett, J. “HTML and CSS: Design and Build Websites.” Wiley, 2011.
17. Flanagan, D. “JavaScript: The Definitive Guide.” O’Reilly Media.
18. W3Schools. “CSS Responsive Web Design – Media Queries.” [Link].
19. [Addany additional textbooks, journal articles, or websites referenced during the
project.]
21