Tic-tac-toe project using only html ,css , js and no imgs. Feedback needed

Code Feedback
1

Hi , this is my first js project. Please tell me what I can improve .

HTML

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>Example Title</title>
    <meta name="author" content="Your Name">
    <meta name="description" content="Example description">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/css.css">
    <link rel="icon" type="image/x-icon" href="" />

</head>

<body onload="(hide())">
    <div class="hastag">
        <div class="row1">
            <div class="aa" id="one" onclick="play(this.id, test)">
                <div class="x">
                    <div id="arm1"></div>
                    <div id="arm2"></div>
                </div>
                <div class="o"></div>
            </div>
            <div class="bb" id="two" onclick="play(this.id, test)">
                <div class="x">
                    <div id="arm1"></div>
                    <div id="arm2"></div>
                </div>
                <div class="o"></div>
            </div>
            <div class="cc" id="three" onclick="play(this.id, test)">
                <div class="x">
                    <div id="arm1"></div>
                    <div id="arm2"></div>
                </div>
                <div class="o"></div>
            </div>

            <div class="row2">
                <div class="dd" id="four" onclick="play(this.id, test)">
                    <div class="x">
                        <div id="arm1"></div>
                        <div id="arm2"></div>
                    </div>
                    <div class="o"></div>
                </div>
                <div class="ee" id="five" onclick="play(this.id, test)">
                    <div class="x">
                        <div id="arm1"></div>
                        <div id="arm2"></div>
                    </div>
                    <div class="o"></div>
                </div>
                <div class="ff" id="six" onclick="play(this.id, test)">
                    <div class="x">
                        <div id="arm1"></div>
                        <div id="arm2"></div>
                    </div>
                    <div class="o"></div>
                </div>
            </div>

            <div class="row3">
                <div class="gg" id="seven" onclick="play(this.id, test)">
                    <div class="x">
                        <div id="arm1"></div>
                        <div id="arm2"></div>
                    </div>
                    <div class="o"></div>
                </div>
                <div class="hh" id="eight" onclick="play(this.id, test)">
                    <div class="x">
                        <div id="arm1"></div>
                        <div id="arm2"></div>
                    </div>
                    <div class="o"></div>
                </div>
                <div class="xx" id="nine" onclick="play(this.id, test)">
                    <div class="x">
                        <div id="arm1"></div>
                        <div id="arm2"></div>
                    </div>
                    <div class="o"></div>
                </div>
            </div>

        </div>
    </div>

    <section id="winmsg">

    </section>

    <script type="text/javascript" src="js.js"></script>
</body>

</html>

CSS

* {
    margin: 0;
}

row1 {

    position: relative;
    display: block;
}

row2 {

    position: relative;
    display: block;
}

row3 {

    position: relative;
    display: block;
}

.hastag {
    position: absolute;
    top: 20px;
    left: 25%;
}

#one {

    display: inline-block;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width: 16vw;
    height: 16vw;
    border-top: 0 solid;
    border-right: 1.6vw solid;
    border-bottom: 1.6vw solid;
    border-left: 0 solid;
    border-radius: 3px 4px 0;

}

#two {

    display: inline-block;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width: 16vw;
    height: 16vw;
    border-top: 0 solid;
    border-bottom: 1.6vw solid;
    border-left: 0 solid;
    left: 16vw;

}

#three {

    display: inline-block;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width: 16vw;
    height: 16vw;
    border-top: 0 solid;
    border-right: 0 solid;
    border-bottom: 1.6vw solid;
    border-left: 1.6vw solid;
    border-radius: 3px 0px 3px;
    left: 32vw;
}

#four {

    display: inline-block;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width: 16vw;
    height: 16vw;
    border-top: 0 solid;
    border-right: 1.6vw solid;
    border-bottom: 0 solid;
    border-left: 0 solid;
    border-radius: 0px 0px 0px;
    top: 16vw;
}

#five {

    display: inline-block;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width: 16vw;
    height: 16vw;
    border-top: 0 solid;
    border-right: 0 solid;
    border-bottom: 0 solid;
    border-left: 0 solid;
    border-radius: 0px 0px 0px;
    top: 16vw;
    left: 16vw;
}

#six {

    display: inline-block;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width: 16vw;
    height: 16vw;
    border-top: 0 solid;
    border-right: 0 solid;
    border-bottom: 0 solid;
    border-left: 1.6vw solid;
    border-radius: 0px 0px 0px;
    top: 16vw;
    left: 32vw;
}

#seven {

    display: inline-block;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width: 16vw;
    height: 16vw;
    border-top: 1.6vw solid;
    border-right: 1.6vw solid;
    border-bottom: 0 solid;
    border-left: 0 solid;
    border-radius: 3px 0px 3px;
    top: 32vw;
}

