Calculator Tools Calculator Tools
Create

Cricket Match Prediction App

Sep 25, 2023

About this app

Predict cricket match outcomes with the Cricket Match Prediction App

Cricket Match Prediction App Cricket Match Prediction App Team 1: Team 2: Date: Predict

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Cricket Match Prediction App</title>
<meta name="description" content="Predict cricket match outcomes with the Cricket Match Prediction App">
<meta name="keywords" content="cricket, match, prediction, app">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.

// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
// Function to predict the match outcome
function predictMatch() {
// Get the input values
var team1 = $("#team1").val();
var team2 = $("#team2").val();
var date = $("#date").val();

// Perform the prediction logic
// ...

// Display the prediction result
$("#predictionResult").text("The winner of the match between " + team1 + " and " + team2 + " on " + date + " is " + predictedWinner + ".");
}

// Event listener for the predict button
$("#predictButton").click(function() {
predictMatch();
});
});

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>

<style>
/* App CSS Goes Here */
body {
background-color: #f5f5f5;
font-family: 'Roboto', sans-serif;
}

.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
margin-bottom: 20px;
color: #333;
}

label {
display: block;
margin-bottom: 10px;
color: #333;
}

input[type="text"] {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
margin-bottom: 20px;
}

button {
padding: 10px 20px;
font-size: 16px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #555;
}

#predictionResult {
margin-top: 20px;
font-size: 18px;
color: #333;
text-align: center;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Cricket Match Prediction App</h1>

<label for="team1">Team 1:</label>
<input type="text" id="team1" placeholder="Enter Team 1">

<label for="team2">Team 2:</label>
<input type="text" id="team2" placeholder="Enter Team 2">

<label for="date">Date:</label>
<input type="text" id="date" placeholder="Enter Date">

<button id="predictButton">Predict</button>

<div id="predictionResult"></div>
</div>
</body>
</html>