Node.js Express Cricket Live Statistics App in Javascript Using ESPN Cricinfo API Project For Absolute Beginners 2020

Node.js Express Cricket Live Statistics App in Javascript Using ESPN Cricinfo API Project For Absolute Beginners 2020

 

 

 

Get Started

 

 

In order to get started we need to install the following dependencies which are as follows:

 

npm init -y

 

This will initialize a package.json file for your app which contains the basic information about the app.

 

npm i express

npm i ejs

npm i request

npm i cric-player-info

 

 

Screenshots

 

 

 

 

 

 

 

 

 

Live Demo

 

 

You can see the live demo of the app here

 

 

 

 

Building the App

 

 

 

Now to build the app we need to create the index.js file and copy paste the following code to start the express server

 

 

 

const express = require('express')
const cricData= require('cric-player-info');
const bodyParser = require('body-parser')
const app = express()

app.use(bodyParser.urlencoded({extended:false}))
app.use(bodyParser.json())
app.set('view engine','ejs')

app.get('/',(req,res) =>{
    res.render('index')
})

app.listen(5000,() =>{
    console.log("App is listening on Port 5000")
})

 

 

 

Now we need to create the views folder and inside this we need to create a file called as index.ejs and copy paste the following code

 

 

views/index.ejs

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>Cricket Player Stats App</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <link
      href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
      rel="stylesheet"
    />
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

  </head>
  <style>
    .ui-autocomplete {
      max-height: 300px;
      overflow-y: auto;
      /* prevent horizontal scrollbar */
      overflow-x: hidden;
    }
  </style>
  <body>
    <div class="container">
      <form id="form">
        <div class="form-group">
          <label for="player">Player Name</label>
          <input
            class="form-control"
            id="playername"
            placeholder="Enter Player Name"
            required
          />
        </div>
        <div class="form-group">
          <button class="btn btn-danger btn-block">Get Player Info</button>
        </div>
      </form>
      <div id="result"></div>
    </div>
  </body>
</html>

 

 

 

So now after this we need to inject the player names when the user types inside the input field making a autocomplete suggestion field. For this we will be making use of AJAX and we will be making several ajax calls to the express server

See also  Build a Guess the Number Game in Browser Using Vanilla Javascript Full Project For Beginners

 

 

 

