JSFiddle - React, Tailwind, and code Playground

by moku23

HTML

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Leaderboard</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <h1>Leaderboard</h1>
    <table class="table">
      <thead>
        <tr>
          <th>Rank</th>
          <th>Name</th>
          <th>Profit</th>
          <th>Profit Factor</th>
        </tr>
      </thead>
      <tbody>
        {% for user in users %}
          <tr>
            <td>{{ user.rank }}</td>
            <td><img src="{{ user.profilePicture }}" alt="{{ user.firstName }} {{ user.lastName }}"></td>
            <td>{{ user.firstName }} {{ user.lastName }}</td>
            <td>{{ user.profit }}</td>
            <td>{{ user.profitFactor }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</body>

CSS

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 #ccc;
}

th {
  background-color: #f25430;
  color: white;
  font-weight: bold;
  padding: 10px;
}

td {
  padding: 10px;
}

.rank {
  text-align: center;
}

.name {
  text-align: left;
}

.profit {
  text-align: right;
}

.profit-factor {
  text-align: right;
}

.profile-picture {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.leaderboard {
  margin-top: 20px;
  background-color: #110e26;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px 0 #ccc;
}

.leaderboard .row:nth-of-type(odd) {
  background-color: #f9f9f9;
}

.leaderboard .row:nth-of-type(even) {
  background-color: #ffffff;
}

.leaderboard .row .col-1 {
  width: 1%;
}

.leaderboard .row .col-2 {
  width: 20%;
}

.leaderboard .row .col-3 {
  width: 20%;
}

.leaderboard .row .col-4 {
  width: 20%;
}

.leaderboard .row .col-5 {
  width: 20%;
}

.leaderboard .row .col-6 {
  width: 20%;
}

.leaderboard .row .col-2 a {
  color: #2d29c5;
}

.leaderboard .row .col-3 {
  color: #2d29c5;
}

.leaderboard .row .col-4 {
  color: #2d29c5;
}

.leaderboard .row .col-5 {
  color: #2d29c5;
}

.leaderboard .row .col-6 {
  color: #2d29c5;
}

JavaScript

const apiUrl = 'https://api.ofpfunding.com/api/leaderboard/getTop20';

async function getLeaderboard() {
  const response = await fetch(apiUrl);
  const data = await response.json();
  users = data;
  renderLeaderboard();
}

function renderLeaderboard() {
  const leaderboard = document.querySelector('.leaderboard');
  leaderboard.innerHTML = '';
  for (const user of users) {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${user.rank}</td>
      <td><img src="${user.profilePicture}" alt="${user.firstName} ${user.lastName}"></td>
      <td>${user.firstName} ${user.lastName}</td>
      <td>${user.profit}</td>
      <td>${user.profitFactor}</td>
    `;
    leaderboard.appendChild(row);
  }
}

getLeaderboard();