is to improve the tic-tac-toe game extending it by adding additional JavaScript functionality and an external Cascading
Posted: Thu Jul 14, 2022 2:18 pm
is to improve the tic-tac-toe game extending it by addingadditional JavaScript functionality and an external Cascading StyleSheet for stylizing the game. (As you see, the visual quality ofthe current game (BeforeUpdating.html) is pretty boring).
Author an external style sheet named final.css and place allstyle rules within it (none internal in the STYLE block).
Make sure to include a style rule with a selector that will acton the empty spaces when hovered over changing, their backgroundcolor.
Let your imagination go wild and style other parts of the pageand game board as you wish.
You will have to develop a new function, with name ofgetWinner(), that checks if there is a winner. The functionshould:
If there is a winner ("X" or "O"), currently no winner (but gamecontinues), or no winner and game has ended then the functionshould return "X", "O", "", or "C", respectively.
If there is a winner, the getWinner() function should change thecolor of the winning spaces to make it clear which spaces hold thewinning moves. Use CSS for this (hint: classes).
Call the getWinner() function within the clickSpace() functionthat already exists after processing a turn.
After calling getWinner() within clickSpace(), you should changethe paragraph below the table to
indicate who won, if there is currently a winner. Remember, thegame can end without any winner.
The game should NOT continue after a winner has been detected(no additional moves). A global variable that holds the winner (asreturned by getWinner()) is needed for this.
Add a New Game button below the label paragraph that calls afunction (yes, another function, whatever name you wish) thatresets global variables, the label text and clears all spaces.
Author an external style sheet named final.css and place allstyle rules within it (none internal in the STYLE block).
Make sure to include a style rule with a selector that will acton the empty spaces when hovered over changing, their backgroundcolor.
Let your imagination go wild and style other parts of the pageand game board as you wish.
You will have to develop a new function, with name ofgetWinner(), that checks if there is a winner. The functionshould:
If there is a winner ("X" or "O"), currently no winner (but gamecontinues), or no winner and game has ended then the functionshould return "X", "O", "", or "C", respectively.
If there is a winner, the getWinner() function should change thecolor of the winning spaces to make it clear which spaces hold thewinning moves. Use CSS for this (hint: classes).
Call the getWinner() function within the clickSpace() functionthat already exists after processing a turn.
After calling getWinner() within clickSpace(), you should changethe paragraph below the table to
indicate who won, if there is currently a winner. Remember, thegame can end without any winner.
The game should NOT continue after a winner has been detected(no additional moves). A global variable that holds the winner (asreturned by getWinner()) is needed for this.
Add a New Game button below the label paragraph that calls afunction (yes, another function, whatever name you wish) thatresets global variables, the label text and clears all spaces.