Create Coin Flip Animation Using CSS & JavaScript

 

 

HTML Code For Coin Flip

<div class='container'>
  <img id="featureCoin" src="https://upload.wikimedia.org/wikipedia/en/5/52/British_fifty_pence_coin_2015_obverse.png"/>
  <div id='coin'>

  </div>
  <div id='button'>
    Flip coin
  </div>
  <div id='result'>

  </div>
  <div id='headsCounter'>

  </div>
  <div id='tailsCounter'>

    </div </div

There is all the HTML code for the Coin Flip. Now, you can see output without Css and Javascript. then we write Css for Animation and basic styling and use Javascript for the Coin Flip Functionality.

ADVERTISEMENT

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Output

 

 

CSS Code For Coin Flip

body {
  font-family: "Ubuntu", sans-serif;
  background: #fafafa;
}

#coin {
  margin-bottom: 100px;
}

#button {
  background: #64ffda;
  color: #111;
  padding: 10px 20px;
  border-radius: 2px;
  display: inline-block;
  transition: 0.5s;
  cursor: pointer;
  font-size: 23px;
  margin-bottom: 30px;
  box-shadow: 1px 1px 8px #DCDCDC;
}
#button:hover {
  opacity: 0.5;
}

.animate-coin {
  -webkit-animation: flip 1.4s 1;
          animation: flip 1.4s 1;
}

@-webkit-keyframes flip {
  0% {
    transform: scale3d(1, 1, 1) rotateX(0deg);
  }
  50% {
    transform: scale3d(2, 2, 2) rotateX(3600deg);
  }
  100% {
    transform: scale3d(1, 1, 1) rotateX(7200deg);
  }
}

@keyframes flip {
  0% {
    transform: scale3d(1, 1, 1) rotateX(0deg);
  }
  50% {
    transform: scale3d(2, 2, 2) rotateX(3600deg);
  }
  100% {
    transform: scale3d(1, 1, 1) rotateX(7200deg);
  }
}
/* Centralise content */
.container {
  width: 80%;
  margin: 200px auto;
  text-align: Center;
}

img {
  max-width: 100%;
}

#tailsCounter span, #headsCounter span {
  color: #6ab344;
}

#result {
  color: #6ab344;
}

Animated Login Form Using HTML and CSS (Source Code)

Html + Css Code Output

JavaScript Code For Coin Flip

var coin = document.getElementById('coin');
var button = document.getElementById('button');
var result = document.getElementById('result');
var headsCounter = document.getElementById('headsCounter');
var TailsCounter = document.getElementById('TailsCounter');
var featureCoin = document.getElementById('featureCoin');
var heads = 0;
var tails = 0;

/* On click of button spin coin ainamtion */
function coinToss() {
  /* Random number 0 or 1  */
  var x = Math.floor(Math.random() * 2);
  /* If x = 0 change coin html to image of heads along with animation for flipping effect */
  if (x === 0) {
    coin.innerHTML = '<img class="heads animate-coin" src="https://upload.wikimedia.org/wikipedia/en/5/52/British_fifty_pence_coin_2015_obverse.png"/>';
    /* Heads count increase by 1 */
    heads += 1;
    /* Display result of flip */
    result.innerHTML = '<h2>You got heads</h2>';
    /* Display number of heads */
    headsCounter.innerHTML = '<h3> Number of heads:<span> ' + heads + '</span></h3>';
    /* Else x =  change coin html to image of tails along with animation for flipping effect */
  } else {
    coin.innerHTML = '<img class="tails animate-coin" src="https://upload.wikimedia.org/wikipedia/en/d/d8/British_fifty_pence_coin_2015_reverse.png"/>';
    /* Tails count increase by 1 */
    tails += 1;
    /* Display result of flip */
    result.innerHTML = '<h2>You got tails</h2>';
    /* Display number of tails */
    tailsCounter.innerHTML = '<h3> Number of tails:<span> ' + tails + '</span></h3>';

  }

}
/* Add the coin toss function to the button using on click */
button.onclick = function() {
  coinToss();
  featureCoin.remove();
}

Final Output Of Coin Flip Animation Using CSS & JavaScript

100+ JavaScript Projects With Source Code ( Beginners to Advanced)