Hello,

I am a new Computer Science student and I am having a hard time working on an at home practice exercise meant to help me better learn html coding. Most of it is set up and I am to practice writing the coding for 7 specifications and rules set for this game. I have little to none experience in html coding and I know what is supposed to be accomplished (it's stated as notes in the middle of the code) but I honestly don't even know how to start trying it. Here is the program code :

Code:

<HTML>

<HEAD><TITLE>GridSquares</TITLE></HEAD>

<SCRIPT>

function getBoardSquareColor(row, col)
{
   grid = document.getElementById("gridTable");

   cell = grid.rows[row].cells[col];
   
   return cell.style.backgroundColor;
}

function passTestBoards()
{
    

    generateBoard(["teal", "blue", "green", "orange", "gold", "yellow", "blue", "teal",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "red", "red", "red", "red", "black", "black", "black", "black",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "teal", "silver", "gold", "gold", "gold", "gold", "gold", "teal"]);

    if(!isGoodBoard())
    {
        alert("Does not accept board that's okay.");
        return false;
    }

    generateBoard(["teal", "blue", "green", "orange", "gold", "yellow", "blue", "teal",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "red", "red", "red", "red", "black", "black", "black", "black",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "gold", "gold","white", "gold","gold", "gold","gold", "gold",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "teal", "silver", "gold", "gold", "gold", "gold", "gold", "teal"]);

    if(isGoodBoard())
    {
        alert("Does not check test 1 correctly.");
        //return false;
    }


    generateBoard(["teal", "blue", "green", "orange", "gold", "yellow", "blue", "teal",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "red", "red", "red", "red", "black", "black", "black", "red",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "gold", "gold","red", "gold","gold", "gold","gold", "gold",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "teal", "silver", "gold", "gold", "gold", "gold", "gold", "teal"]);

    if(isGoodBoard())
    {
        alert("Does not check test 2 correctly.");
        //return false;
    }


    generateBoard(["teal", "blue", "green", "orange", "gold", "yellow", "blue", "orange",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "red", "red", "red", "red", "black", "black", "black", "black",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "teal", "silver", "gold", "gold", "gold", "gold", "gold", "teal"]);

    if(isGoodBoard())
    {
        alert("Does not check test 3 correctly.");
        //return false;
    }

    generateBoard(["teal", "blue", "green", "orange", "gold", "yellow", "blue", "teal",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "red", "red", "black", "red", "black", "black", "black", "black",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "teal", "silver", "gold", "gold", "gold", "gold", "gold", "teal"]);

    if(isGoodBoard())
    {
        alert("Does not check test 4 correctly.");
        //return false;
    }


    generateBoard(["teal", "blue", "blue", "blue", "blue", "blue", "blue", "teal",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "red", "red", "red", "red", "black", "black", "black", "black",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "gold", "gold","gold", "gold","gold", "gold","green", "green",
                   "gold", "gold","gold", "gold","gold", "gold","gold", "gold",
                   "gold", "gold","gold", "gold","gold", "gold","green", "green",
                   "teal", "silver", "gold", "gold", "gold", "gold", "gold", "teal"]);

    if(!isGoodBoard())
    {
        alert("Does not accept board that's okay.");
        //return false;
    }
}

function isGold(rgbColor)
{
    return rgbColor == "rgb(255, 215, 0)";
}

function isWhite(rgbColor)
{
    return rgbColor == "rgb(255, 255, 255)" || rgbColor.search(/white/i) != -1;
}

function isBlack(rgbColor)
{
    return rgbColor == "rgb(0, 0, 0)"  || rgbColor.search(/black/i) != -1;
}

function isRed(rgbColor)
{
    return rgbColor == "rgb(255, 0, 0)" || rgbColor.search(/red/i) != -1;
}

function isBlue(rgbColor)
{
    return rgbColor == "rgb(0, 0, 255)" || rgbColor.search(/blue/i) != -1;
}

function isOrange(rgbColor)
{
    return rgbColor == "rgb(255, 165, 0)" || rgbColor.search(/orange/i) != -1;
}

function isGoodBoard()
{

    // CODE FOR TEST 1 BELOW: All grid squares should have a nonwhite color - return false if not before test 2
	
	

    // CODE FOR TEST 2 BELOW: Some border square should be black. - return false otherwise before test 3


    // CODE FOR TEST 3 BELOW: All corner grid squares should be the same color - return false otherwise before test 4


    // CODE FOR TEST 4 BELOW: There should exist at least four grid squares that are red. - return false otherwise before test 5


    // CODE FOR TEST 5 BELOW: No matter what grid square is chosen, there should be a neighboring one (horizontally, vertically, or diagonally) that's gold. - return false otherwise before test 6


    // CODE FOR TEST 6 BELOW: If there's an orange square on the board, then there will need to be a blue square as well. (But the board can have a blue square without having an orange one.) - return false otherwise before test 7


    // CODE FOR TEST 7 BELOW: There needs to exist a square whose color is different from every other square's color. - return false otherwise
  

    return true;
}





function generateRandomColor()

{

    return "#" + Math.floor(Math.random()*Math.pow(256,3)).toString(16);

}

function generateBoard(boardColors)
{
    var grid = document.getElementById("gridTable");

    var numOfRows = grid.rows.length;

    var numOfCols = 8;


    var numOfSpecifiedColors = boardColors.length;
    var index = 0;
    var r;
    var c;

    for(r = 0; r < numOfRows; r++)

    {

        for(c = 0; c < numOfCols; c++)

        {

            cell = grid.rows[r].cells[c];
            
            if(index < numOfSpecifiedColors)
                cell.style.backgroundColor = boardColors[index];

            else
                cell.style.backgroundColor = generateRandomColor();

            index++;
            //cell.style.backgroundColor = "gold";

        }

    }

//alert(isGold(getBoardSquareColor(0, 0)));

}

</SCRIPT>

<BODY BGCOLOR = "#FFFFFF">

<TABLE BORDER = "1">
<TR>

<TD>

<TABLE BORDER = "1" CELLPADDING = "1" id = "gridTable">
<TR>
<TD HEIGHT = "50" WIDTH = "50" onClick = "alert(this.cellIndex)"></TD>
<TD HEIGHT = "50" WIDTH = "50"  onClick = "alert(this.cellIndex)"></TD>
<TD HEIGHT = "50" WIDTH = "50"></TD>
<TD HEIGHT = "50" WIDTH = "50"></TD>
<TD HEIGHT = "50" WIDTH = "50"></TD>
<TD HEIGHT = "50" WIDTH = "50"></TD>
<TD HEIGHT = "50" WIDTH = "50"></TD>
<TD HEIGHT = "50" WIDTH = "50"></TD>
</TR>

<OL>
<LI>All grid squares should have a nonwhite color.
<LI>Some border square should be black.
<LI>All corner grid squares should be the same color.
<LI>There should exist at least four grid squares that are red.
<LI>No matter what grid square is chosen, there should be a neighboring one (horizontally, vertically, or diagonally) that's gold.
<LI>If there's an orange square on the board, then there will need to be a blue square as well.  (But the board can have a blue square without having an orange one.)
<LI>There needs to exist a square whose color is different from every other square's color.
As you can see towards the middle is the comments where the code for tests 1-7 are supposed to go. As I mentioned before, I am having a hard time even starting because I am not too familiar with the terms and functions needed to even start the process of testing them. Any help/guidance/tips on how to write a code like that would be very much appreciated. Thank you!