Telegram Group Join Now
Create Coin Flip Animation Using CSS & JavaScript
Code by | Harry Beckwith |
Project Download | Link Available Below |
Language used | HTML ,CSS and JavaScript |
External link / Dependencies | No |
Responsive | No |
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)
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
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!