Preview:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Player Details</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #00e6e6;
            color: white;
            padding: 10px;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }
        .player-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .player-card {
            border: 1px solid #ccc;
            width: 30%;
            margin: 15px;
            text-align: center;
            padding: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }
        .player-card img {
            width: 150px;
            height: auto;
        }
        .player-card h3 {
            color: teal;
        }
        .player-card p {
            font-size: 16px;
            margin: 5px 0;
        }
        .update-btn {
            background-color: lightblue;
            border: none;
            padding: 10px;
            cursor: pointer;
        }
        .popup {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
        }
        .popup input, .popup button {
            margin: 10px 0;
            padding: 10px;
        }
    </style>
</head>
<body>

<div class="header">Player Details</div>

<div class="player-list" id="player-list">
    <!-- Player cards will be dynamically generated here -->
</div>

<!-- Popup for updating rank -->
<div class="popup" id="update-popup">
    <h3>Update The Rank</h3>
    <p id="player-name">Player Name</p>
    <label for="rank">Rank:</label>
    <input type="number" id="rank" min="1">
    <br>
    <button id="saveButton">SaveUpdate</button>
    <button onclick="closePopup()">Cancel</button>
</div>

<script>
    const players = [
        {name: "MS Dhoni", role: "Batsman", matches: 206, rank: 13, img: "https://app.e-box.co.in/uploads/Image/6107/dhoni.png"},
        {name: "Ravendra Jadeja", role: "Batsman", matches: 185, rank: 17, img: "https://app.e-box.co.in/uploads/Image/6107/jadeja.png"},
        {name: "Rohit Sharma", role: "Bowler", matches: 165, rank: 21, img: "https://app.e-box.co.in/uploads/Image/6107/sharma.png"},
        {name: "Suresh Raina", role: "Bowler", matches: 135, rank: 35, img: "https://app.e-box.co.in/uploads/Image/6107/raina.png"},
        {name: "Virat Kohli", role: "Batsman", matches: 190, rank: 12, img: "https://app.e-box.co.in/uploads/Image/6107/kohli.png"},
        {name: "Yuvraj Singh", role: "Bowler", matches: 142, rank: 26, img: "https://app.e-box.co.in/uploads/Image/6107/yuvaraj.png"}
    ];

    let currentPlayer = null;

    function displayPlayers() {
        const playerList = document.getElementById('player-list');
        playerList.innerHTML = '';
        players.forEach((player, index) => {
            const playerCard = `
                <div class="player-card" id="player${index + 1}">
                    <img src="${player.img}" alt="${player.name}">
                    <h3>${player.name}</h3>
                    <p>Role: ${player.role}</p>
                    <p>Total Matches: ${player.matches}</p>
                    <p>Rank: <span id="player-rank${index + 1}">${player.rank}</span></p>
                    <button class="update-btn" id="player-button${index + 1}" onclick="openPopup(${index})">Update Player</button>
                </div>
            `;
            playerList.innerHTML += playerCard;
        });
    }

    function openPopup(index) {
        currentPlayer = index;
        document.getElementById('player-name').textContent = players[index].name;
        document.getElementById('rank').value = players[index].rank;
        document.getElementById('update-popup').style.display = 'block';
    }

    function closePopup() {
        document.getElementById('update-popup').style.display = 'none';
    }

    document.getElementById('saveButton').addEventListener('click', function() {
        const newRank = document.getElementById('rank').value;
        if (currentPlayer !== null && newRank) {
            players[currentPlayer].rank = newRank;
            document.getElementById(`player-rank${currentPlayer + 1}`).textContent = newRank;
            closePopup();
        }
    });

    // Display the player cards on page load
    displayPlayers();
</script>

</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter