Merge pull request #171 from Yashgabani845/cricket

cricket live score api implementation added
dishamodi0910 · Jun 2, 2024 · 7c4932a · 7c4932a
2 parents f87ee56 + e9c0095
commit 7c4932a
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 0 deletions.
diff --git a/Existing_API_Collection/Cricket_Score_API/README.md b/Existing_API_Collection/Cricket_Score_API/README.md
@@ -0,0 +1,26 @@
+# Cricket Score Dashboard
+
+This is a simple web application that displays current cricket matches, live scores, and a list of players using data fetched from cricket APIs.
+
+## Features
+
+- Displays current cricket matches with details like venue and date.
+- Shows live scores of ongoing cricket matches.
+- Provides a list of cricket players.
+
+## Technologies Used
+
+- HTML
+- CSS (Bootstrap)
+- JavaScript
+
+## How to Use
+
+1. Clone this repository to your local machine.
+
+ ```bash
+ git clone <repository-url>
+
+2. go to folder Cricket_Score_API
+
+3. Run index.html file
diff --git a/Existing_API_Collection/Cricket_Score_API/index.html b/Existing_API_Collection/Cricket_Score_API/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Cricket Score Dashboard</title>
+ <!-- Bootstrap CSS -->
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+ <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+ <a class="navbar-brand" href="#">Cricket Score Dashboard</a>
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarNav">
+ <ul class="navbar-nav">
+ <li class="nav-item">
+ <a class="nav-link" href="#currentMatches">Current Matches</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#liveScores">Live Scores</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#playerList">Player List</a>
+ </li>
+ </ul>
+ </div>
+ </nav>
+
+ <div class="container mt-5">
+ <div id="currentMatches" class="mt-5">
+ <h2>Current Matches</h2>
+ <div id="currentMatchesList" class="row">
+ <!-- Data will be fetched and displayed here -->
+ </div>
+ </div>
+ <div id="liveScores" class="mt-5">
+ <h2>Live Scores</h2>
+ <div id="liveScoresList" class="row">
+ <!-- Data will be fetched and displayed here -->
+ </div>
+ </div>
+ <div id="playerList" class="mt-5">
+ <h2>Player List</h2>
+ <ul id="playerListItems">
+
+ </ul>
+ </div>
+ </div>
+
+
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+ <script src="script.js">
+
+ </script>
+</body>
+</html>
diff --git a/Existing_API_Collection/Cricket_Score_API/script.js b/Existing_API_Collection/Cricket_Score_API/script.js
@@ -0,0 +1,71 @@
+// Function to fetch current matches
+function fetchCurrentMatches() {
+ fetch('https://api.cricapi.com/v1/currentMatches?apikey=9df522d1-26ac-494c-9085-484911641a9f&offset=0')
+ .then(response => response.json())
+ .then(data => {
+ const currentMatchesList = document.getElementById('currentMatchesList');
+ currentMatchesList.innerHTML = ''; // Clear previous content
+ data.data.forEach(match => {
+ const matchCard = `
+ <div class="col-md-6 mb-3">
+ <div class="card">
+ <div class="card-body">
+ <h5 class="card-title">${match.name}</h5>
+ <p class="card-text">Status: ${match.status}</p>
+ <p class="card-text">Venue: ${match.venue}</p>
+ <p class="card-text">Date: ${match.date}</p>
+ </div>
+ </div>
+ </div>
+ `;
+ currentMatchesList.innerHTML += matchCard;
+ });
+ });
+ }
+
+ // Function to fetch live scores
+ function fetchLiveScores() {
+ fetch('https://api.cricapi.com/v1/cricScore?apikey=9df522d1-26ac-494c-9085-484911641a9f')
+ .then(response => response.json())
+ .then(data => {
+ const liveScoresList = document.getElementById('liveScoresList');
+ liveScoresList.innerHTML = ''; // Clear previous content
+ data.data.forEach(score => {
+ const scoreCard = `
+ <div class="col-md-6 mb-3">
+ <div class="card">
+ <div class="card-body">
+ <h5 class="card-title">${score.t1} vs ${score.t2}</h5>
+ <p class="card-text">Status: ${score.status}</p>
+ <p class="card-text">Series: ${score.series}</p>
+ </div>
+ </div>
+ </div>
+ `;
+ liveScoresList.innerHTML += scoreCard;
+ });
+ });
+ }
+
+ // Function to fetch player list
+ function fetchPlayerList() {
+ fetch('https://api.cricapi.com/v1/players?apikey=9df522d1-26ac-494c-9085-484911641a9f&offset=0')
+ .then(response => response.json())
+ .then(data => {
+ const playerListItems = document.getElementById('playerListItems');
+ playerListItems.innerHTML = ''; // Clear previous content
+ data.data.forEach(player => {
+ const playerItem = `
+ <li>${player.name} - ${player.country}</li>
+ `;
+ playerListItems.innerHTML += playerItem;
+ });
+ });
+ }
+
+ // Fetch data when the page loads
+ document.addEventListener('DOMContentLoaded', () => {
+ fetchCurrentMatches();
+ fetchLiveScores();
+ fetchPlayerList();
+ });
diff --git a/Existing_API_Collection/README.md b/Existing_API_Collection/README.md
@@ -16,6 +16,7 @@
 |[Product Store API](./ProductStoreAPI/)| A Product Store API using NodeJS, ExpressJS, MongoDB and Mongoose |
 |[Bored API](./BoredAPI/)|Bored API is a versatile tool designed to provide users with random activity suggestions when they're feeling bored. With this API, users can access a wide range of activities to spark inspiration and alleviate boredom. From creative hobbies to outdoor adventures, Bored API offers something for everyone.|
 |[Unsplash API](./unsplashApi/)| An API that enables users to retrieve high quality and copyright free Images from Unsplash and also get random Images |
+|[Cricket API](./Cricket_Score_API/)| this api gives all the current matches and upcoming matches also give scores of current matches and gives players list |
 |[NewsBuster](./news-buster-api/)|This API helps you gain worldly knowledge with a better frontend by fetching API |
 |[JSON_Placeholder_API](./JSON_Plaeholder_API/)| this api is used to test basic crud operations on fake data posts |
 |[Gold Silver Price](./Gold,silver_price_API/)|This API helps you check realtime price of gold and silver for each categories |