Javascript Coin Flip Animation | Coin Flip Game Html Css Javascript

Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Javascript Coin Flip Animation. We use HTML, Css, and javascript for this Javascript Coin Flip Animation. I hope you enjoy our blog so let's start with a basic HTML structure for the Javascript Coin Flip Animation.

HTML Code

 <div class='container'>  
  <img id="featureCoin" src="https://upload.wikimedia.org/wikipedia/en/5/52/British_fifty_pence_coin_2015_obverse.png"/>a  
  <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 Javascript Coin Flip Animation. Now, you can see an output with Javascript Coin Flip Animation then we write javascript for the Javascript Coin Flip Animation.

output

CSS(SCSS) code

 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;  
  &:hover {  
   opacity:0.5;  
  }  
 }  
 .animate-coin {  
  animation: flip 1.4s 1;  
 }  
 @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;  
 }  

Css Updated output

Javascript code

 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

Now that we have completed our javascript section,  Here is our updated output with javascript. Hope you like the Javascript Coin Flip Animation. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Javascript Coin Flip Animation using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by - Code With Random/Anki 

Code by - Harry Beckwith

Check out more.....

1.html css projects with source code

2. weather app using html css and javascript

3. add to cart button css

4. hamburger menu css

5. multi step form html