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);
});
