سلام عليكم ورحمة الله وبركاته
شباب كيف يتم عمل جدول مباريات تلقائي باستخدام api
مثل هذا
سلام عليكم، استفسار بخصوص تصميم جدول مباريات كرة قدم
وعليكم السلام ورحمة الله،
الرابط الذي شاركته لا يحتوي على اي جدول،
ولكن يمكنك عمل الجدول باستخدام js حيث تقوم بإرسال طلب إلى الخادم الذي يقدم الـ api وتقوم بعرض البيانات التي يرسلها الخادم مثل :
async function getGames() {
let url = 'example.com/api/route';
try {
let res = await fetch(url);
return await res.json();
} catch (error) {
console.log(error);
}
}
وبعد ذلك تقوم بحقن المعلومات التي تحصل عليها داخل الـ html مثل :
async function renderGames () {
let games = await getGames();
let html = '';
users.forEach(game=> {
let htmlSegment = `<div class="game">
<img src="${game.pic}" >
<h2>${game.title} ${user.date}</h2>
</div>`;
html += htmlSegment;
});
let container = document.querySelector('.container');
container.innerHTML = html;
}
renderGames ();
حيث يكون الـ html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"></div>
<script src="js/app.js"></script>
</body>
</html>
وغالباً ما يحتاج مثل هذا الـ api إلى رمز سري يجب ان تحصل عليه قبل ان تستطيع استخدامه وتحتاج لإرساله مع الطلب fetch.
التعليقات