In this part you have to code a game in Javascript.
In this game the player has to find a hidden gem in a 3 by 3 grid. When the page is loaded the gem is randomly placed in the grid (but not shown to the player). The player must make a guess between 1 and 9 with the grid cells numbered from 1 in the upper left and going across each row with 9 in the lower right. When the player makes an incorrect guess the spot in the grid is marked with an "O" and a message Try again is displayed. The player continues to guess until the gem location is found. When the gem is found an X is placed in that spot and a message is displayed congratulating the player. Also, if the player inputs an invalid number for cell a message is displayed correcting them. A player can also reset the board by clicking a button Clear. On reset, the gem should not stay in the same location but should again be randomly placed.
A sample display of the final results is below: see image.
The picture above is the start of the game
On an incorrect guess, a "O" fills the appropriate cell and the message "Try again!!" is displayed. see image.
On a guess of a cell number greater than 9 or less than 1, a correction message is displayed. see image.
On the correct guess, a congratulatory message is displayed. see image.
Hints:
This game can be built in a variety of ways and you should think of how best to approach this problem. Think modular functions that accomplish specific things.
a. One way to store the cell values between empty, "O", and "X" would be an array.
b. You may have a renderBoard function that displays the board (i.e. a table with 3 rows and 3 columns) and the values of cells corresponding to a specific cell that gets called and refreshes the board at the right moments in the game.
c. To setup the hidden gem at the start of the game you have to pick a number randomly between 1 and 9. Here is one way to do that
var setPos = Math.floor(Math.random() * (max - min + 1)) + min;