🇧🇦 Bosnia and Herzegovina Confirms ticket for 2026 WORLD CUP! 🇧🇦✈️🇺🇸

After twelve years of waiting, the moment has finally arrived. Under the leadership of Sergej Barbarez, the Dragons have secured a place on the biggest stage – the 2026 FIFA World Cup, which will be hosted by the USA, Canada and Mexico..

The squad, led by captain and legend Edin Džeko, showed a tenacity throughout the qualifiers that reminds us of the golden times of 2014. The new generation, in which Demirović and Katić shine, has proven that Bosnia is not afraid of anyone.

Technical Documentation: BIH World Cup 2026 Match Tracker

This documentation outlines the specialized architecture and styling used to create the Bosnia and Herzegovina football match tracker, optimized for both high-end desktop displays and mobile devices like the iPhone.

🎨 Visual Identity & UI Design

The interface follows a Cyber-Brutalism aesthetic combined with Journal Technical elements. It features high-contrast borders, monochromatic data points, and a "glassmorphism" inspired layout.

📱 Adaptive Mobile Architecture

A key challenge was ensuring the "Google-style" match overview remains legible on narrow screens.

• Desktop Mode: Uses flex-direction: row to spread team logos, scores, and match metadata horizontally across the screen.
• Mobile Mode (iPhone): Activated via @media (max-width: 768px), the layout switches to flex-direction: column. The score is hoisted to the top for immediate visibility.

⚙️ JSON & Data JS Logic

Since third-party APIs often restrict international team data in free tiers, this module uses a Local JSON/Object strategy for 100% reliability and speed.

const data = {
    future: [
        {
            league: "WORLD CUP - GROUP B",
            date: "JUN 12, 2026",
            opp: "CANADA",
            score: "1:1",
            venue: "MONTREAL",
            logo: "🇨🇦"
        },
        {
            league: "WORLD CUP - GROUP B",
            date: "JUN 18, 2026",
            opp: "SWITZERLAND",
            score: "21:00",
            venue: "VANCOUVER",
            logo: "🇨🇭"
        },
        {
            league: "WORLD CUP - GROUP B",
            date: "JUN 24, 2026",
            opp: "QATAR",
            score: "21:00",
            venue: "KANSAS CITY",
            logo: "🇶🇦"
        }
    };

Automatic Status Processing

The script includes an intelligent parser that determines the "Status Color" based on the score string. It identifies wins (including penalty shootouts) and losses to automatically apply the correct CSS class (status-win or status-loss).

Dynamic Rendering

The renderMatches function iterates through the data and generates HTML strings, injecting them into the DOM without refreshing the page. This ensures the "Journal" aesthetic remains consistent regardless of content changes.