Tic Tac Toe

Version 1

View Build

HTML

            
<html>

    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js" defer></script>
    </head>

    <body>
        
        
        <section>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </section>


    </body>


</html>

CSS

            
div{
    background: #555;
    height: 50%;
    width: 50%;
    border: 1px solid black;
    border-radius: 0;
    transition: background .3s, transform 1s, border-radius 2s;
    transform: rotateZ(405deg);
    justify-self: center;
    align-self: center;
}

.red{
    background: #fa8;
    border-radius: 100%;
    transform: rotateZ(0);
}
.blue{
    background: #8af;
    border-radius: 100%;
    transform: rotateZ(810deg);
}

section{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    height: 100%;
    gap: 20px;
}

body{
    background: black;
}

JS

            
let player = 1;

document.querySelectorAll("div").forEach((node)=>{

    node.onclick = (e) => {
        console.log(e)
        if(!node.classList.contains("red") && !node.classList.contains("blue")){
            if(player == 1){
                node.classList.add("blue")
                player = 2
            }
            else{
                node.classList.add("red")
                player = 1
            }
        }
    }

})