SH20RAJ/head-or-tails.markdown

## head-or-tails.markdown

      
    Raw
  

              head-or-tails.markdown
            
          
    Head or Tails

A Pen by SH20RAJ on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flip a Coin</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Flip a Coin</h1>
        <div class="coin" id="coin"></div>
        <button onclick="flipCoin()">Flip Coin</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

## script.js
function flipCoin() {
    var coin = document.getElementById('coin');
    coin.classList.remove('heads', 'tails');

    // Randomly decide heads or tails
    var random = Math.random();
    var result = random < 0.5 ? 'heads' : 'tails';

    coin.classList.add(result);
}

## style.css
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
}

h1 {
    color: #333;
}

.coin {
    width: 100px;
    height: 100px;
    background-color: #ddd;
    border-radius: 50%;
    margin: 20px auto;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Flip a Coin</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<div class="container">
	<h1>Flip a Coin</h1>
	<div class="coin" id="coin"></div>
	<button onclick="flipCoin()">Flip Coin</button>
	</div>
	<script src="script.js"></script>
	</body>
	</html>
	function flipCoin() {
	var coin = document.getElementById('coin');
	coin.classList.remove('heads', 'tails');

	// Randomly decide heads or tails
	var random = Math.random();
	var result = random < 0.5 ? 'heads' : 'tails';

	coin.classList.add(result);
	}
	body {
	font-family: Arial, sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background-color: #f0f0f0;
	}

	.container {
	text-align: center;
	}

	h1 {
	color: #333;
	}

	.coin {
	width: 100px;
	height: 100px;
	background-color: #ddd;
	border-radius: 50%;
	margin: 20px auto;
	}

	button {
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 4px;
	transition: background-color 0.3s ease;
	}

	button:hover {
	background-color: #0056b3;
	}