Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

cricket live score api implementation added #171

Merged
merged 1 commit into from
Jun 2, 2024
Merged

cricket live score api implementation added #171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions Existing_API_Collection/Cricket_Score_API/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
60 changes: 60 additions & 0 deletions Existing_API_Collection/Cricket_Score_API/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
71 changes: 71 additions & 0 deletions Existing_API_Collection/Cricket_Score_API/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
});
1 change: 1 addition & 0 deletions Existing_API_Collection/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
|[GeoAPI](./GeoAPI/)| GeoAPI is a simple RESTful API that allows you to convert addresses to geographic coordinates (latitude and longitude) and vice versa. This API is built using Node.js and Express.|

Loading