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

 

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

*{
    margin0;
    padding0;
    outline0;
    font-family‘Roboto’sans-serif;
    text-aligncenter;
}

body{
    height100vh;
    background-imageurl(bg.jpg);
    background-sizecover;
    background-repeatno-repeat;
    background-positioncenter;
}

.container{
    positionabsolute;
    padding16px;
    top50%;
    left50%;
    transformtranslate(-50%,-50%);
    width50%;
    background-color:#FAFAFA;
    text-aligncenter;
    border-radius4px;
    text-transformuppercase;
    text-aligncenter;
}

.title-box{
    margin25px 0;
    displayflex;
    flex-directionrow;
    flex-wrapnowrap;
    justify-contentspace-around;
    align-itemscenter;
    width100%;
    font-size1.5em;
   
    
}
.title-box #goals{
    font-size1.8em;
}
.team{
    width100px;
}
.team img{
    height54px;
    width54px;
}
.matches-table{
    margin-top50px;
    displayflex;
    flex-directioncolumn;
}
.match-tile{
    positionrelative;
    left50%;
    transformtranslateX(-50%);
    margin10px 0;
    displayflex;
    flex-directionrow;
    justify-contentspace-around;
    align-itemscenter;
    
}
.match-tile img{
    width52px;
    height52px;
}
.match-tile p{
    font-size1.2rem;
}

.match-tile #goals{
    font-size1.8rem;
}
.match-tile .team{
    width100px;
}

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 = 1i<matchesList.length;i++){
       addMatchTile(matchesList[i]);
   }

}))
.catch(err => {
    console.log(err);
});

,