Leaderboard
##How To Use
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex justify-center items-center bg-neutral-800 p-4 text-gray-200 min-h-screen">
<div class="w-full max-w-xl bg-neutral-900 py-6 px-4 rounded-lg border border-neutral-700">
<div id="leaderboard"></div>
</div>
<script>
fetch('https://api.i-as.dev/api/leaderboard', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
"limit": 10,
"competition": {
"name": "I-As Developer",
"logo": "https://i.pinimg.com/originals/bc/ce/f3/bccef3acf376bba141d56eb0d8fcfc09.jpg"
},
"data": [
{
"name": "~Fitri Hy",
"status": "628XXXXXXXX",
"image": "https://i.pinimg.com/originals/bc/ce/f3/bccef3acf376bba141d56eb0d8fcfc09.jpg",
"score": 142
},
{
"name": "~Amelia",
"status": "628XXXXXXXX",
"image": "https://images.pexels.com/photos/762020/pexels-photo-762020.jpeg?cs=srgb&dl=pexels-olly-762020.jpg&fm=jpg",
"score": 197
},
{
"name": "~LewisHmln",
"status": "628XXXXXXXX",
"image": "https://www.formula1.com/content/dam/fom-website/drivers/K/KIMRAI01_Kimi_R%C3%A4ikk%C3%B6nen/kimrai01.png.transform/2col-retina/image.png",
"score": 77
},
{
"name": "~Raikkonen",
"status": "628XXXXXXXX",
"image": "https://www.formula1.com/content/dam/fom-website/drivers/D/DANRIC01_Daniel_Ricciardo/danric01.png.transform/2col-retina/image.png",
"score": 52
},
{
"name": "~Norris",
"status": "628XXXXXXXX",
"image": "https://www.formula1.com/content/dam/fom-website/drivers/L/LANNOR01_Lando_Norris/lannor01.png.transform/2col-retina/image.png",
"score": 22
}
]
})
})
.then(response => response.json())
.then(data => {
document.getElementById("leaderboard").innerHTML = data.leaderboardElement;
})
.catch(error => console.error('Error:', error));
</script>
</body>
</html>