Home
Javascript
Web Development

How To Create ChessBoard Using JavaScript

As We Know That ChessBoard Is A Square Game Board Which Is Divided Into 64 Alternative Black And White Square. It Is Used For Playing Chess (Also Know As Checkers)



ChessBoard Design In HTML

We Can Create ChessBoard Using HTML & CSS. For This Purpose , We Will Create HTML Table Having 8 Rows & 8 Column And That Will Generate A Square Board Having Total 64 Boxes (8x8=64). But Let Me Ask You A Question. Why To Write Table's Data Code So Many Time When We Have JavaScript ? So In This Tutorial We Will Learn How To Create ChessBoard By Using JavaScript.

Designing ChessBoard In JavaScript

JavaScript Provide Us Loop By Using Which We Can Generate Our Output Until The Condition Is Satisfied. So We Will Use Loop & Generate HTML Table Having 8 Rows & 8 Column. So Due To This , We Are Not Required To Write The HTML Table Code So Many Time & Hence , It Will Save Our Time

JavaScript Code To Generate ChessBoard


<html>
<head>
    <title>ChessBoard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- Code From www.NarendraDwivedi.Org -->
    <script>
        document.write("<table border='1' width='500' height='500' align='center' style='max-width:100%;max-height:100%;'>");
        for (var i = 1; i <= 8; i++) {
            document.write("<tr>");
            for (var j = 1; j <= 8; j++) {
                if ((i + j) % 2 != 0) {
                    document.write("<td bgcolor='white'></td>");
                }
                else {
                    document.write("<td bgcolor='black'></td>");
                }
            }
            document.write("</tr>");
        }
        document.write("</table>");
    </script>
</body>
</html>
Open Any Text Editor & Enter The Code Given Above. Save The File As .html Extension. It Will Generate ChessBoard Using JavaScript.

Output Of JavaScript ChessBoard Design

Post a Comment