Creating a Live T20 World Cup 2026 Match Schedule & Stats with HTML, CSS & JavaScript

As someone who loves both cricket and coding, I wanted to combine the two into a fun project. With the T20 World Cup 2026 on the horizon, I decided to build a simple, responsive match schedule page that updates dynamically—perfect for fans who don’t want to miss a single game.

Tools & Tech I Used

HTML & CSS – for layout and clean design

JavaScript – for generating fixtures and live updates

Optional JSON – to store and manage match data more efficiently

Step 1: Designing the Schedule (CSS)
.schedule {
background: #ffffff;
padding: 20px;
border-radius: 10px;
max-width: 650px;
margin: auto;
font-family: Arial, sans-serif;
}
.schedule h2 {
color: #028a3d;
text-align: center;
}
.schedule li {
padding: 12px;
border-bottom: 1px solid #ccc;
}

Step 2: Adding Matches Dynamically (JavaScript)
const fixtures = [
{ date: "2026-06-01", teams: "India vs Pakistan" },
{ date: "2026-06-03", teams: "Australia vs England" },
{ date: "2026-06-05", teams: "New Zealand vs South Africa" },
];

const container = document.getElementById("match-list");
fixtures.forEach(match => {
const li = document.createElement("li");
li.textContent = ${match.date} - ${match.teams};
container.appendChild(li);
});

Live Preview

I’ve published a working version here: T20 World Cup 2026

It features more matches, improved styles, and automatic updates as fixture details get released. This project was a great way to practice coding while staying connected to cricket excitement!