<script>
    var playerNames = [];
    var result;
    var inputplayer;
    $("#playername").on("keyup", function () {
      inputplayer = $(this).val();
      $.ajax({
        method: "POST",
        url: "/getplayernames",
        data: { input: $(this).val() },
        success: function (data) {
          //console.log(data.names)
          playerNames = data.names;
          let match = playerNames.filter((name) => {
            const regex = new RegExp(`^${inputplayer}`, "gi");
            return name.match(regex);
          });

          if (inputplayer.length === 0) {
            playerNames = [];
          }

          $("#playername").autocomplete({
            source: match,
          });
        },
      });
    });

    $("#playername").on("change", function () {
      inputplayer = $(this).val();
    });

    $("#form").submit(function (e) {
      e.preventDefault();

      $("#button").text("Fetching Player Stats")

      $("#button").prop("disabled","true")

      $("#result").empty()

      $.ajax({
        method: "POST",
        url: "/getplayerinfo",
        data: { playername: inputplayer },
        success: function (data) {
          console.log(data.info);
          
          if(data.info == "Player not found")
          {
            $("#playername").val("")
          $("#button").removeAttr("disabled");  
          $("#button").text("Get Player Info")
            swal("Error", "Player Name Doesn't Found", "error");
          }else{

          $("#playername").val("")
          $("#button").removeAttr("disabled"); 
          $("#button").text("Get Player Info")

          result = `
                        
                        <table class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Date of Birth (Age)</th>
        <th>Birth Place</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>${data.info.name}</td>
        <td>${data.info.dateOfBirth}</td>
        <td>${data.info.birthPlace}</td>
        <td>${data.info.country}</td>
      </tr>
    </tbody>
    </table>

    <table class="table table-striped">
    <thead>
      <tr>
        <th>Test Debut</th>
        <th>ODI Debut</th>
        <th>T20I Debut</th>
        <th>IPL Debut</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>${data.info.testDebut}</td>
        <td>${data.info.odiDebut}</td>
        <td>${data.info.t20iDebut}</td>
        <td>${data.info.iplDebut}</td>
      </tr>
    </tbody>
    </table>

    <table class="table table-striped">
    <thead>
      <tr>
        <th>Last Test</th>
        <th>Last ODI</th>
        <th>Last T20I</th>
        <th>Last IPL Match</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>${data.info.lastTest}</td>
        <td>${data.info.lastOdi}</td>
        <td>${data.info.lastT20i}</td>
        <td>${data.info.lastIpl}</td>
      </tr>
    </tbody>
    </table>
    <br>



    <h4 class="text-center">Batting Statistics</h4>

    <br>

    <table class="table table-striped">
    <thead>
      <tr>
        <th>No of Test Matches</th>
        <th>Test Runs</th>
        <th>Average</th>
        <th>Strike Rate</th>
        <th>No of 50's</th>
        <th>No of 100's</th>
        <th>High Score</th>
        <th>No of Fours</th>
        <th>No of Sixes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>${data.info.batting_test_matches}</td>
        <td>${data.info.batting_test_runs}</td>
        <td>${data.info.batting_test_average}</td>
        <td>${data.info.batting_test_strikeRate}</td>
        <td>${data.info.batting_test_fifties}</td>
        <td>${data.info.batting_test_hundreds}</td>
        <td>${data.info.batting_test_highScore}</td>
        <td>${data.info.batting_test_fours}</td>
        <td>${data.info.batting_test_sixes}</td>
      </tr>
    </tbody>
    </table>
    
    
    <table class="table table-striped">
    <thead>
      <tr>
        <th>No of ODI Matches</th>
        <th>ODI Runs</th>
        <th>Average</th>
        <th>Strike Rate</th>
        <th>No of 50's</th>
        <th>No of 100's</th>
        <th>High Score</th>
        <th>No of Fours</th>
        <th>No of Sixes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>${data.info.batting_odi_matches}</td>
        <td>${data.info.batting_odi_runs}</td>
        <td>${data.info.batting_odi_average}</td>
        <td>${data.info.batting_odi_strikeRate}</td>
        <td>${data.info.batting_odi_fifties}</td>
        <td>${data.info.batting_odi_hundreds}</td>
        <td>${data.info.batting_odi_highScore}</td>
        <td>${data.info.batting_odi_fours}</td>
        <td>${data.info.batting_odi_sixes}</td>
      </tr>
    </tbody>
    </table>

    <table class="table table-striped">
    <thead>
      <tr>
        <th>No of T20I Matches</th>
        <th>T20I Runs</th>
        <th>Average</th>
        <th>Strike Rate</th>
        <th>No of 50's</th>
        <th>No of 100's</th>
        <th>High Score</th>
        <th>No of Fours</th>
        <th>No of Sixes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>${data.info.batting_t20i_matches}</td>
        <td>${data.info.batting_t20i_runs}</td>
        <td>${data.info.batting_t20i_average}</td>
        <td>${data.info.batting_t20i_strikeRate}</td>
        <td>${data.info.batting_t20i_fifties}</td>
        <td>${data.info.batting_t20i_hundreds}</td>
        <td>${data.info.batting_t20i_highScore}</td>
        <td>${data.info.batting_t20i_fours}</td>
        <td>${data.info.batting_t20i_sixes}</td>
      </tr>
    </tbody>
    </table>

    <table class="table table-striped">
    <thead>
      <tr>
        <th>No of IPL Matches</th>
        <th>IPL Runs</th>
        <th>Average</th>
        <th>Strike Rate</th>
        <th>No of 50's</th>
        <th>No of 100's</th>
        <th>High Score</th>
        <th>No of Fours</th>
        <th>No of Sixes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>${data.info.batting_ipl_matches}</td>
        <td>${data.info.batting_ipl_runs}</td>
        <td>${data.info.batting_ipl_average}</td>
        <td>${data.info.batting_ipl_strikeRate}</td>
        <td>${data.info.batting_ipl_fifties}</td>
        <td>${data.info.batting_ipl_hundreds}</td>
        <td>${data.info.batting_ipl_highScore}</td>
        <td>${data.info.batting_ipl_fours}</td>
        <td>${data.info.batting_ipl_sixes}</td>
      </tr>
    </tbody>
    </table>

    <br>

    <h4 class="text-center">Bowling Statistics</h4>

    <br>

    <table class="table table-striped">
    <thead>
      <tr>
        <th>No of Test Matches</th>
        <th>Test Wickets</th>
        <th>Average</th>
        <th>Strike Rate</th>
        <th>Economy</th>
        <th>No of 5 Wickets Hauls</th>
        <th>Best Performance</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>${data.info.batting_test_matches}</td>
        <td>${data.info.bowling_test_bestBowlinginInnings}</td>
        <td>${data.info.bowling_test_strikeRate}</td>
        <td>${data.info.bowling_test_fiveWickets}</td>
        <td>${data.info.bowling_test_average}</td>
        <td>${data.info.bowling_test_tenWickets}</td>
        <td>${data.info.bowling_test_bestBowlinginMatch}</td>
      </tr>
    </tbody>
    </table>
    
    
    <table class="table table-striped">
    <thead>
      <tr>
        <th>No of ODI Matches</th>
        <th>ODI Wickets</th>
        <th>Average</th>
        <th>Strike Rate</th>
        <th>Economy</th>
        <th>No of 5 Wickets Hauls</th>
        <th>Best Performance</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>${data.info.batting_odi_matches}</td>
        <td>${data.info.bowling_odi_bestBowlinginInnings}</td>
        <td>${data.info.bowling_odi_strikeRate}</td>
        <td>${data.info.bowling_odi_fiveWickets}</td>
        <td>${data.info.bowling_odi_average}</td>
        <td>${data.info.bowling_odi_tenWickets}</td>
        <td>${data.info.bowling_odi_bestBowlinginMatch}</td>
      </tr>
    </tbody>
    </table>

    <table class="table table-striped">
    <thead>
      <tr>
        <th>No of T20I Matches</th>
        <th>T20I Wickets</th>
        <th>Average</th>
        <th>Strike Rate</th>
        <th>Economy</th>
        <th>No of 5 Wickets Hauls</th>
        <th>Best Performance</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>${data.info.batting_t20i_matches}</td>
        <td>${data.info.bowling_t20i_bestBowlinginInnings}</td>
        <td>${data.info.bowling_t20i_strikeRate}</td>
        <td>${data.info.bowling_t20i_fiveWickets}</td>
        <td>${data.info.bowling_t20i_average}</td>
        <td>${data.info.bowling_t20i_tenWickets}</td>
        <td>${data.info.bowling_t20i_bestBowlinginMatch}</td>
      </tr>
    </tbody>
    </table>

    <table class="table table-striped">
    <thead>
      <tr>
        <th>No of IPL Matches</th>
        <th>IPL Wickets</th>
        <th>Average</th>
        <th>Strike Rate</th>
        <th>Economy</th>
        <th>No of 5 Wickets Hauls</th>
        <th>Best Performance</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>${data.info.batting_ipl_matches}</td>
        <td>${data.info.bowling_ipl_bestBowlinginInnings}</td>
        <td>${data.info.bowling_ipl_strikeRate}</td>
        <td>${data.info.bowling_ipl_fiveWickets}</td>
        <td>${data.info.bowling_ipl_average}</td>
        <td>${data.info.bowling_ipl_tenWickets}</td>
        <td>${data.info.bowling_ipl_bestBowlinginMatch}</td>
      </tr>
    </tbody>
    </table>



                        `;
          $("#result").append(result)
  }
        },
      });
    });
  </script>

 

See also  Build a Ezoic Ads or Google Adsense Income Revenue Calculator Web App in Browser Using HTML5 & Javascript Full Project For Beginners

 

DOWNLOAD SOURCE CODE

 

Leave a Reply