Create a Coin Flip using HTML, CSS & JavaScript

Last Updated : 31 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

We will display the styled INR coin to the user and there will be a styled button (Toss Coin). We will create the entire application structure using HTML and style the application with CSS classes and properties. Here, JavaScript will be used to manage the behavior of the Coin Flip and will be used to display the dynamic result to the user. In this article, we will develop an interactive Coin Toss application using HTML, CSS, and JavaScript Language.

Preview Image

gfg

Prerequisites

Approach

  • Create the Coin Toss structure using HTML tags. Style the complete application structure using CSS classes and attractive coloring properties.
  • In JavaScipt, we are storing the reference of HTML elements like button, result text etc. and storing in variables.
  • There is a user-defined function "tossCoinFunction()" that is used to flip the coin according to random state. We have used "Math.random()" function to generate the random value, and according to the value the Heads and Tails results are been displayed and also the Image is flipped.
  • We have used the setTimeout function for aplying the fliiping effect and transition of the images.
  • When the coin is flipped, and the result is decided, the result is been printed to the user in the <p> tag which is defined in the HTML strucutre.

Example: This example describes the basic implementation of the Coin Toss application using HTML, CSS, and Javascript.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Coin Toss</title>
</head>

<body>
  <div class="coin-container">
    <h1 class="title">
      GeeksforGeeks
    </h1>
    <h3>
      Coin Toss using HTML,
      CSS, and JavaScript
    </h3>
    <br />
    <div class="coin" id="coin">
      <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231016151806/tails.png" 
           alt="Heads" />
    </div>
    <button id="toss-button">
      Toss Coin
    </button>
  </div>
  <p class="result"></p>
  <script src="script.js"></script>
</body>

</html>
CSS 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Arial", sans-serif;
    background: linear-gradient(
        135deg,
        #f4fb8f,
        #ff6b6b
    );
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.coin-container {
    background-color: rgba(
        255,
        255,
        255,
        0.9
    );
    border-radius: 20px;
    box-shadow: 0 10px 20px
        rgba(0, 0, 0, 0.3);
    padding: 2rem;
    text-align: center;
    animation: fadeIn 1s ease;
    width: 80%;
    max-width: 500px;
    perspective: 1000px;
}

h1 {
    color: #1ca00a;
    font-size: 2.5rem;
    margin: 0 0 1rem;
    text-shadow: 2px 2px 4px
        rgba(0, 0, 0, 0.2);
}

.coin {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 8px 20px
        rgba(0, 0, 0, 0.2);
    transition: transform 0.5s
        ease-in-out;
    margin: 0 auto;
    backface-visibility: hidden;
}

button {
    background-color: #4e6bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s
            ease-in-out,
        transform 0.2s ease-in-out;
    width: 100%;
    margin-top: 20px;
}

button:hover {
    background-image: linear-gradient(
        45deg,
        #4e6bff,
        #ff6b6b
    );
    transform: scale(1.05);
}

.result {
    margin-top: 20px;
    font-size: 24px;
    color: #333;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 1px 1px 2px
        rgba(0, 0, 0, 0.4);
    letter-spacing: 2px;
}

.coin:hover {
    transform: scale(1.1);
    transition: transform 0.3s
        ease-in-out;
}

@keyframes spin {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

.coin.flip {
    animation: spin 1s
        cubic-bezier(0.4, 2.5, 0.6, 0.5);
}

.coin img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: rotateY(0deg);
}

.coin-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px
        rgba(0, 0, 0, 0.2);
    transition: transform 0.5s
        ease-in-out;
}

.coin-container:hover {
    transform: scale(1.02);
}

h2 {
    color: #333;
    font-size: 24px;
    margin: 10px 0;
}
JavaScript 
const coinIcon = document.getElementById('coin');
const tossBtn = 
    document.getElementById('toss-button');
const result = 
    document.querySelector('.result');
coinIcon.insertAdjacentElement('afterend', result);
tossBtn.addEventListener('click', () => {
    tossBtn.disabled = true;
    tossCoinFunction();
});
function tossCoinFunction() {
    const randomVal = Math.random();
    const faceCoin = randomVal < 0.5 ? 'Heads' : 'Tails';
    const imageUrl = faceCoin === 'Heads' ?
'https://media.geeksforgeeks.org/wp-content/uploads/20231016151817/heads.png' :
'https://media.geeksforgeeks.org/wp-content/uploads/20231016151806/tails.png';
        
    coinIcon.classList.add('flip');
    setTimeout(() => {
        coinIcon.innerHTML = 
            `<img src="${imageUrl}" alt="${faceCoin}">`;
        coinIcon.classList.remove('flip');
        setTimeout(() => {
            result.textContent = `Result: ${faceCoin}`;
            result.style.opacity = 1;
            tossBtn.disabled = false;
        }, 500);
    }, 1000);
}

Output:


Next Article
Create a Resize and Compress Images in HTML CSS & JavaScript

G
gauravggeeksforgeeks
Improve
Article Tags :

Similar Reads