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

Popular posts from this blog

Disclaimer gernater tool

  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Disclaimer Generator</title> <style>* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } .form-container { background-color: #f1f1f1; padding: 20px; margin: 20px; border-radius: 10px; } .form-container h1 { text-align: center; margin-bottom: 20px; } .form-container form { display: flex; flex-direction: column; } .form-container label { margin-top: 10px; font-size: 18px; } .form-container input { padding: 10px; border-radius: 5px; border: none; font-size: 18px; margin-bottom: 20px; } .form-container button { padding: 10px; background-color: #4caf50; color: white; border: none; border-radius: 5px; font-size: 18px; cursor: pointer;
Read more

Language translator tool

  <!DOCTYPE html> <html> <head> <title>Language Translator</title> <style> body { font-family: Arial, sans-serif; } .translator { max-width: 500px; margin: 0 auto; padding: 20px; } label { font-weight: bold; display: block; margin-bottom: 5px; } select, textarea { width: 100%; padding: 10px; margin-bottom: 10px; } button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; cursor: pointer; } #translated-text { margin-top: 10px; font-weight: bold; } </style> </head> <body> <div class="translator"> <h1>Language Translator</h1> <label for="source-language">Source Language:</label> <select id="source-language"> <option value="af">
Read more