Lancia una moneta

2092 Andev.web

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

28 December 2024

Una directory alternativa della home page

22 May 2025

Gioco del lancio della moneta

16 November 2024

Come creare una barra laterale a griglia in CSS

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;
}

JS

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();
});

Consigliato

Una directory alternativa della home page

Gioco del lancio della moneta

Come creare una barra laterale a griglia in CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS