-
Notifications
You must be signed in to change notification settings - Fork 0
/
coin_flip.php
67 lines (55 loc) · 1.53 KB
/
coin_flip.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
<title>Coin Tossing</title>
<style>
.coin {
width: 200px;
height: 200px;
background: url('coin.png') no-repeat center center;
background-size: contain;
position: relative;
animation: rotate 1s infinite linear;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script>
function flipCoin() {
var coin = document.getElementById('coin');
coin.classList.add('animate-rotation');
setTimeout(function() {
var result = document.getElementById('result');
var random = Math.random();
var side = random < 0.5 ? 'Heads' : 'Tails';
result.innerHTML = side;
coin.classList.remove('animate-rotation');
coin.classList.add(side.toLowerCase());
}, 1000);
}
</script>
</head>
<body>
<h1>Coin Tossing</h1>
<?php
$result = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$result = 'Flipping...';
echo '<script>flipCoin();</script>';
}
?>
<form method="POST">
<button type="submit">Flip Coin</button>
</form>
<div id="coin" class="coin"></div>
<?php if ($result !== '') : ?>
<h2 id="result"><?php echo $result; ?></h2>
<?php endif; ?>
</body>
</html>