Sports Betting App
About this app
A free sports betting app for placing bets on various sports events.
Sports Betting App Sports Betting App Select Sport: Football Basketball Tennis Baseball Bet Amount: Place Bet Result:
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>Sports Betting App</title>
<meta name="description" content="A free sports betting app for placing bets on various sports events.">
<meta name="keywords" content="sports betting, betting app, free app, sports 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() {
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
background-color: #f7f7f7;
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
font-weight: bold;
}
.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-group button {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
.form-group button:hover {
background-color: #555;
}
.result {
text-align: center;
margin-top: 30px;
}
.result h2 {
color: #333;
margin-bottom: 10px;
}
.result p {
color: #777;
}
.result .error {
color: #ff0000;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Sports Betting App</h1>
<div class="form-group">
<label for="sport">Select Sport:</label>
<select id="sport">
<option value="football">Football</option>
<option value="basketball">Basketball</option>
<option value="tennis">Tennis</option>
<option value="baseball">Baseball</option>
</select>
</div>
<div class="form-group">
<label for="betAmount">Bet Amount:</label>
<input type="number" id="betAmount" placeholder="Enter the amount you want to bet">
</div>
<div class="form-group">
<button id="placeBet">Place Bet</button>
</div>
<div class="result">
<h2>Result:</h2>
<p id="betResult"></p>
<p id="errorMessage" class="error"></p>
</div>
</div>
<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
// Get elements
var sportSelect = document.getElementById("sport");
var betAmountInput = document.getElementById("betAmount");
var placeBetButton = document.getElementById("placeBet");
var betResult = document.getElementById("betResult");
var errorMessage = document.getElementById("errorMessage");
// Place bet function
function placeBet() {
var selectedSport = sportSelect.value;
var betAmount = betAmountInput.value;
// Validate inputs
if (selectedSport === "") {
errorMessage.textContent = "Please select a sport";
return;
}
if (betAmount === "") {
errorMessage.textContent = "Please enter a bet amount";
return;
}
// Clear error message
errorMessage.textContent = "";
// Simulate bet result
var randomResult = Math.random();
var resultMessage = "";
if (randomResult < 0.5) {
resultMessage = "Congratulations! You won $" + (betAmount * 2);
} else {
resultMessage = "Oops! You lost $" + betAmount;
}
// Display result
betResult.textContent = resultMessage;
}
// Add event listener to place bet button
placeBetButton.addEventListener("click", placeBet);
});
} catch (error) {
throw error;
}
</script>
</body>
</html>
NEW APPS
These are apps made by the community!