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 public api to extract sports data from the database.
TheSportsDB 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>
Thank you for your contribution @gotgame.
After analyzing your tutorial we suggest the following points below:
The difficulty level of this tutorial is basic. Receiving data from an API and listing is something that nowadays is used a lot and is intuitive enough to do.
It would be interesting to have a GIF to demonstrate the result of what you were explaining.
It may be more complex to demonstrate the results of each league and also the ranking of each league. However, it would be very interesting to see this.
Thank you for your work in developing this tutorial.
Looking forward to your upcoming tutorials.
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Chat with us on Discord.
[utopian-moderator]
Thank you for your review, @portugalcoin! Keep up the good work!
Hi, @gotgame!
You just got a 0.17% upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.
Hi @gotgame!
Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server
Hey, @gotgame!
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!
This is a test
Yet another test comment