How to Make a Coin Flipper Using HTML, CSS, JavaScript (Source Code)

bySakib Mahmud -April 17, 2021

0

Coin position: Still not fliped

Number of flip: 0

This is the demo of the coin flipper we are going to make.

Main Theory

When we flip a coin there is basically 2 chance. It can be a head or a tail. To make a coin flipper we need randomly generated numbers. This number should be specific. When a user clicks on the button it will automatically generate 1 number from 2 specific numbers. It will show different images according to the condition.

How to make

To make a coin flipper using JavaScript we actually need 3 files. HTML, CSS, JavaScript are those 3 files. First, create a folder in file explorer. Then open that file from your preferred code editor. Here I am using VS code. You can use any code editor or even you can create 3 text files and paste the code we are providing in this article. But make sure to name your files in a standard way and use the right extension.

First, create an HTML file name 'index.html'. Then paste the code given below.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flip a coin</title>
</head>
<body>
    <p>Coin position:<b id="show_the_side_name">Still not fliped</b></p>
    <p>Number of flip:<b id="Count_Button_Click">0</b></p>
    <img id="Coin_image" src="" width="30%" height="auto"></br>
    <button onclick="clickevent()">Flip the coin</button>
</body>
<script src="flip.js"></script>
</html>

Here we created the basic design of our coin flipper project. Coin position is null at the beginning. In the number of the flip section, we are going to show how many times a user clicked on the button. The image tag source will change according to the generated number. The button we activate the JavaScript function.

We are connecting the JavaScript file using the script tag. Then we need the JavaScript file to make this interface live or active. We are giving this file the name 'flip.js' and be careful about the dot js file extension because without it the whole program will not work.

JavaScript Code

var coin_side;
var rannum;
var click_count = 0;
var change_image;
function clickevent() {

    click_count++;
    document.getElementById('Count_Button_Click').innerHTML = click_count;

    random_number = Math.floor(Math.random() * 2) + 1;
    change_image = document.getElementById("Coin_image");
    coin_side = document.getElementById("show_the_side_name");
    coin_side.innerHTML = random_number;

    if (random_number == 1) {
        change_image.src = "https://pathgriho.files.wordpress.com/2021/04/head.png";
        coin_side.innerHTML = "Head";
    }
    if (random_number == 2) {
        change_image.src = "https://pathgriho.files.wordpress.com/2021/04/tail.png";
        coin_side.innerHTML = "Tail";
    }

}

Here is the explanation of the code. When you press the button, it calls a function name 'clickevent()' because we added an onclick name 'clickevent()'. That means this JavaScript will start working when we click on the button. We are using

 document.getElementById();

it to detect different HTML elements in JavaScript. At the beginning of the code, we declared different variables we are going to use in this program. We generate one number between 1 and 2. Here is the code we are using for this:

random_number = Math.floor(Math.random() * 2) + 1;

Using 'Math.random' we can generate random numbers. Then created a simple increment program. When the user clicks on the button the number will increase. Here is the code to detect the number of click on a button:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Number of click</title>
</head>
<body>
    <p>Number of Click:<b id="Count_Button_Click">0</b></p>
    <button onclick="clickevent()">Flip the coin</button>
</body>
<script>
    var click_count = 0;
    function clickevent() {
        click_count++;
        document.getElementById('Count_Button_Click').innerHTML = click_count;
    }
</script>
</html>

With the random number this if, else condition can show the image and text according to the generated number. If the generated number is 1 then it will show the head image and change the name of the coin side with 'Head'. If it is not 1 then the else condition will execute. Then it will show the image of the tail and replace the coin side name with 'Tail'. For a better look, we have to use some CSS. I am only using custom button CSS. Here is an example code for you.

CSS code

.techkib-online-tool-button {
    background-color: black;
    border: none;
    border-radius: 5px;
    color: yellow;
    padding: 12px 16px;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px
}

Comment below if you face any problems. This can be a great project for you. After doing this project you can share it with your friends and you can make a GitHub page with it. Share your work with us. Here we have another Math dot random project for you. It is about the dice roller using JavaScript. Read the full article and add another project to your portfolio. Here is the project source code link.

Tags: JavaScript