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

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.

What is JavaScript Function?

A JavaScript function is a block of code designed to perform a particular task.
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:

Below is the HTML code

<div id="game-board">

</div>

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

Below is the JavaScript code

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

*{
    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

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

Table of contents