index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chess Game</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h1>Master Chess</h1>
        <ul>
            <div class="div" id="raw8">
                <li class="box" id="b801">Brook</li>
                <li class="box" id="b802">Bknight</li>
                <li class="box" id="b803">Bbishop</li>
                <li class="box" id="b804">Bqueen</li>
                <li class="box" id="b805">Bking</li>
                <li class="box" id="b806">Bbishop</li>
                <li class="box" id="b807">Bknight</li>
                <li class="box" id="b808">Brook</li>

            </div>

            <div class="div" id="raw7">
                <li class="box" id="b701">Bpawn</li>
                <li class="box" id="b702">Bpawn</li>
                <li class="box" id="b703">Bpawn</li>
                <li class="box" id="b704">Bpawn</li>
                <li class="box" id="b705">Bpawn</li>
                <li class="box" id="b706">Bpawn</li>
                <li class="box" id="b707">Bpawn</li>
                <li class="box" id="b708">Bpawn</li>
            </div>

            <div class="div" id="raw6">
                <li class="box" id="b601"></li>
                <li class="box" id="b602"></li>
                <li class="box" id="b603"></li>
                <li class="box" id="b604"></li>
                <li class="box" id="b605"></li>
                <li class="box" id="b606"></li>
                <li class="box" id="b607"></li>
                <li class="box" id="b608"></li>
            </div>

            <div class="div" id="raw5">
                <li class="box" id="b501"></li>
                <li class="box" id="b502"></li>
                <li class="box" id="b503"></li>
                <li class="box" id="b504"></li>
                <li class="box" id="b505"></li>
                <li class="box" id="b506"></li>
                <li class="box" id="b507"></li>
                <li class="box" id="b508"></li>
            </div>

            <div class="div" id="raw4">
                <li class="box" id="b401"></li>
                <li class="box" id="b402"></li>
                <li class="box" id="b403"></li>
                <li class="box" id="b404"></li>
                <li class="box" id="b405"></li>
                <li class="box" id="b406"></li>
                <li class="box" id="b407"></li>
                <li class="box" id="b408"></li>
            </div>

            <div class="div" id="raw3">
                <li class="box" id="b301"></li>
                <li class="box" id="b302"></li>
                <li class="box" id="b303"></li>
                <li class="box" id="b304"></li>
                <li class="box" id="b305"></li>
                <li class="box" id="b306"></li>
                <li class="box" id="b307"></li>
                <li class="box" id="b308"></li>
            </div>

            <div class="div" id="raw2">
                <li class="box" id="b201">Wpawn</li>
                <li class="box" id="b202">Wpawn</li>
                <li class="box" id="b203">Wpawn</li>
                <li class="box" id="b204">Wpawn</li>
                <li class="box" id="b205">Wpawn</li>
                <li class="box" id="b206">Wpawn</li>
                <li class="box" id="b207">Wpawn</li>
                <li class="box" id="b208">Wpawn</li>
            </div>

            <div class="div" id="raw1">
                <li class="box" id="b101">Wrook</li>
                <li class="box" id="b102">Wknight</li>
                <li class="box" id="b103">Wbishop</li>
                <li class="box" id="b104">Wqueen</li>
                <li class="box" id="b105">Wking</li>
                <li class="box" id="b106">Wbishop</li>
                <li class="box" id="b107">Wknight</li>
                <li class="box" id="b108">Wrook</li>
            </div>
        </ul>
        <h2 id="tog">White s Trun</h2>
        <h2 id="reset-btn">Reset</h2>
    </div>
    <script src="logic.js"></script>
</body>

</html>