SAMPLE – CODE/INSTRUCTIONS – NBA APP

Overview of the NBA Scores and Stats App
This app allows users to:

View Live Scores: Show current NBA game scores.
Check Standings: Display team rankings by division or conference.
Search for Players: Find player stats like points per game, rebounds, and assists.
Follow Favorite Teams: Add a list of favorite teams for easy tracking.
Step 1: Set Up API Access
Sign Up for an API Key: Go to API-Basketball or The Sports DB and register for an API key.
Explore the Endpoints: Look at available endpoints for live scores, team standings, and player statistics. For API-Basketball, endpoints like /games, /teams, and /players will be helpful.
Step 2: Basic HTML Layout
Create an index.html file with these sections:

html
Copy code

NBA Scores and Stats App

NBA Scores and Stats

<div id="liveScores">
    <h2>Live Scores</h2>
    <div id="scoresContainer"></div>
</div>

<div id="standings">
    <h2>Standings</h2>
    <div id="standingsContainer"></div>
</div>

<div id="playerSearch">
    <h2>Search Player Stats</h2>
    <input type="text" id="playerInput" placeholder="Enter player name">
    <button id="searchPlayer">Search</button>
    <div id="playerStats"></div>
</div>

<script src="script.js"></script>

Step 3: JavaScript for Fetching and Displaying Data
Create a script.js file to handle API requests and data display. Replace YOUR_API_KEY with the actual API key you received from the API provider.

javascript
Copy code
const apiKey = ‘YOUR_API_KEY’;
const apiUrl = ‘https://api-basketball.p.rapidapi.com’; // Use this base URL if using API-Basketball

// Fetch live scores
async function getLiveScores() {
const response = await fetch(${apiUrl}/games?league=12&season=2023, {
headers: {
‘X-RapidAPI-Key’: apiKey,
‘X-RapidAPI-Host’: ‘api-basketball.p.rapidapi.com’
}
});
const data = await response.json();
displayScores(data.response);
}

// Display live scores
function displayScores(games) {
const scoresContainer = document.getElementById(‘scoresContainer’);
scoresContainer.innerHTML = ”;
games.forEach(game => {
const gameElement = document.createElement(‘div’);
gameElement.classList.add(‘game’);
gameElement.innerHTML = ${game.teams.home.name} vs. ${game.teams.away.name} Score: ${game.scores.home.total} - ${game.scores.away.total} Time: ${game.time} ;
scoresContainer.appendChild(gameElement);
});
}

// Fetch NBA standings
async function getStandings() {
const response = await fetch(${apiUrl}/standings?league=12&season=2023, {
headers: {
‘X-RapidAPI-Key’: apiKey,
‘X-RapidAPI-Host’: ‘api-basketball.p.rapidapi.com’
}
});
const data = await response.json();
displayStandings(data.response);
}

// Display standings
function displayStandings(teams) {
const standingsContainer = document.getElementById(‘standingsContainer’);
standingsContainer.innerHTML = ”;
teams.forEach(team => {
const teamElement = document.createElement(‘div’);
teamElement.classList.add(‘team’);
teamElement.innerHTML = Team: ${team.team.name} Wins: ${team.games.win.total} | Losses: ${team.games.lose.total} Points: ${team.points} ;
standingsContainer.appendChild(teamElement);
});
}

// Fetch player stats
async function getPlayerStats(playerName) {
const response = await fetch(${apiUrl}/players?search=${playerName}, {
headers: {
‘X-RapidAPI-Key’: apiKey,
‘X-RapidAPI-Host’: ‘api-basketball.p.rapidapi.com’
}
});
const data = await response.json();
displayPlayerStats(data.response[0]); // Display the first matching player
}

// Display player stats
function displayPlayerStats(player) {
const playerStats = document.getElementById(‘playerStats’);
playerStats.innerHTML = <h3>${player.firstname} ${player.lastname}</h3> Team: ${player.team.name} Position: ${player.position} Points per game: ${player.statistics.points} Rebounds per game: ${player.statistics.rebounds} Assists per game: ${player.statistics.assists} ;
}

// Event listeners for buttons
document.getElementById(‘searchPlayer’).addEventListener(‘click’, () => {
const playerName = document.getElementById(‘playerInput’).value;
getPlayerStats(playerName);
});

// Initial data load
getLiveScores();
getStandings();
Step 4: Style the App (CSS)
Create a styles.css file to style the layout:

css
Copy code
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
text-align: center;
}

liveScores, #standings, #playerSearch {

margin: 20px auto;
padding: 15px;
max-width: 600px;
border: 1px solid #ccc;
border-radius: 8px;
background: #fff;

}

h2 {
color: #0073e6;
}

.game, .team {
padding: 10px;
margin: 10px;
border-bottom: 1px solid #ddd;
}
Summary
API Requests: Get live scores, standings, and player stats.
Dynamic Display: Show scores, standings, and player details in different sections.
Event Handling: Allow user searches for players with stats dynamically displayed.
With this structure, students will have fun working with real NBA data and learning about asynchronous JavaScript, API integration, and creating responsive, interactive apps. Let me know if you’d like further customization ideas or additional features!