How to build an application that lists sports data with jQuery - 1
utopian-io·@gotgame·
0.000 HBDHow to build an application that lists sports data with jQuery - 1
#### Repository
https://github.com/jquery/jquery
#### What Will I Learn?
By the end of this tutorial the user will know how to build an application that displays sports data for different sports and sport teams.
#### Requirements
In order to be able to follow this tutorial the user has to be able to use the following
- HTML/CSS/MaterializeCSS
- JavaScript/JQuery
- TheSportsDB public api
- AxiosJS
#### Difficulty
Intermediate
#### Tutorial Contents
In this post we are going to cover the following aspects of our application
- List all sports in the database
- List all leagues in the database
Before starting out with the application, we need to go to our project folder and create two new files `index.html` and `sports-data.js` for HTML and JavaScript code respectively.
After creating the files we'll go to our `index.html` file then add the MaterializeCSS starter code in order to initialize MaterializeCSS.
Copy and paste the following code in `index.html`
```
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="./style.css">
<title>View real time financial data</title>
</head>
<body>
<script src="./jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="./axios.js"></script>
<script src="./sports-data.js"></script>
</body>
</html>
```
Create two new files `jquery.js` to store `jQuery` code and `axios.js` to store `AxiosJS` code.
You can also pull in `jQuery` through cdn at `https://code.jquery.com/jquery-3.4.1.js` and `AxiosJs` through cdn at `https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js`.
After importing both modules we can start fully with the application.
##### List all sports in the database
To list all sports in the database, we firstly need to implement a materialize sidenav.
In order to create the sidenav, we need to go to `sports-data.js` file to initialize materialize sidenav.
In `sports-data.js` we need to firstly add the following code to prevent the file from pre-loading before the page loads completely.
```
$(document).ready(function(){});
```
Inside the `ready()` method we have an anonymous function. In order to initialize the sidenav, add the following code in the anonymous function.
```
$('.sidenav').sidenav();
```
The code should look like this now
```
$(document).ready(function(){
$('.sidenav').sidenav();
});
```
In `index.html` add the following code on the first line the inside the `<body></body>` tag to display our sidenav.
```
<ul id="slide-out all-sports" class="sidenav">
<li>Here we go</li>
</ul>
<div class="row">
<div class="col l12 m12 sidenav-area black">
<a href="#" data-target="slide-out" class="sidenav-trigger white-text link-text"><b>All Sports</b></a>
</div>
</div>
```
If we save both files and view the file in the browser we should be able to replicate the sidenav like it is shown below.
After successfully creating the sidenav, we need to populate the sidenav with a list of all sports stored in the api we are going to be using for this tutorial.
For this tutorial we are going utilize [TheSportsDB](https://www.thesportsdb.com/api.php) public api to extract sports data from the database.
[TheSportsDB](https://www.thesportsdb.com/api.php) public api is a crowdsourced sports data platform that provides realtime data on different sports and sport teams.
Originally, in order to use the platform the user needs to have an API key which can be gotten by registering for free on the site.
But, for test purposes users are allowed to use the default api key `1` to send requests to the api.
To list all sports stored in the api database, the user needs to first open `sports-data.js` and add the following code in the anonymous function we created earlier directly below the sidenav initialization code.
```
// list all sports in the database
axios.get('https://www.thesportsdb.com/api/v1/json/1/all_sports.php').then(response => {
console.log(response.data)
}).catch(err => {
console.log(err)
})
```
The code above will allow us to first of all view the data in the browser before outputting it.
If you save all files, reload the browser then view the browser console you should something identical to this
To display the data in the sidenav, add the following code in `sports-data.js`. Replace the line `console.log(response.data)` with the following code
```
const responseArray = response.data.sports;
let allSports = ``;
responseArray.forEach(sport => {
const sportName = sport.strSport
const collectionItem = `<li class="collection-item">${sportName}</li>`
allSports = allSports + collectionItem;
})
document.getElementById('slide-out').innerHTML = allSports;
```
In `index.html`, replace the block
```
<ul id="slide-out all-sports" class="sidenav">
<li>Here we go</li>
</ul>
```
with the following code
```
<ul id="slide-out" class="sidenav collection"></ul>
```
If you save both files and reload the page your sidenav should be populated like below
##### List all leagues in the database
In this section we'll be displaying all leagues in the database of the api on our page.
In order to do that, we need to go to `sports-data.js` and add the following code so we can view thee data initially in the browser console.
```
// list all leagues in the database
axios.get('https://www.thesportsdb.com/api/v1/json/1/all_leagues.php').then(response => {
console.log(response.data.leagues);
}).catch(err => {
console.log(err);
});
```
After reloading the page and opening the browser console, the user should be able to view a list of all leagues just like in the image below
To display the data on the page, replace the line `console.log(response.data.leagues);` with the following code
```
const responseArray = response.data.leagues;
let allLeagues = ``;
responseArray.forEach(league => {
const leagueName = league.strLeague
const sport = league.strSport
const alternativeName = league.strLeagueAlternate
const tableRow = `<li>
<div class="collapsible-header league-name" onclick="viewTeams()">${leagueName}</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>`
allLeagues = allLeagues + tableRow;
})
document.getElementById('leaguesTable').innerHTML = allLeagues;
```
In `index.html`, on the line directly below the block
```
<div class="col l12 m12 sidenav-area black">
<a href="#" data-target="slide-out" class="sidenav-trigger white-text link-text"><b>All Sports</b></a>
</div>
```
Add the following code
```
<div class="col l12 m12 center container card leaguesTableCard">
<div class="card-content">
<ul class="collapsible" id="leaguesTable"></ul>
</div>
</div>
```
#### Proof Of Work Done
https://github.com/olatundeee/sports-data-app👍 iamowomizz, iretiolajohnson, rashyem, eforucom, foodology, supu, mehta, trailmakers, stupid, mightypanda, amosbastian, helo, jaff8, fego, adamada, ulockblock, buckydurddle, jinger, mcfarhat, busy.pay, romeskie, filipino, steem-plus, steem-ua, newsrx, sargoon, utopian-io, tombstone, jga, cyprianj, cryptouno, dicetime,