DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Ganesh Shetty
Ganesh Shetty

Posted on

How to design a ChessBoard using CSS flex box and Javascript

In this article i am going to show how to design chessboard using css and little bit of javascript.
For this you need to have basic idea of CSS Flex-box and nth-child() property.

So let's get started...
We will add containerEven class as parent container for every even row and containerOdd for every odd row,

Below shows the CSS for the same

    .containerEven>div:nth-child(odd) {
        background-color: white;
    }

    .containerEven>div:nth-child(even) {
        background-color: black;
    }

    .containerOdd>div:nth-child(odd) {
        background-color: black;
    }

    .containerOdd>div:nth-child(even) {
        background-color: white;
    }
Enter fullscreen mode Exit fullscreen mode

Here is the html part

<div class="parent-class">
    <section class="containerEven" id='container1'></section>
    <section class="containerOdd" id='container2'></section>
    <section class="containerEven" id='container3'></section>
    <section class="containerOdd" id='container4'></section>
    <section class="containerEven" id='container5'></section>
    <section class="containerOdd" id='container6'></section>
    <section class="containerEven" id='container7'></section>
    <section class="containerOdd" id='container8'></section>
</div>
Enter fullscreen mode Exit fullscreen mode

Now what's left is using javascript to dynamically append element inside these section tags with the help of corresponding id.

  var res1 = [], res2 = [], res3 = [], res4 = [], res5 = [], res6 = [], res7 = [], res8 = [];
    for (i = 1; i <= 8; i++) {
        res1 += `<div class="item"></div>`
        res2 += `<div class="item"></div>`
        res3 += `<div class="item"></div>`
        res4 += `<div class="item"></div>`
        res5 += `<div class="item"></div>`
        res6 += `<div class="item"></div>`
        res7 += `<div class="item"></div>`
        res8 += `<div class="item"></div>`
    }
    document.getElementById(`container1`).innerHTML = res1;
    document.getElementById(`container2`).innerHTML = res2;
    document.getElementById(`container3`).innerHTML = res3;
    document.getElementById(`container4`).innerHTML = res4;
    document.getElementById(`container5`).innerHTML = res5;
    document.getElementById(`container6`).innerHTML = res6;
    document.getElementById(`container7`).innerHTML = res7;
    document.getElementById(`container8`).innerHTML = res8;
Enter fullscreen mode Exit fullscreen mode

So here, what we are doing is we have taken 8 arrays to store each row data.Once we get the data we append it to corresponding container id,

Here is the complete code with output

<style>
    .parent-class {
        border: 5px chocolate groove;
    }

    .containerEven,
    .containerOdd {
        display: flex;
        background-color: dodgerblue;
    }

    .item {
        background-color: #f1f1f1;
        padding: 20px;
        font-size: 30px;
        flex: 1;
        height: 50px;
        text-align: center;
    }

    .containerEven>div:nth-child(odd) {
        background-color: white;
    }

    .containerEven>div:nth-child(even) {
        background-color: black;
    }

    .containerOdd>div:nth-child(odd) {
        background-color: black;
    }

    .containerOdd>div:nth-child(even) {
        background-color: white;
    }
</style>

<div class="parent-class">
    <section class="containerEven" id='container1'></section>
    <section class="containerOdd" id='container2'></section>
    <section class="containerEven" id='container3'></section>
    <section class="containerOdd" id='container4'></section>
    <section class="containerEven" id='container5'></section>
    <section class="containerOdd" id='container6'></section>
    <section class="containerEven" id='container7'></section>
    <section class="containerOdd" id='container8'></section>
</div>

<script>
    var res1 = [], res2 = [], res3 = [], res4 = [], res5 = [], res6 = [], res7 = [], res8 = [];
    for (i = 1; i <= 8; i++) {
        res1 += `<div class="item"></div>`
        res2 += `<div class="item"></div>`
        res3 += `<div class="item"></div>`
        res4 += `<div class="item"></div>`
        res5 += `<div class="item"></div>`
        res6 += `<div class="item"></div>`
        res7 += `<div class="item"></div>`
        res8 += `<div class="item"></div>`
    }
    document.getElementById(`container1`).innerHTML = res1;
    document.getElementById(`container2`).innerHTML = res2;
    document.getElementById(`container3`).innerHTML = res3;
    document.getElementById(`container4`).innerHTML = res4;
    document.getElementById(`container5`).innerHTML = res5;
    document.getElementById(`container6`).innerHTML = res6;
    document.getElementById(`container7`).innerHTML = res7;
    document.getElementById(`container8`).innerHTML = res8;
</script>
Enter fullscreen mode Exit fullscreen mode

Image description

Hope this helps you ..

Top comments (0)

Thank you.

Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.