Making a Live Score Board – Client

Here comes the cool part now. The client! using the famous XMLHttpRequest

The basic logic of creating the client is this

  • Make asynchronous calls to the server to fetch the match data
  • Parse the XML data
  • Using DOM update the content of the Score board
  • And obviously add a timer to refresh the asynchronous HTTP calls


It should look something like this.
Score card screenshot

The first time you load the page (most probably it should be a small pop-up window) you can write the basic HTML…
and the main HTML would be something like this.

<div id="scoreboard">

<p style='font-weight:bold;'>
<span id="matchsex">Womens</span> <span id="matchround">Semifinal</span>: 
<span id="player1">Hingis</span> vs <span id="player1">Sharapova</span> 
(<span id="elapsedtime">1.5h</span>)</span> 
</p>

<table style="border-collapse:collapse;" border="1" bordercolor="#888888" 
cellspacing="0" cellpadding="5">
	<tr>
		<td align="left" > </td>
		<td colspan="3" align="left" >Sets</td>
		<td align="left" >Game</td>
	</tr>
	<tr>
		<td align="left" id="matchplayer1">Hingis </td>
		<td align="center" id="setplay1">6</td>
		<td align="center" id="setplay2">3</td>
		<td align="center" id="setplay3">4</td>
		<td align="center" id="gamepoints1">30</td>
	</tr>
	<tr>
		<td align="left" id="matchplayer2">Sharapova</td>
		<td align="center" id="setplay1">4</td>
		<td align="center" id="setplay2">6</td>
		<td align="center" id="setplay3">2</td>
		<td align="center" id="gamepoints2">15</td>
	</tr>
</table>

</div>

Let us consider some important IDs (the id attributes) that we’ve used

  • matchsex: To set the type of match women’s, men’s, etc.
  • matchround: Quarter final, semi final, etc
  • player1, player2: Player’s names id
  • elapsedtime: Elapsed Time
  • matchplayer1, matchplayer2: Score Board’s Player’s name
  • serving: If the player is serving
  • setplay1, setplayx: Playerx’s set
  • gamepoints1, gamepoints2: Player1 and 2’s gamepoints

Leave a Reply

Your email address will not be published. Required fields are marked *