// ملاحظة: هذا الرابط وهمي كمثال، يجب استبداله برابط الـ API الحقيقي الذي ستشترك فيه
const apiUrl = 'https://api.football-data.org/v4/competitions/WC/matches';
const apiKey = 'ضع_مفتاح_الـ_API_الخاص_بك_هنا';
// استهداف الحاوية التي سنضع فيها المباريات (موجودة في تصميم الـ HTML)
const container = document.querySelector('.matches-container');
// دالة لجلب البيانات
async function fetchWorldCupMatches() {
try {
const response = await fetch(apiUrl, {
method: 'GET',
headers: {
'X-Auth-Token': apiKey // طريقة إرسال المفتاح تختلف حسب الـ API المستخدم
}
});
const data = await response.json();
// مسح المحتوى الثابت القديم لتعويض مكانه بالبيانات الحية
container.innerHTML = '';
// المرور على المباريات وإضافتها للتصميم
data.matches.forEach(match => {
// تحديد حالة المباراة لعرض الشارة المناسبة
let statusBadge = '';
if (match.status === 'IN_PLAY') {
statusBadge = '
مباشر';
} else if (match.status === 'FINISHED') {
statusBadge = '
انتهت';
} else {
statusBadge = '
لم تبدأ بعد';
}
// تحديد النتيجة (إذا لم تبدأ المباراة نضع الوقت، وإذا بدأت نضع النتيجة)
let matchScoreOrTime = match.status === 'TIMED'
? new Date(match.utcDate).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
: `${match.score.fullTime.home ?? 0} - ${match.score.fullTime.away ?? 0}`;
// بناء كرت المباراة برمجياً (بنفس تصميم الـ HTML السابق)
const matchCard = `
${match.homeTeam.name}
${matchScoreOrTime}
${statusBadge}
${match.awayTeam.name}
`;
// إضافة الكرت إلى الصفحة
container.innerHTML += matchCard;
});
} catch (error) {
console.error('حدث خطأ أثناء جلب البيانات:', error);
container.innerHTML = '
تعذر جلب بيانات المباريات حالياً.
';
}
}
// تشغيل الدالة فور فتح الصفحة
fetchWorldCupMatches();
