Lancer une pièce

2,873 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

15 April 2026

Pokémon Lune Émeraude Extrême Aléatoire

27 January 2025

Page de destination d'une agence de marketing numérique

14 June 2026

Expéditeur de pièces TikTok 78601

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Andev Web</title>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="stats">
            <p id="heads-count">Heads: 0</p>
            <p id="tails-count">Tails: 0</p>
        </div>
        <div class="coin" id="coin">
            <div class="heads">
                <img src="https://i.postimg.cc/8C3SmCRC/heads.png">
            </div>
            <div class="tails">
                <img src="https://i.postimg.cc/MTQ8P85m/tails.png">
            </div>
        </div>
        <div class="buttons">
            <button id="flip-button">
                Flip Coin
            </button>
            <button id="reset-button">
                Reset
            </button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Rubik",sans-serif;
}
body{
    height: 100%;
    background: linear-gradient(
        to right,
        #575ce5 50%,
        #f9fbfc 50%
    ) fixed;
}
.container{
    background-color: #ffffff;
    width: 400px;
    padding: 50px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    box-shadow: 15px 30px 35px rgba(0,0,0,0.1);
    border-radius: 10px;
    -webkit-perspective: 300px;
    perspective: 300px;
}
.stats{
    text-align: right;
    color: #101020;
    font-weight: 500;
    line-height: 25px;
}
.coin{
    height: 150px;
    width: 150px;
    position: relative;
    margin: 50px auto;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.coin img{
    width: 145px;
}
.heads,.tails{
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.tails{
    transform: rotateX(180deg);
}
@keyframes spin-tails{
    0%{
        transform: rotateX(0);
    }
    100%{
        transform: rotateX(1980deg);
    }
}
@keyframes spin-heads{
    0%{
        transform: rotateX(0);
    }
    100%{
        transform: rotateX(2160deg);
    }
}
.buttons{
    display: flex;
    justify-content: space-between;
}
button{
    width: 120px;
    padding: 10px 0;
    border: 2.5px solid #424ae0;
    border-radius: 5px;
    cursor: pointer;
}
#flip-button{
    background-color: #424ae0;
    color: #ffffff;
}
#flip-button:disabled{
    background-color: #e1e0ee;
    border-color: #e1e0ee;
    color: #101020;
}
#reset-button{
    background-color: #ffffff;
    color: #424ae0;
}

let heads = 0;
let tails = 0;
let coin = document.querySelector(".coin");
let flipBtn = document.querySelector("#flip-button");
let resetBtn = document.querySelector("#reset-button");

flipBtn.addEventListener("click", () => {
    let i = Math.floor(Math.random() * 2);
    coin.style.animation = "none";
    if(i){
        setTimeout(function(){
            coin.style.animation = "spin-heads 3s forwards";
        }, 100);
        heads++;
    }
    else{
        setTimeout(function(){
            coin.style.animation = "spin-tails 3s forwards";
        }, 100);
        tails++;
    }
    setTimeout(updateStats, 3000);
    disableButton();
});
function updateStats(){
    document.querySelector("#heads-count").textContent = `Heads: ${heads}`;
    document.querySelector("#tails-count").textContent = `Tails: ${tails}`;
}
function disableButton(){
    flipBtn.disabled = true;
    setTimeout(function(){
        flipBtn.disabled = false;
    },3000);
}
resetBtn.addEventListener("click",() => {
    coin.style.animation = "none";
    heads = 0;
    tails = 0;
    updateStats();
});