Toss coin game tool
<!DOCTYPE html>
<html>
<head>
<title>Coin Toss Game</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 100px;
}
h1 {
font-size: 36px;
margin-bottom: 30px;
}
.button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-bottom: 20px;
cursor: pointer;
border-radius: 4px;
}
.result {
font-size: 24px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Coin Toss Game</h1>
<button class="button" onclick="tossCoin()">Toss Coin</button>
<div class="result" id="result"></div>
</div>
<script>
function tossCoin() {
var resultElement = document.getElementById("result");
var coinImage = document.getElementById("coinImage");
// Generate a random number between 0 and 1
var random = Math.random();
// If the random number is less than 0.5, it's heads. Otherwise, it's tails.
var result = (random < 0.5) ? "Heads" : "Tails";
// Set the result text and coin image accordingly
resultElement.textContent = "Result: " + result;
coinImage.src = (result === "Heads") ? "heads.png" : "tails.png";
}
</script>
</body>
</html>
Comments
Post a Comment
sunil191280@gmail.com