You are currently viewing Create Coin Flip Animation Using CSS & JavaScript

Create Coin Flip Animation Using CSS & JavaScript

Telegram Group Join Now

Create Coin Flip Animation Using CSS & JavaScript

Create Coin Flip Animation Using CSS & JavaScript
 

 

Hello Coder! Welcome to the Codewithrandom Blog. In this blog, We learn how we create a Create Coin Flip Animation Using Html, Css, and JavaScript. In this Project, we have a button to flip a coin, and there are 2 lines to show how much time heads and tails when we flip a coin. We add animation in Flip Coin Like Real Coin flipping With help of Css.
 
I hope you enjoy our blog so let’s start with a basic HTML structure for the Javascript Coin Flip Animation.
 

50+ HTML, CSS & JavaScript Projects With Source Code

Live Preview Of Coin Flip Animation

Code by Harry Beckwith
Project Download Link Available Below
Language used HTML ,CSS and JavaScript
External link / Dependencies No
Responsive No
Coin Flip Animation Table

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

 

Create Coin Flip Animation Using CSS & JavaScript
 

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

Create Coin Flip Animation Using CSS & JavaScript
 

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)

Create Coin Flip Animation Using CSS & JavaScript
 
 

Now that we have completed our JavaScript code. Hope you like the 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!

Written by – Code With Random/Anki 

Code by – Harry Beckwith

 

Which code editor do you use for this Coin Flip Animation coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

No! this is not a responsive project

Do you use any external links to create this project?

No!

Telegram Group Join Now

Leave a Reply