# How I Create The Game Board(6*5) Of Wordle Using JavaScript

Hi everyone,

Welcome to my blog. This post will show you **How I Create the Game Board(6\*5) of Wordle using Javascript**  
  
In this project, I am going to create the game board by writing a JavaScript function.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671352839624/4b_KNaP9w.png align="center")

  

## What is JavaScript Function?  

1.  A JavaScript function is a block of code designed to perform a particular task.
    
2.  A JavaScript function is executed when "something" invokes it (calls it)
    

## JavaScript Function Syntax

A JavaScript function is defined with the `function` keyword, followed by a **name**, followed by parentheses **()**.

`function name(parameter1, parameter2, parameter3) {     // code to be executed   }`

## **Let's Start working on projects**

* * *

**First, we start from HTML files, where you can link CSS and JavaScript files using the code below:**

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1661573816012/poaAZqWcW0.png?auto=compress,format&format=webp align="left")

## **Below is the HTML code**

```xml
<div id="game-board">

</div>
```

We make container for the game board using a div tag.

* * *

## Below is the JavaScript code

```javascript
function initBoard() {
    let board = document.getElementById("game-board");

    for (let i = 0; i < 6; i++) {
        let row = document.createElement("div")
        row.className = "letter-row"
        
        for (let j = 0; j < 5; j++) {
            let box = document.createElement("div")
            box.className = "letter-box"
            row.appendChild(box)
        }
        board.appendChild(row)
    }
}

initBoard()
```

So what does this code do? `initBoard` creates one row for each guess we give the user and creates 5 boxes for each row. There is one box for each letter of the guess, and the function makes them all children of the row.

`initBoard` then adds each row to the board container. Each row is given the class `letter-row`, and each box is assigned `letter-box`.

* * *

## **Below is the CSS code**

```css
*{
    margin: 0;
    padding: 0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    background-color: black;
}
#game-board{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.letter-box{
     border: 2px solid grey;
     border-radius: 3px;
     margin: 2px;
     font-size: 2.5rem;
     font-weight: 700;
     height: 3rem;
     width: 3rem;
     display: flex;
     justify-content: center;
     flex-direction: row;;
     align-items: center;
     text-transform: uppercase;
}
.letter-row{
    display: flex;
}
```

This CSS does a few things:

*   centres the rows of the board horizontally and vertically
    
*   sets a height, width, and border for each box on the board
    
*   creates a distinct look for a box filled with a letter