As both a cricket enthusiast and a coding learner, I’ve always wanted to mix my passion for sports with web development. With the upcoming T20 World Cup 2026, I thought—why not build a real-time, responsive match schedule page for fans like me?
In this post, I’ll walk through how I created a simple but stylish schedule component using HTML, CSS, and a bit of JavaScript.
Tools & Tech Used
HTML & CSS (for structure and styling)
JavaScript (for date sorting & live updates)
Optional JSON data structure for match info
Step 1: Styling the Schedule (CSS)
.schedule {
background: #f9f9f9;
padding: 20px;
border-radius: 12px;
max-width: 600px;
margin: auto;
font-family: sans-serif;
}
.schedule h2 {
color: #006a4e;
text-align: center;
}
.schedule li {
padding: 10px;
border-bottom: 1px solid #ddd;
}
Step 2: Populating Matches Dynamically (JavaScript)
const matches = [
{ 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 list = document.getElementById("match-list");
matches.forEach(match => {
const li = document.createElement("li");
li.textContent = ${match.date} - ${match.teams};
list.appendChild(li);
});
Live Example
You can check out a live version of this on my site here: T20 world cup 2026
It includes more styling, updated fixtures, and dynamic updates as new info is released.
Top comments (0)