Day 12 - JavaScript Learning Blog: Chessboard Project!!

#webdev #javascript #css #html

Hi Developers!!

Project Title:

Chessboard using HTML, CSS, and JavaScript.

Project Description:

Today, I built a simple 8x8 Chessboard using HTML, CSS Grid, and JavaScript DOM manipulation. This project helped me understand how to create dynamic elements using JavaScript and apply CSS classes conditionally.

Important JavaScript Topics Covered:

1.DOM Manipulation:
Used document.createElement() to create div elements dynamically.

2.Loops (For Loop):
Two nested for loops generated 8 rows and 8 columns for the chessboard.

3.Conditional Statements (if-else):
Applied alternating colors based on the condition (row + col) % 2 == 0 to create the chess pattern.

4.setAttribute() Method:
Used to set id and class attributes dynamically for each square.

5.CSS Grid:
Created the grid layout using:

grid-template-columns: repeat(8, 60px);

This made 8 columns of equal size.

Source Code:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChessBoard</title>
    <style>
        #box {
            border: 1px solid gray;
            width: 60px;
            height: 60px;
        }

        #chessboard {
            display: grid;
            grid-template-columns: repeat(8, 60px);
        }

        .white-box {
            background-color: sandybrown;
        }

        .black-box {
            background-color: black;
        }
    </style>
</head>

<body>
    <div id="chessboard"></div>

    <script>
        const board = document.getElementById("chessboard");

        for (let row = 0; row < 8; row++) {
            for (let col = 0; col < 8; col++) {
                const square = document.createElement("div");
                square.setAttribute("id", "box");

                if ((row + col) % 2 == 0) {
                    square.setAttribute("class", "white-box");
                } else {
                    square.setAttribute("class", "black-box");
                }
                board.appendChild(square);
            }
        }
    </script>
</body>
</html>

Result:

Learnings:

1.How to dynamically generate HTML using JavaScript.
2.Using nested loops for grid-based layouts.
3.Applying different CSS styles conditionally via JS.
4.Mastery of basic CSS Grid for simple layouts.

Challenges Faced:

Initially forgot to use appendChild, so the boxes were not appearing.
Misunderstood the grid styling — later corrected by applying grid-template-columns.

Finaly:

This small project made me confident in DOM manipulation and conditional rendering in JavaScript. I'm slowly getting comfortable building small interactive web components.

Learning More!! DO Coding!!!

DEV Community

Day 12 - JavaScript Learning Blog: Chessboard Project!!

Top comments (0)