MLB Athletics - Player Statistics

``` ```css /* style.css */ body { font-family: sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } header { background-color: #2c3e50; color: #fff; padding: 1rem 0; display: flex; justify-content: space-between; align-items: center; } header nav a { color: #fff; text-decoration: none; margin: 0 1rem; } main { padding: 2rem; } #player-search { margin-bottom: 2rem; } #player-details { background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 1rem; margin-top: 1rem; } #player-stats-table { width: 100%; border-collapse: collapse; } #player-stats-table th, #player-stats-table td { border: 1px solid #ddd; padding: 8px; text-align: left; } footer { background-color: #2c3e50; color: #fff; text-align: center; padding: 1rem 0; } ``` ```javascript /* script.js */ document.getElementById('search-button').addEventListener('click', function() { const playerName = document.getElementById('player-name').value.trim(); if (playerName) { // Placeholder for API call or data retrieval const playerData = { name: playerName, // Add more player data here, or fetch it from an API }; // Populate player details document.getElementById('player-details').style.display = 'block'; document.getElementById('player-name-detail').textContent = playerData.name; document.getElementById('player-image').src = 'player_images/' + playerData.name + '.jpg'; document.getElementById('player-position-detail').textContent = "Center Fielder"; document.getElementById('player-team-detail').textContent = "New York Yankees"; document.getElementById('player-age-detail').textContent = "32"; populatePlayerStats(playerData); } }); function populatePlayerStats(playerData) { const statsBody = document.getElementById('player-stats-body'); statsBody.innerHTML = ''; const stats = [ { name: 'Batting Average', value: '0.285'}, { name: 'Home Runs', value: '42'}, { name: 'Runs Batted In', value: '110'}, { name: 'Stolen Bases', value: '18'} ]; stats.forEach(stat => { const tr = document.createElement('tr'); const td1 = document.createElement('td'); const td2 = document.createElement('td'); td1.textContent = stat.name; td2.textContent = stat.value; tr.appendChild(td1); tr.appendChild(td2); statsBody.appendChild(tr); }); }