Embed Result to Your Site & API – Kolkata Fatafat

Are you looking to add a live real-time Kolkata FF table to your website? Whether you’re running a WordPress site or a custom-built website you can easily display Kolkata Fatafat result table using an API or embed codes. In this article, I will show you the process of embedding Kolkata Fatafat table that updates automatically with the latest information in real-time.

Prepare Your Website

First, decide where you want to place your table. If you’re using WordPress, you can add it to any post or page using a Custom HTML block. For other websites, you’ll need to edit the HTML of the page where you want the table to appear. To show the table in WordPress you can follow the below guide.

Use the following code into WordPress Post/Pages > Custom HTML Block to show the live Kolkata Fatafat table.

<table class="fatafat-table">
    <tbody id="apiTable">
        <!-- Table content will be inserted here auto from the API -->
    </tbody>
</table>

<script>
fetch('https://ffkolkata.org/wp-json/live-api/v1/get-data')
  .then(response => response.json())
  .then(data => {
    let tableHTML = `
        <tr>
            <th colspan="8">${data.date}</th>
        </tr>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
            <th>8</th>
        </tr>
        <tr>
            ${data.row1.map((value, index) => `
                <td${index === 5 ? ' class="highlight"' : ''}>
                    <span class="cell-value">${value}</span>
                    <br>
                    <span class="refresh-text" data-index="${index}"></span>
                </td>
            `).join('')}
        </tr>
        <tr>
            ${data.row2.map((value, index) => `
                <td${index === 5 ? ' class="highlight"' : ''}>
                    <span class="cell-value">${value}</span>
                    <br>
                    <span class="remaining-time" data-index="${index}"></span>
                </td>
            `).join('')}
        </tr>
    `;
    document.getElementById('apiTable').innerHTML = tableHTML;
  })
  .catch(error => console.error('Error:', error));
</script>

Simple Overview of The Codes

Add the HTML Structure

Start by adding this basic HTML structure to your page:

<table class="fatafat-table">
    <tbody id="apiTable">
        <!-- Table content will be added here auto -->
    </tbody>
</table>

This creates a dynamic table.

Include the JavaScript Code

Next, add the following JavaScript code right after your table HTML:

<script>
fetch('https://ffkolkata.org/wp-json/live-api/v1/get-data')
  .then(response => response.json())
  .then(data => {
    let tableHTML = `
        <tr>
            <th colspan="8">${data.date}</th>
        </tr>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
            <th>8</th>
        </tr>
        <tr>
            ${data.row1.map((value, index) => `
                <td${index === 5 ? ' class="highlight"' : ''}>
                    <span class="cell-value">${value}</span>
                    <br>
                    <span class="refresh-text" data-index="${index}"></span>
                </td>
            `).join('')}
        </tr>
        <tr>
            ${data.row2.map((value, index) => `
                <td${index === 5 ? ' class="highlight"' : ''}>
                    <span class="cell-value">${value}</span>
                    <br>
                    <span class="remaining-time" data-index="${index}"></span>
                </td>
            `).join('')}
        </tr>
    `;
    document.getElementById('apiTable').innerHTML = tableHTML;
  })
  .catch(error => console.error('Error:', error));
</script>

Style Your Table

To make your table look great, add some CSS. You can include this in your theme’s stylesheet or in Additional CSS:

Go to WordPress Dashboard > Appearance > Customize > Additional CSS and use your own styles or you can use this following:

.fatafat-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.fatafat-table th, .fatafat-table td {
    padding: 15px;
    text-align: center;
    border: 1px solid #ddd;
}

.fatafat-table th {
    background-color: #4a69bd;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
}

.fatafat-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.3);
}

.fatafat-table tr:hover {
    background-color: rgba(74, 105, 189, 0.1);
    transition: background-color 0.3s ease;
}

.fatafat-table td:hover {
    background-color: rgba(74, 105, 189, 0.2);
    transition: background-color 0.3s ease;
}

.fatafat-table .highlight {
    background-color: #ffeaa7;
}

.fatafat-table .cell-value {
    font-size: 1.2em;
    font-weight: bold;
}

.fatafat-table .refresh-text,
.fatafat-table .remaining-time {
    font-size: 0.8em;
    color: #666;
}

If you want to create your own style using the simple api, you can use this following API where it contains date, row1 and row2.

https://ffkolkata.org/wp-json/live-api/v1/get-data