Blog

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

 

Related posts:

  1. Node.js Express Speech Translator Live Web App Using Google Translate API Tutorial For Beginners 2020
  2. Build a Custom Google Chrome Extension in HTML5 and Javascript Full Tutorial For Absolute Beginners 2020
  3. Node.js Express ZOOM Clone Peer to Peer WebRTC Video Chat App Full Live Project Demo 2020-21
  4. Node.js Express Raw JSON to Excel File Converter Full Web App Using json2xls Library Deployed to Live Website 2020
  5. Node.js Express Minify JSON Online Converter Full Web App Deployed to Live Website 2020
  6. React.js Youtube Data API V3 Live Subscriber Count App Full Tutorial 2020
  7. Building a Live Webcam Video Recorder Which Uploads Videos to Google Drive in Javascript Full Project For Beginners
  8. Node.js Express Bulk Domain or Website Validator Checker Full Web App or Project in Javascript Full Tutorial 2020
  9. How to Build HTML Live Editor like W3schools,VSCode,Codepen in Javascript Full Project
  10. Build a GraphQL Server CRUD API in Node.js and Express Using Express-GraphQL Library Full Project For Beginners
  11. Node.js Express FFMPEG Merge Multiple Videos Web App Project Tutorial For Beginners 2020
  12. Node.js Express Youtube Data API V3 Upload Video to Youtube in Javascript Full Project For Beginners
  13. Node.js Express Project to Remove Background From Image File or URL Using remove.bg API Module Library in Javascript Full Tutorial For Beginners
  14. Node.js Express Instagram User Profile Information Finder App in Javascript Full Project For Beginners
  15. Build Youtube Channel Info App in Node.js and Express Using Youtube Data API V3 Library Project
  16. Vue.js TODO CRUD App Using Vuex State Management Library and JSONPlaceolder Rest API Full Project For Beginners in 2020
  17. Python Tkinter GUI Script to Make a LIVE INR/USD Currency Converter Using BeautifulSoup4 and Requests Library Full Project For Beginners
  18. Build a Voice Notepad Using Native File System API & Web Speech API in Javascript Full Project For Beginners
  19. Node.js Express jsPDF Convert Text File to PDF Online App in Javascript Deployed to Website 2020
  20. Node.js Express Bulk Domain Age Checker App Built Using Javascript & AJAX Full Tutorial with Source Code 2020
See also  Build Node.js Text to PNG,JPEG Image Converter With Custom Fonts Using text2png Library in Browser Using Javascript Full Project For Beginners

Leave a Reply