Hello everyone
I started learning the fetch API, and an building a simple basketball score tracking app.
I noticed that it isn’t loading very fast or at all sometimes. Could you take a look at it in dev tools and see if you can tell why? https://mystifying-bardeen-7391ea.netlify.com/
I know the code is pretty messy, and I need to remove a lot of the commented stuff, but I’m assuming that wouldn’t be why.
Is there a certain way that I’m doing something causing it to be resource intensive?
I’m not sure if the way I’m accessing the properties within the object is the best way to do it. For example, I’m doing something like: homeTeamDiv.textContent = nextGame[0].competitions[0].competitors[0].team.shortDisplayName
Would it be better to just set nextGame[0].competitions[0].competitors[0].team.shortDisplayName
` to a variable, then set the homeTeamDiv.textContent to that variable?
The other possibility that I’ve considered is because I’m just using the cdn for tailwind for prototyping. I still wouldn’t think it would make it that slow though.
I’m open to any suggestions on how I should refactor the code. I want to get it right before I continue.
Thanks!
Here’s all the code:
const PISTONS_URL = 'http://site.api.espn.com/apis/site/v2/sports/basketball/nba/teams/8'
fetch(PISTONS_URL)
.then((response) => {
return response.json();
})
.then((pistonsJSON) => {
//Set the JSON data for games to a variable
const pistonsData = pistonsJSON.team
const nextGame = pistonsData.nextEvent
//create function to show upcoming or current game
const showNextGameData = () => {
//let startTime = document.getElementById('startTime')
let startDate = document.getElementById('startDate')
startDate.textContent = nextGame[0].competitions[0].status.type.shortDetail
//Set home team div to display home team name
let homeTeamDiv = document.getElementById('homeTeamDiv')
homeTeamDiv.textContent = nextGame[0].competitions[0].competitors[0].team.shortDisplayName
//create img element using home teams logo and append to home team div
let homeTeamLogo = document.getElementById('homeTeamLogo')
homeTeamLogo.src = nextGame[0].competitions[0].competitors[0].team.logos[0].href
//Set quarter and clock
let quarter = document.getElementById('quarter')
quarter.textContent = nextGame[0].competitions[0].status.period
let remainingTime = document.getElementById('remainingTime')
remainingTime.textContent = nextGame[0].competitions[0].status.displayClock
//Hide time remaining if game hasn't started yet
let timeLeft = document.getElementById('timeLeft')
if (quarter.textContent = '0') {
timeLeft.style.display = 'none'
} else {
}
//Set visitor team div to display visitor team name
let visitorTeamDiv = document.getElementById('visitorTeamDiv')
visitorTeamDiv.textContent = `${nextGame[0].competitions[0].competitors[1].team.shortDisplayName}`
let visitorTeamLogo = document.getElementById('visitorTeamLogo')
visitorTeamLogo.src = nextGame[0].competitions[0].competitors[1].team.logos[0].href
}
showNextGameData()
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>NBA</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto bg-blue-600 py-4">
<h1 class="text-3xl mx-4">Stons</h1>
</div>
<h2 class="text-base my-5">Next Game:<span id="startDate" class="mx-2"></span></h2>
<div id="nextGameContainer" class="border border-gray-300 rounded mx-4 my-4 text-lg flex justify-between max-w-sm md:max-w-lg lg:max-w-xl mx-auto">
<div id="homeContainer" class="flex flex-col items-center py-4 pl-4">
<img id="homeTeamLogo" class="w-12 h-12"></img>
<div id="homeTeamDiv" class=""></div>
</div>
<div id="timeLeft" class="flex flex-col items-center">
<p class="text-xs">Quarter: <span id="quarter"></span></p>
<div id="remainingTime"></div>
</div>
<!-- <span id="startTime" class="text-base"></span> -->
<div id="visitorContainer" class="flex flex-col py-4 pr-4">
<img id="visitorTeamLogo" class="w-12 h-12"></img>
<div id="visitorTeamDiv" class=""></div>
</div>
</div>
<!-- <script src="./dayjs.js"></script> -->
<script src="./app.js"></script>
</body>
</html>