How to Add a “Flip a Coin” Feature in Hostinger Website Builder

ByBen
Go to Hostinger.com
Get Hostinger Free Courses

Adding interactive features to your website can enhance user engagement, and one fun addition is a Flip a Coin tool. If you’re using Hostinger Website Builder, you can easily integrate a random coin flipper in just a few steps. In this guide, I’ll show you how to embed a coin flipping tool and customize it to fit your website.

Step 1: Log in to Your Hostinger Website Builder

  1. Go to Hostinger.com and log in to your account.
  2. Click on Websites and find your site from the list.
  3. Look for the Hostinger Website Builder icon and click Edit Website to open the builder.

Step 2: Add the Flip a Coin Feature

  1. Inside the website builder, navigate to the section where you want to place the coin flip tool.
  2. Click on Add Element from the left sidebar.
  3. Scroll down and select Embed Code.
  4. Drag and drop the embed code block into your page.
  5. Click on the block and paste the coin flipper code 
<div id="coin-container">
    <div id="coin">
        <div class="side heads">Heads</div>
        <div class="side tails">Tails</div>
    </div>
    <button id="flip-btn">Flip a Coin</button>
    <p id="result" style="display: none;">Flipping...</p>
</div>

<style>
    #coin-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 300px;
        font-family: Arial, sans-serif;
    }

    #coin {
        width: 100px;
        height: 100px;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Fast start, slow end */
    }

    .side {
        width: 100px;
        height: 100px;
        position: absolute;
        backface-visibility: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 18px;
        font-weight: bold;
        color: white;
        border: 2px solid #333;
    }

    .heads {
        background: gold;
    }

    .tails {
        background: silver;
        transform: rotateY(180deg);
    }

    #flip-btn {
        margin-top: 20px;
        background-color: #4CAF50;
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
    }

    #flip-btn:hover {
        background-color: #45a049;
    }

    #result {
        font-size: 20px;
        font-weight: bold;
        margin-top: 10px;
        opacity: 1;
        transition: opacity 0.5s ease-in-out;
    }
</style>

<script>
    let flipCount = 0;

    document.getElementById("flip-btn").addEventListener("click", function() {
        let coin = document.getElementById("coin");
        let resultText = document.getElementById("result");

        // Show "Flipping..." only after the first click
        resultText.style.display = "block";
        resultText.textContent = "Flipping...";
        resultText.style.opacity = "1";

        // Rotate the coin realistically (simulating multiple flips)
        flipCount += Math.floor(Math.random() * 5) + 5; // Increase flips for a more realistic effect
        let isHeads = flipCount % 2 === 0;

        // Apply the transition with the new speed curve (fast start, slow end)
        coin.style.transform = `rotateY(${flipCount * 180}deg) rotateX(${flipCount * 360}deg)`;

        // Show final result exactly when the flip ends (3 seconds)
        setTimeout(() => {
            resultText.textContent = "It's " + (isHeads ? "Heads!" : "Tails!");
        }, 3000);
    });
</script>
  1. Click Embed and update your website.

Step 3: Create a Dedicated Page for the Coin Flip Tool

If you want people to easily find your online coin flip tool, it’s best to create a dedicated page. Here’s how:

  1. Click on Pages and select Create New Page.
  2. Name the page using a keyword-rich title like Online Coin Flip Tool.
  3. Add a title and description explaining how the tool works.
  4. Embed the Flip a Coin feature on this page.
  5. Save and publish your website.

Step 4: Customize the Coin Flip Tool

The great thing about this coin flipping tool is that you can customize its design:

  • Change the heads and tails text
  • Modify the flip button text and colors
  • Adjust the font style and size
  • Tweak the animation effects

Final Thoughts

Adding a Flip a Coin feature in Hostinger Website Builder is simple and can make your website more interactive. Whether for games, decision-making, or just for fun, this tool is a great addition.

Want to learn more about Hostinger Website Builder? Get my free course today and master website building with ease!

📖 Get My Hostinger Course for Free: https://university.bensexperience.com

🎓 Join my University (Free): https://university.bensexperience.com

For any questions, leave a comment below! 🚀

Similar Posts