Cricket
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Cricket Scoreboard</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body { font-family: sans-serif; text-align: center; margin-top: 50px; }
.score { font-size: 24px; margin-bottom: 20px; }
button { margin: 5px; padding: 10px 20px; font-size: 16px; }
.message { color: green; margin-top: 10px; height: 20px; }
</style>
</head>
<body>
<h2>Cricket Scoreboard</h2>
<div class="score">
Runs: <span id="runs">0</span> |
Wickets: <span id="wickets">0</span> |
Overs: <span id="overs">0.0</span>
</div>
<button class="run" data-run="1">+1 Run</button>
<button class="run" data-run="4">+4 Runs</button>
<button class="run" data-run="6">+6 Runs</button>
<button id="wicket">+Wicket</button>
<button id="ball">+Ball</button>
<div class="message" id="msg"></div>
<script>
let runs = 0, wickets = 0, balls = 0;
function updateDisplay() {
$('#runs').text(runs);
$('#wickets').text(wickets);
$('#overs').text(Math.floor(balls / 6) + "." + (balls % 6));
}
function showMessage(text) {
$('#msg').text("Updating...");
setTimeout(() => {
$('#msg').text(text);
updateDisplay();
}, 500);
}
$('.run').click(function() {
let run = parseInt($(this).data('run'));
runs += run;
showMessage(run + " run added");
});
$('#wicket').click(function() {
if (wickets < 10) {
wickets++;
showMessage("Wicket added");
} else {
$('#msg').text("All wickets fallen!");
}
});
$('#ball').click(function() {
if (balls < 300) {
balls++;
showMessage("Ball added");
} else {
$('#msg').text("Max overs reached!");
}
});
updateDisplay();
</script>
</body>
</html>
Comments
Post a Comment