Hello Devs, In this new post I'm going to show you how to make a football live scoreboard app with HTML, CSS, and Javascript. it's a very cool project that you can add to your portfolio and amaze your future potential client. For this project, we will need to use a Restful API to get all the data about the matches and the score. for more information visit the API documentation
first, we will start by creating the layout of our app using HTML and CSS
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Soccer Live Score</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>ScoreBoard</h1>
<div class="title-box">
<p>Local Team</p>
<p id="elapsed">45'</p>
<p>Visitor Team</p>
</div>
<div class="title-box">
<div class="team">
<img id="homeLogo" >
<p id="homeName">Team name</p>
</div>
<p id="goals">3 - 1</p>
<div class="team">
<img id="awayLogo">
<p id="awayName">Team name</p>
</div>
</div>
<hr>
<div id="matchTable" class="matches-table">
</div>
</div>
<script src="main.js"></script>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Roboto');
*{
margin: 0;
padding: 0;
outline: 0;
font-family: 'Roboto', sans-serif;
text-align: center;
}
body{
height: 100vh;
background-image: url(bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.container{
position: absolute;
padding: 16px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 50%;
background-color:#FAFAFA;
text-align: center;
border-radius: 4px;
text-transform: uppercase;
text-align: center;
}
.title-box{
margin: 25px 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
width: 100%;
font-size: 1.5em;
}
.title-box #goals{
font-size: 1.8em;
}
.team{
width: 100px;
}
.team img{
height: 54px;
width: 54px;
}
.matches-table{
margin-top: 50px;
display: flex;
flex-direction: column;
}
.match-tile{
position: relative;
left: 50%;
transform: translateX(-50%);
margin: 10px 0;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.match-tile img{
width: 52px;
height: 52px;
}
.match-tile p{
font-size: 1.2rem;
}
.match-tile #goals{
font-size: 1.8rem;
}
.match-tile .team{
width: 100px;
}
And now let's add our javascript code, but before we do this, make sure to create a free account in football API and use your own API key just add as a value for the variable
//getting the DOM elements
var elapsedTime = document.querySelector("#elapsed");
var homeTeamImage = document.querySelector("#homeLogo");
var homeTeamName = document.querySelector("#homeName");
var awayTeamImage = document.querySelector("#awayLogo");
var awayTeamName = document.querySelector("#awayName");
var lastMatchGoal = document.querySelector("#goals");
var matchTable = document.querySelector("#matchTable");
//the functions to create an element
function addMatchTile(data){
//createing the tile div
var matchtile = document.createElement('div');
matchtile.classList.add("match-tile");
//creating the home match box
var homeTeam = document.createElement('div');
homeTeam.classList.add("team");
//creating the image and the text
var homeTileTeamName = document.createElement('p');
homeTileTeamName.innerHTML = data['teams']['home']['name'];
var homeTileTeamLogo = document.createElement('img');
homeTileTeamLogo.src=data['teams']['home']['logo'];
homeTeam.appendChild(homeTileTeamLogo);
homeTeam.appendChild(homeTileTeamName);
var awayTeam = document.createElement('div');
awayTeam.classList.add("team");
//creating the image and the text
var awayTileTeamName = document.createElement('p');
awayTileTeamName.innerHTML = data['teams']['away']['name'];
var awayTileTeamLogo = document.createElement('img');
awayTileTeamLogo.src=data['teams']['away']['logo'];
awayTeam.appendChild(awayTileTeamLogo);
awayTeam.appendChild(awayTileTeamName);
//createing the score
var score = document.createElement('p');
score.innerHTML = data['goals']['home'] + " - " + data['goals']['away'];
//append all the element to the parent
matchtile.appendChild(homeTeam);
matchtile.appendChild(score);
matchtile.appendChild(awayTeam);
matchTable.appendChild(matchtile);
}
//fetching the data
fetch("https://v3.football.api-sports.io/fixtures?live=all", {
"method": "GET",
"headers": {
"x-rapidapi-host": "v3.football.api-sports.io",
"x-rapidapi-key": "PLACE YOUR API KEY HERE"
}
})
.then(response => response.json().then(data => {
var matchesList = data['response'];
var fixture = matchesList[0]['fixture'];
var goals = matchesList[0]['goals'];
var teams = matchesList[0]['teams'];
console.log(matchesList.length);
//Now let's set our first match
elapsedTime.innerHTML = fixture['status']['elapsed'] + "'";
homeTeamImage.src = teams['home']['logo'];
homeTeamName.innerHTML = teams['home']['name'];
awayTeamImage.src = teams['away']['logo'];
awayTeamName.innerHTML = teams['away']['name'];
lastMatchGoal.innerHTML = goals['home']+ " - " + goals['away'];
for(var i = 1; i<matchesList.length;i++){
addMatchTile(matchesList[i]);
}
}))
.catch(err => {
console.log(err);
});
Make a Football Live Scoreboard App with JavaScript
Reviewed by Medics
on
September 30, 2020
Rating:
Reviewed by Medics
on
September 30, 2020
Rating:
This blog is very helpfull information thank you so much for sharing this.
ReplyDeleteHow to make watch with HTML & CSS ?
https://www.maxonpoll.online/2020/10/how-to-make-watch-with-html-css.html
Good evening, first I want to congratulate you for the Excellent Tutorial on the Creation of an Electronic Scoreboard updated in real time and I would like to take the opportunity to ask a question about this part of the code below that is in main.js
ReplyDelete//fetching the data
fetch("https://v3.football.api-sports.io/fixtures?live=all", {
"method": "GET",
"headers": {
"x-rapidapi-host": "v3.football.api-sports.io",
"x-rapidapi-key": "PLACE YOUR API KEY HERE"
}
})
.then(response => response.json().then(data => {
var matchesList = data['response'];
var fixture = matchesList[0]['fixture'];
var goals = matchesList[0]['goals'];
var teams = matchesList[0]['teams'];
console.log(matchesList.length);
//Now let's set our first match
elapsedTime.innerHTML = fixture['status']['elapsed'] + "'";
homeTeamImage.src = teams['home']['logo'];
homeTeamName.innerHTML = teams['home']['name'];
awayTeamImage.src = teams['away']['logo'];
awayTeamName.innerHTML = teams['away']['name'];
lastMatchGoal.innerHTML = goals['home']+ " - " + goals['away'];
for(var i = 1; i<matchesList.length;i++){
addMatchTile(matchesList[i]);
}
I would like to know how I do it instead of retrieving data from a web service ... retrieving data from a database which would provide us with customized championships and leaderboards..there's even a suggestion for the next video but how could I adapt this part of the code for a call to a table in a MySql database?
Sincerely - Luiz Antonio - Brazil
How do I know which function to call, element to create and etc if it were to be another API &key from another source?
Deletethe code error
DeleteFive-a-side football is the ultimate sport to get all your friends for a stag get-together and have a old-fashioned good time. football news
ReplyDeleteVery Usefull information keep sharing this oklesson
ReplyDeletehttps://youtu.be/qMdsZYGWw2I
ReplyDeleteDownload free blogger script
Vimeo thumbnail downloaded script
A lot of people having an incorrect image about the cash advance loans or sometimes refer it as bad credit payday loans. free football streaming websites
ReplyDeleteWow, excellent post. I'd like to draft like this too - taking time and real hard work to make a great article. This post has encouraged me to write some posts that I am going to write soon. ผลบà¸à¸¥
ReplyDeleteYes, I am entirely agreed with this article, and I just want say that this article is very helpful and enlightening. I also have some precious piece of concerned info !!!!!!Thanks. ผลบà¸à¸¥à¸ªà¸”
ReplyDeletethank you for the information sharing. Please also check my free livescore @ https://spbotop.com
ReplyDeleteBetting on football requires a lot of background research regarding the form of the players in the team and their physical status. norwich city news
ReplyDeleteOwh😇
ReplyDeleteApi
ReplyDeleteThis article gives the light in which we can observe the reality. This is very nice one and gives indepth information. Thanks for this nice article. ดูบà¸à¸¥à¸ªà¸”
ReplyDeleteHow do I make it so I wont go over 100 requests/day. Btw great site, keep it up.
ReplyDeleteHi All,
ReplyDeleteGreat video and thanks for sharing. I have encountered an interesting error which I'm unsure of. When running the main.js code as you have posted above with the live= all API (https://v3.football.api-sports.io/fixtures?live=all), everything seems to work as it should. However, when you try and customise the API and add in specific leagues, an error occurs. The API I am trying to implement as per the API documentation is the following:
"https://v3.football.api-sports.io/fixtures?live=307"
But when trying to view the live results of that league you get an error:
TypeError: Cannot read properties of undefined (reading 'fixture')
at scores.js:58:33
How is it that when all fixtures that day are implemented this works fine but when you specify a league like I have, you encounter issues? I can paste full code snippet if anyone responds.
Hi, I was reding your message but i don't know how to fix it. I'm doing a football Live Score but the team names doesn't show up on the score sheet, is it the same with you? Here is my code:
Deletevar elapsedTime = document.querySelector("#elapsed");
var homeTeamLogo = document.querySelector("#homeLogo");
var homeTeamName = document.querySelector("#homeName");
var awayTeamLogo = document.querySelector("#awayLogo");
var awayTeamName = document.querySelector("#awayName");
var lastMatchGoals = document.querySelector("#goals");
var matchTable = document.querySelector("#matchTable");
function addMatchTile(data){
var matchTile = document.createElement('div');
matchTile.classList.add("match-tile");
//home team box
var homeTeam = document.createElement('div');
homeTeam.classList.add("team");
//logo og texti við home
var homeTileLogo = document.createElement('img');
homeTileLogo.src = data['teams']['home']['logo'];
var homeTileName = document.createElement('p');
homeTeamName.innerHTML = data['teams']['home']['name'];
homeTeam.appendChild(homeTileLogo);
homeTeam.appendChild(homeTileName);
//away team box
var awayTeam = document.createElement('div');
awayTeam.classList.add("team");
//logo og texti við away
var awayTileLogo = document.createElement('img');
awayTeamName.innerHTML = data['teams']['away']['name'];
var awayTileName = document.createElement('p');
awayTileLogo.src = data['teams']['away']['logo'];
awayTeam.appendChild(awayTileLogo);
awayTeam.appendChild(awayTileName);
//Búa til score
var score = document.createElement('p');
score.innerHTML = data['goals']['home'] + " - "+ data['goals']['away'];
matchTile.appendChild(homeTeam);
matchTile.appendChild(score);
matchTile.appendChild(awayTeam);
matchTable.appendChild(matchTile);
}
function getData(){
//Hér kemur API og fleiri upplýsingar
//https://api-football-v1.p.rapidapi.com/v3/timezone
fetch("https://api-football-v1.p.rapidapi.com/v3/fixtures?live=all", {
"method" : "Get",
"headers" : {
"x-rapidapi-host": "api-football-v1.p.rapidapi.com",
"x-rapidapi-key": "my key",
}
})
.then(response => response.json().then(data => {
var matchesList = data['response'];
var fixture = matchesList[0]['fixture'];
var goals = matchesList[0]['goals'];
var teams = matchesList[0]['teams'];
console.log(matchesList.length);
//Now let's set our first match
elapsedTime.innerHTML = fixture['status']['elapsed'] + "'";
homeTeamLogo.src = teams['home']['logo'];
homeTeamName.innerHTML = teams['home']['name'];
awayTeamLogo.src = teams['away']['logo'];
awayTeamName.innerHTML = teams['away']['name'];
lastMatchGoals.innerHTML = goals['home']+ " - " + goals['away'];
for(var i = 1; i {
console.log(err);
});
}
getData();
how can i get api for all sports scores
ReplyDeleteim also having a problem with the fixtures, i keep getting this error: "TypeError: Cannot read properties of undefined (reading 'fixture')". How do i fix this?
ReplyDelete