#eight {

    display: inline-block;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width: 16vw;
    height: 16vw;
    border-top: 1.6vw solid;
    border-right: 0 solid;
    border-bottom: 0 solid;
    border-left: 0 solid;
    border-radius: 0px 0px 0px;
    top: 32vw;
    left: 16vw;
}

#nine {

    display: inline-block;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width: 16vw;
    height: 16vw;
    border-top: 1.6vw solid;
    border-right: 0 solid;
    border-bottom: 0 solid;
    border-left: 1.6vw solid;
    border-radius: 0px 3px 0px;
    top: 32vw;
    left: 32vw;
}

#arm1,
#arm2 {
    position: absolute;
    left: 6.7vw;
    top: 2vw;
    width: 1.5vw;
    height: 14vw;
    background-color: #e4f9ff;
    border-radius: 3px;
}



#arm1 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#arm2 {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.o {
    position: absolute;
    width: 10vw;
    height: 10vw;
    border-radius: 100%;
    border: 1.6vw solid;
    top: 2.15vw;
    left: 2.2vw;
    border-color: #e4f9ff;
}



.x {
    position: absolute;
}

#two .x,
#five .x,
#eight .x {
    left: 1.13vw;
}









@media (min-width:1039px) {
    .hastag {
        position: absolute;
        top: 20px;
        left: 50%;
        margin-left: -271.5px;
    }

    #arm1,
    #arm2 {
        left: 77.5px;
        top: 21px;
        width: 16.58px;
        height: 154.83px;

    }

    .o {
        width: 109px;
        height: 109px;
        border: 16.7px solid;
        top: 25.27px;
        left: 23px;
        border-color: #e4f9ff;
    }

    #two .x,
    #five .x,
    #eight .x {
        left: 11px;
    }

    #one,
    #two,
    #three,
    #four,
    #five,
    #six,
    #seven,
    #eight,
    #nine {
        width: 181px;
        height: 181px;
    }

    #one {



        border-top: 0 solid;
        border-right: 19.26px solid;
        border-bottom: 19.26px solid;
        border-left: 0 solid;
    }

    #two {
        border-bottom: 19.26px solid;
        left: 181px;

    }

    #three {
        border-top: 0 solid;
        border-right: 0 solid;
        border-bottom: 19.26px solid;
        border-left: 19.26px solid;
        left: 362px;
    }

    #four {
        border-top: 0 solid;
        border-right: 19.26px solid;
        border-bottom: 0 solid;
        border-left: 0 solid;
        top: 181px;
    }

    #five {
        border-top: 0 solid;
        border-right: 0 solid;
        border-bottom: 0 solid;
        border-left: 0 solid;
        top: 181px;
        left: 181px;
    }

    #six {
        border-top: 0 solid;
        border-right: 0 solid;
        border-bottom: 0 solid;
        border-left: 19.26px solid;
        top: 181px;
        left: 362px;
    }

    #seven {

        border-top: 19.26px solid;
        border-right: 19.26px solid;
        border-bottom: 0 solid;
        border-left: 0 solid;
        border-radius: 3px 0px 3px;
        top: 362px;
    }

    #eight {

        border-top: 19.26px solid;
        border-right: 0 solid;
        border-bottom: 0 solid;
        border-left: 0 solid;
        top: 362px;
        left: 181px;
    }

    #nine {
        border-top: 19.26px solid;
        border-right: 0 solid;
        border-bottom: 0 solid;
        border-left: 19.26px solid;
        border-radius: 0px 3px 0px;
        top: 362px;
        left: 362px;
    }

}

#one,
#two,
#three,
#four,
#five,
#six,
#seven,
#eight,
#nine {
    position: absolute;
    border-color: #12cad6;
}

body {
    background-color: #0fabbc;
}

#xwins,
#owins {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 13vw;
    font-size: 16vw;
    text-align: center;
    color: #e4f9ff;
}

JS

var player = "o";
var box = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];

function hide() {
    for (var i = 0; i < 10; i++) {
        document.getElementById(box[i]).getElementsByClassName('o')[0].style.display = "none";
        document.getElementById(box[i]).getElementsByClassName('x')[0].style.display = "none";
    }


}


function play(place, callback) {

    if (document.getElementById(place).getElementsByClassName('o')[0].style.display === "inline-block" || document.getElementById(place).getElementsByClassName('x')[0].style.display === "inline-block") {
        console.log('block already taken');
    } else if (player === "o") {
        var m = document.getElementById(place).getElementsByClassName('o')[0];
        m.style.display = "inline-block";
        document.getElementById(place).className = "po"


        player = "x";
    } else if (player === "x") {
        var m = document.getElementById(place).getElementsByClassName('x')[0];
        m.style.display = "inline-block";
        document.getElementById(place).className = "px"



        player = "o";
    }


    callback();
}


