Let’s create a simple “Flip a Coin” application using HTML, CSS, and JavaScript. This project will provide users with a fun way to simulate flipping a coin and seeing the result.
We’ll keep it straightforward and engaging, using HTML to structure the interface, CSS for some basic styling, and JavaScript to handle the randomization of the coin flip.
Let’s get started by building the “Flip a Coin” application. Whether you’re a beginner or experienced coder, this project offers a playful introduction to web development. Let’s flip some virtual coins and see where luck takes us!
HTML :
This HTML code creates a web page for flipping a coin and tracking the results. It includes sections for displaying the coin, keeping track of heads and tails counts, buttons for flipping the coin and resetting counts, and links to external styles and scripts for styling and functionality.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flip A Coin</title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet">
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="stats">
<p id="heads-count">Heads: 0</p>
<p id="tails-count">Tails: 0</p>
</div>
<div class="coin" id="coin">
<div class="heads">
<img src="heads.svg">
</div>
<div class="tails">
<img src="tails.svg">
</div>
</div>
<div class="buttons">
<button id="flip-button">
Flip Coin
</button>
<button id="reset-button">
Reset
</button>
</div>
</div>
<!--Script-->
<script src="script.js"></script>
</body>
</html>
CSS :
This CSS code defines the styling for a web page. It starts by resetting padding, margin, and box-sizing for all elements and sets the font to Rubik. The body background is a linear gradient. The container for the content is centered on the page with a shadow and rounded corners. The statistics section is right-aligned with specific font styles.
The coin element is styled with a fixed size, positioned in the center, and prepared for 3D transformation. The heads and tails of the coin are positioned absolutely to allow flipping animations. Two keyframe animations, spin-tails and spin-heads, control the flipping motion.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Rubik",sans-serif;
}
body{
height: 100%;
background: linear-gradient(
to right,
#575ce5 50%,
#f9fbfc 50%
) fixed;
}
.container{
background-color: #ffffff;
width: 400px;
padding: 50px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
box-shadow: 15px 30px 35px rgba(0,0,0,0.1);
border-radius: 10px;
-webkit-perspective: 300px;
perspective: 300px;
}
.stats{
text-align: right;
color: #101020;
font-weight: 500;
line-height: 25px;
}
.coin{
height: 150px;
width: 150px;
position: relative;
margin: 50px auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.coin img{
width: 145px;
}
.heads,.tails{
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.tails{
transform: rotateX(180deg);
}
@keyframes spin-tails{
0%{
transform: rotateX(0);
}
100%{
transform: rotateX(1980deg);
}
}
@keyframes spin-heads{
0%{
transform: rotateX(0);
}
100%{
transform: rotateX(2160deg);
}
}
.buttons{
display: flex;
justify-content: space-between;
}
button{
width: 120px;
padding: 10px 0;
border: 2.5px solid #424ae0;
border-radius: 5px;
cursor: pointer;
}
#flip-button{
background-color: #424ae0;
color: #ffffff;
}
#flip-button:disabled{
background-color: #e1e0ee;
border-color: #e1e0ee;
color: #101020;
}
#reset-button{
background-color: #ffffff;
color: #424ae0;
}
JavaScript:
This JavaScript code enhances the functionality of a coin-flipping web page. It initializes variables to track the counts of heads and tails and selects elements from the HTML document using document.querySelector().
When the flip button is clicked, a random number determines the outcome of the coin flip. Depending on the result, either the “spin-heads” or “spin-tails” animation is applied to the coin element. After the animation completes, the statistics are updated, and the flip button is temporarily disabled to prevent rapid clicking.
let heads = 0;
let tails = 0;
let coin = document.querySelector(".coin");
let flipBtn = document.querySelector("#flip-button");
let resetBtn = document.querySelector("#reset-button");
flipBtn.addEventListener("click", () => {
let i = Math.floor(Math.random() * 2);
coin.style.animation = "none";
if(i){
setTimeout(function(){
coin.style.animation = "spin-heads 3s forwards";
}, 100);
heads++;
}
else{
setTimeout(function(){
coin.style.animation = "spin-tails 3s forwards";
}, 100);
tails++;
}
setTimeout(updateStats, 3000);
disableButton();
});
function updateStats(){
document.querySelector("#heads-count").textContent = `Heads: ${heads}`;
document.querySelector("#tails-count").textContent = `Tails: ${tails}`;
}
function disableButton(){
flipBtn.disabled = true;
setTimeout(function(){
flipBtn.disabled = false;
},3000);
}
resetBtn.addEventListener("click",() => {
coin.style.animation = "none";
heads = 0;
tails = 0;
updateStats();
});
In short, creating a “Flip a Coin” application using HTML, CSS, and JavaScript has been a fun and educational experience. By combining these technologies, we’ve built a simple yet engaging tool for simulating coin flips. Whether you’re a beginner or an experienced coder, this project offers a playful introduction to web development.
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
