Here is how I build the website
The HTML document includes the following elements:
A title that displays “FIFA world cup”. A link to an external CSS file named “style.css”. A script tag that includes a link to the Chart.js library. A header tag that includes a title with the text “FIFA GROUP STAGE DRAW”. An unordered list with the id “teams-list” that will be populated with the names of 16 teams participating in the world cup. A header tag with the text “list of 16 Team”. A span tag for each team name with a class name that matches the country’s name. A div with the id “groups-list” that will display the drawn groups. A button with the text “DRAW GROUP” that will trigger the “makeGroups” function to randomly assign teams to four groups and display them in the “groups-list” div. A form that includes a button with the text “Give Points to compare”. A canvas element with the id “pie-chart” that will display the pie chart generated by the “makePieChart” function.
this is how the front page page looks like
The JavaScript code includes the following functions:
“displayTeams” function that takes the “teams” array, clears the “teams-list” unordered list, and populates it with the team names. “makeGroups” function that randomly shuffles the “teams” array and assigns four teams to each group.
The function then displays the groups in the “groups-list” div. “makePieChart” function that prompts the user to enter a group index (A-D) and then extracts the corresponding group from the “groups” array.
The function then prompts the user to enter the points earned by each team in the selected group and generates a pie chart that compares the points of the teams. The pie chart is displayed in the “pie-chart” canvas element using the Chart.js library. The code includes comments to explain the purpose of each function and variable.
Here is the source code
Html:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<head>
<title>FIFA world cup</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<body>
<h1>
<span class="title">FIFA GROUP STAGE DRAW</span></h1>
<h2>list of 16 Team</h2>
<ul id="teams-list"></ul>
<h3>
<span class="country ethiopia">ETHIOPIA</span>
<span class="country egypt">EGYPT</span>
<span class="country england">ENGLAND</span>
<span class="country cameroon">CAMEROON</span>
<span class="country usa">USA</span>
<span class="country argentina">ARGENTINA</span>
<span class="country brazil">BRAZIL</span>
<span class="country france">FRANCE</span>
<span class="country spain">SPAIN</span>
<span class="country portugal">PORTUGAL</span>
<span class="country sudan">SUDAN</span>
<span class="country mexico">MEXICO</span>
<span class="country germany">GERMANY</span>
<span class="country senegal">SENEGAL</span>
<span class="country north-korea">NORTH KOREA</span>
<span class="country mali">MALI</span>
</h3>
<div id="groups-list"></div>
<button onclick="makeGroups()">DRAW GROUP</button>
<form>
<br>
<button type="button" onclick="makePieChart()">Give Points to compare</button>
</form>
<canvas id="pie-chart"></canvas>
<script src="app.js"></script>
</body>
</html>JavaScript:
const teams = ["ETHIOPIA","EGYPT", "ENGLAND", "CAMEROON", "USA", "ARGENTINA", "BRAZIL", "FRANCE", "SPAIN", "PORTUGAL", "SUDAN", "MEXICO", "GERMANY", "SENEGAL", "NORTH KOREA", "MALI"];
let groups = [];
function displayTeams() {
const teamsList = document.getElementById("teams-list");
teamsList.innerHTML = "";
teams.forEach((team) => {
const listItem = document.createElement("li");
listItem.innerText = team;
teamsList.appendChild(listItem);
});
}
function makeGroups() {
const shuffled = teams.sort(() => 0.5 - Math.random());
groups = [ [shuffled[0], shuffled[1], shuffled[2], shuffled[3]],
[shuffled[4], shuffled[5], shuffled[6], shuffled[7]],
[shuffled[8], shuffled[9], shuffled[10], shuffled[11]],
[shuffled[12], shuffled[13], shuffled[14], shuffled[15]],
];
const groupsList = document.getElementById("groups-list");
groupsList.innerHTML = "";
groups.forEach((group, index) => {
const groupHeader = document.createElement("h2");
groupHeader.innerText = "Group " + String.fromCharCode(65 + index);
groupsList.appendChild(groupHeader);
const groupList = document.createElement("ul");
group.forEach((team) => {
const listItem = document.createElement("li");
listItem.innerText = team;
groupList.appendChild(listItem);
});
groupsList.appendChild(groupList);
});
}
function makePieChart() {
const groupIndex = prompt("Choose a group from (A-D) want to compare:");
const groupLetter = groupIndex.trim().toUpperCase();
const groupNumber = groupLetter.charCodeAt(0) - 65;
if (isNaN(groupNumber) || groupNumber < 0 || groupNumber >= groups.length) {
alert("Invalid group index.");
return;
}
const group = groups[groupNumber];
const chartData = {
labels: group,
datasets: [
{
label: "Points",
data: [],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56",
"#00CCFF",
"#FF5733",
"#C70039",
"#900C3F",
"#581845",
"#FFC300",
"#DAF7A6",
"#FF5733",
"#C70039",
"#900C3F",
"#581845",
"#FFC300",
"#DAF7A6",
]
}
]
};
group.forEach((team) => {
const pointsInput = prompt(`Enter points earned by ${team} in Group ${groupLetter}.`);
const points = parseInt(pointsInput, 10);
if (isNaN(points)) {
alert(`Points earned by ${team} must be a number.`);
return;
}
chartData.datasets[0].data.push(points);
});
const chartCanvas = document.getElementById("pie-chart");
chartCanvas.width = chartCanvas.offsetWidth;
chartCanvas.height = chartCanvas.offsetHeight;
const ctx = chartCanvas.getContext("2d");
ctx.clearRect(0, 0, chartCanvas.width, chartCanvas.height);
const myPieChart = new Chart(ctx, {
type: 'pie',
data: chartData,
});
}