function test() {
    if (document.getElementById("one").className === document.getElementById("two").className && document.getElementById("one").className === document.getElementById("three").className) {
        if (document.getElementById("one").className === "px") {
            document.getElementById("winmsg").innerHTML = '<div id="xwins"> <h1>X WINS!</h1> </div>';
            document.getElementsByClassName("hastag")[0].style.filter = "blur(8px)";
        } else {
            document.getElementById("winmsg").innerHTML = '<div id="owins"> <h1>O WINS!</h1> </div>';
            document.getElementsByClassName("hastag")[0].style.filter = "blur(8px)";
        }
    } else if (document.getElementById("one").className === document.getElementById("four").className && document.getElementById("one").className === document.getElementById("seven").className) {
        if (document.getElementById("one").className === "px") {
            document.getElementById("winmsg").innerHTML = '<div id="xwins"> <h1>X WINS!</h1> </div>';
            document.getElementsByClassName("hastag")[0].style.filter = "blur(8px)";
        } else {
            document.getElementById("winmsg").innerHTML = '<div id="owins"> <h1>O WINS!</h1> </div>';
            document.getElementsByClassName("hastag")[0].style.filter = "blur(8px)";
        }
    } else if (document.getElementById("one").className === document.getElementById("five").className && document.getElementById("one").className === document.getElementById("nine").className) {
        if (document.getElementById("one").className === "px") {
            document.getElementById("winmsg").innerHTML = '<div id="xwins"> <h1>X WINS!</h1> </div>';
            document.getElementsByClassName("hastag")[0].style.filter = "blur(8px)";
        } else {
            document.getElementById("winmsg").innerHTML = '<div id="owins"> <h1>O WINS!</h1> </div>';
            document.getElementsByClassName("hastag")[0].style.filter = "blur(8px)";
        }
    } else if (document.getElementById("two").className === document.getElementById("five").className && document.getElementById("two").className === document.getElementById("eight").className) {
        if (document.getElementById("two").className === "px") {
            document.getElementById("winmsg").innerHTML = '<div id="xwins"> <h1>X WINS!</h1> </div>';
            document.getElementsByClassName("hastag")[0].style.filter = "blur(8px)";
        } else {
            document.getElementById("winmsg").innerHTML = '<div id="owins"> <h1>O WINS!</h1> </div>';
            document.getElementsByClassName("hastag")[0].style.filter = "blur(8px)";
        }
    } else if (document.getElementById("three").className === document.getElementById("five").className && document.getElementById("three").className === document.getElementById("seven").className) {
        if (document.getElementById("three").className === "px") {
            document.getElementById("winmsg").innerHTML = '<div id="xwins"> <h1>X WINS!</h1> </div>';
            document.getElementsByClassName("hastag")[0].style.filter = "blur(8px)";
        } else {
            document.getElementById("winmsg").innerHTML = '<div id="owins"> <h1>O WINS!</h1> </div>';
            document.getElementsByClassName("hastag")[0].style.filter = "blur(8px)";
        }
    } else if (document.getElementById("three").className === document.getElementById("six").className && document.getElementById("three").className === document.getElementById("nine").className) {
        if (document.getElementById("three").className === "px") {
            document.getElementById("winmsg").innerHTML = '<div id="xwins"> <h1>X WINS!</h1> </div>';
            document.getElementsByClassName("hastag")[0].style.filter = "blur(8px)";
        } else {
            document.getElementById("winmsg").innerHTML = '<div id="owins"> <h1>O WINS!</h1> </div>';
            document.getElementsByClassName("hastag")[0].style.filter = "blur(8px)";
        }
    } else if (document.getElementById("four").className === document.getElementById("five").className && document.getElementById("four").className === document.getElementById("six").className) {
        if (document.getElementById("four").className === "px") {
            document.getElementById("winmsg").innerHTML = '<div id="xwins"> <h1>X WINS!</h1> </div>';
            document.getElementsByClassName("hastag")[0].style.filter = "blur(8px)";
        } else {
            document.getElementById("winmsg").innerHTML = '<div id="owins"> <h1>O WINS!</h1> </div>';
            document.getElementsByClassName("hastag")[0].style.filter = "blur(8px)";
        }
    } else if (document.getElementById("seven").className === document.getElementById("eight").className && document.getElementById("seven").className === document.getElementById("nine").className) {
        if (document.getElementById("seven").className === "px") {
            document.getElementById("winmsg").innerHTML = '<div id="xwins"> <h1>X WINS!</h1> </div>';
            document.getElementsByClassName("hastag")[0].style.filter = "blur(8px)";
        } else {
            document.getElementById("winmsg").innerHTML = '<div id="owins"> <h1>O WINS!</h1> </div>';
            document.getElementsByClassName("hastag")[0].style.filter = "blur(8px)";
        }
    }

}
2

@SharonnoNayak This project needs to be posted in repl.it on codepen so that we can easily see it. You will get more feedback that way.