Flipping your fate with a click
Build a Flip Coin Website: 0
Tails: 0
Hello, developers! I’m excited to share my latest project: aFlip Coinapplication. This simple yet fun project allows you to simulate the classic coin flip, perfect for decision-making or just for fun. It’s an excellent example of how to create interactive web applications using HTML, CSS, and JavaScript.
TheFlip Coinis a web-based application that simulates the flipping of a coin. Users can click a button to flip the coin, and the result will be displayed on the screen. This project demonstrates basic web development techniques and provides a hands-on way to practice your front-end skills.
Here’s an overview of the project structure:
Flip-Coin/ ├── index.html ├── style.css └── script.js
To get started with the project, follow these steps:
Clone the repository:
git clone https://github.com/abhishekgurjar-in/Flip-Coin.git
Open the project directory:
cd Flip-Coin
Run the project:
The index.html file defines the structure of the Flip Coin application, including the button and the area to display the result. Here’s a snippet:
Flip Coin Flipping your fate with a click
Build a Flip Coin Website: 0
Tails: 0
![]()
![]()
The style.css file styles the Flip Coin application, adding a simple animation for the coin flip. Below are some key styles:
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Rubik", sans-serif; } body { height: 100%; width: 100%; background-color: #072ac8; } #main { display: flex; justify-content: center; width: 100%; height: 90vh; } #logo_image { width: 250px; height: 100px; background: url(./assets/original-68bc1d89ca3ea0450d8ca9f3a1403d42-removebg-preview.png); background-position: center; background-size: cover; align-items: center; justify-content: center; } .container { background: #a2d6f9; width: 700px; height: 500px; padding: 80px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 15px 30px 35px rgba(0, 0, 0, 0.1); border-radius: 10px; -webkit-perspective: 300px; perspective: 300px; } .container p { text-align: center; font-size: 20px; } .stats { display: flex; align-items: center; justify-content: space-between; color: #101020; font-weight: 500; line-height: 50px; font-size: 20px; } .coin { height: 150px; width: 150px; position: relative; margin: 50px auto; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .tails { transform: rotateX(180deg); } .buttons { display: flex; justify-content: center; align-items: center; } .coin img { width: 145px; } .heads, .tails { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; } button { width: 260px; padding: 10px 0; border: 2.5px solid black; font-size: 22px; border-radius: 5px; cursor: pointer; } #flip-button { background: #072ac8; color: white; } #flip-button:disabled { background-color: #e1e0ee; color: #101020; border-color: #e1e0ee; } #reset-button { background: #fff; color: #072ac8; } .footer { margin: 20px; text-align: center; color: white; } @keyframes spin-tails { 0% { transform: rotateX(0); } 100% { transform: rotateX(1980deg); } } @keyframes spin-heads { 0% { transform: rotateX(0); } 100% { transform: rotateX(2160deg); } }
The script.js file contains the logic for flipping the coin and displaying the result. Here’s a snippet:
let tails = 0; let heads = 0; // Added heads variable definition let coin = document.querySelector(".coin"); let flipBtn = document.querySelector("#flip-button"); let resetBtn = document.querySelector("#reset-button"); let flipSound = document.querySelector("#flip-sound"); flipBtn.addEventListener("click", () => { flipSound.currentTime = 0; flipSound.play(); let i = Math.floor(Math.random() * 2); coin.style.animation = "none"; if (i) { setTimeout(() => { coin.style.animation = "spin-heads 3s forwards"; }, 100); heads++; } else { setTimeout(() => { coin.style.animation = "spin-tails 3s forwards"; }, 100); tails++; } setTimeout(updateStatus, 3000); disableButton(); }); function updateStatus() { document.querySelector("#heads-count").textContent = `Build a Flip Coin Website: ${heads}`; document.querySelector("#tails-count").textContent = `Tails: ${tails}`; } function disableButton() { flipBtn.disabled = true; setTimeout(() => { flipBtn.disabled = false; }, 3000); } resetBtn.addEventListener("click", () => { coin.style.animation = "none"; // Fixed typo: "aniamtion" to "animation" heads = 0; tails = 0; updateStatus(); });
You can check out the live demo of the Flip Coin project here.
Building the Flip Coin application was a fun and educational experience. It’s a simple project that demonstrates how to create interactive web elements using HTML, CSS, and JavaScript. I hope you find it useful and enjoy experimenting with it. Happy coding!
This project was developed as part of my ongoing journey to enhance my front-end development skills with practical and interactive web applications.
The above is the detailed content of Build a Flip Coin Website. For more information, please follow other related articles on the PHP Chinese website!