Toss Coin Game Tool with colorful styling and all its features use any free library

 

Toss Coin Game

body { font-family: Arial, sans-serif; background-color: #f0f8ff; margin: 0; padding: 20px; } .container { max-width: 400px; margin: auto; text-align: center; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 20px; } h1 { color: #333; } .coin { width: 100px; height: 100px; margin: 20px auto; border-radius: 50%; background: linear-gradient(45deg, #ffcc00, #ff9900); display: flex; justify-content: center; align-items: center; font-size: 2em; transition: transform 0.8s; } button { background-color: #007bff; color: white; border: none; border-radius: 5px; padding: 10px 15px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } button:hover { background-color: #0056b3; } .result { margin-top: 20px; font-size: 1.5em; color: #555; } const tossButton = document.getElementById('tossButton'); const coin = document.getElementById('coin'); const resultDisplay = document.getElementById('result'); tossButton.addEventListener('click', tossCoin); function tossCoin() { // Adding a rotation animation coin.style.transform = 'rotateY(0deg)'; setTimeout(() => { coin.style.transform = 'rotateY(1800deg)'; }, 50); // Determine result after animation setTimeout(() => { const result = Math.random() < 0.5 ? 'Heads' : 'Tails'; coin.innerHTML = result === 'Heads' ? '🪙' : '🪙'; resultDisplay.textContent = `Result: ${result}`; }, 800); }