"Coin-Flip-Game"
Bootstrap 4.1.1 Snippet by mayurkarthik

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html lang="en"> <body> <h2>Guess</h2> <button onclick="flipCoin('heads')">Heads</button> <button onclick="flipCoin('tails')">Tails</button> <p id="result-text"></p> </body> </html>
body { background-color: rgb(51, 35, 50); color: white; font-family: Arial, sans-serif; text-align: center; margin-top: 50px; } button { background-color: transparent; color: white; border: 2px solid white; padding: 10px 20px; font-size: 18px; margin: 10px; cursor: pointer; transition: 0.3s; } #result-text { margin-top: 20px; font-size: 20px; }
function flipCoin(guess) { const randomGuess = Math.random(); let computerMove = ''; if (randomGuess >= 0 && randomGuess < 0.5) { computerMove = 'heads'; } else { computerMove = 'tails'; } let result = ''; if (computerMove === guess) { result = 'win'; } else { result = 'lose'; } document.getElementById("result-text").textContent = `You guessed ${guess}.Coin tosses ${computerMove}. You ${result}!`; }

Related: See More


Questions / Comments: