ag$\_$squares.html ag$\_$squares.js ag$\_$cards$2.$js Use your editor to open the ag$\_$squares.html$,$ ag$\_$squares.js$,$ and ag$\_$cards$2.$js files. Enter your name and the date in the comment section of each file. Linking JS File Go to the ag$\_$squares.htm$/$ file in your editor. Link the page to the ag$\_$cards$2.$js and ag$\_$squares.js files in that order, loading the files asynchronously. Take some time to study the HTML code in the file.JavaScript Objects Go to the ag$\_$cards$2.$js file in your editor. Bob has already created an object literal for the object containing the array for storing five poker hands and two methods: the method for calculating the point total for a poker hand in a row indicated by an index argument, and the method for calculating the point total for a poker hand in a column indicated by an index. Complete the squareGame object by adding the following properties and methods $($make sure you separate the properties and methods with a comma.$)1.$ The property of the variable, which stores the total points achieved in the Poker Squares game. Set its value to $0.2.$ The property of the variable, which stores the point total required for winning the game. Set its value to $50.3.$ The method, which returns the text string "Winner" if gameTotal is greater than or equal to winTotal; otherwise returns the text string $"$No Winner". Below the object, insert code for the method of the object prototype. The purpose of this method is to insert a card into a poker hand at a specified index. The method has two arguments: the card argument referencing a object and the argument specifying the location where the card should be placed. Insert a command into the function to make equal to the value of the argument.Open the ag$\_$squares.js file in your editor. Go to the function. Within the function add an event handler to the object that runs an anonymous function when the user clicks the Start Button on the webpage. Within the anonymous function, do the tasks laid out in the remainder of this step. Set up the initial game board by doing the following: $1.$ Set the property of the object to $0.2.$ Remove the current game score by changing the value of the input box on the page to an empty text string. $3.$ Remove the current game result by changing the text content of the element on the page to an empty text string. $4.$ Remove the current row and column totals by looping through the contents of the and object collections, setting the text content of each cell to an empty text string. $5.$ Remove the current card images by looping through the object collection, setting the source of every inline image to the $"$ag$\_$trans.gif" file. Create a new object named and use the method to randomize the order of its cards.Create a new object named myStarterCard. Apply the shift$()$ method to the cards array of myDeck to store the first card from the deck in myStarterCard. Change the src attribute of the inline image by calling the method for the object. The starter card is added to the board by clicking a cell in the grid table where the user wants the card placed. For every image in the collection, create an event handler that does the following: $1.$ Applies the method to the object to display the image of the current card in the event object target. $2.$ Stores the row number and column number of the clicked image in the and variables. $($Hint: Use the method to retrieve the second and third characters of the attribute of the event object target.$)3.$ Applies the method to the object to insert a card into the new grid. Use as the poker card and as the location in the method. $4.$ After the card has been placed within the grid, it cannot be changed. Set the event handler of the event target to to prevent the user from re$-$clicking the cell later in the game.Finally, test whether the user has completed the grid table. Within the event handler of the previous step, test whether there are more than $27$ cards left in the deck. If there are more than $27$ cards left, the game continues. Shift the next card from myDeck into the myStarterCard object and change the attribute of to display the image of the next starter card. Otherwise, if the grid table is completed and the game is over, calculate the game score and totals for the poker hands in each row and column as follows: $1.$ Indicate that the game is over by changing the attribute of the image to the $"$ag$\_$cardback$3.$png$"$file$.2.$ Calculate the row poker hand totals by creating a for loop with a counter variable that goes from $0$ to $4.$ Declare the variable equal to the value returned by the method of object, using your counter variable as the parameter value. Add to the value of the property of the object. Display the value in the element with the id rowindexsum where index is the value of your counter variable$\mathrm{.}3.$ Calculate the column totals with another for loop as you did in the previous step for the row totals. Use the method to calculate the totals for each column poker hand, adding the column total to the property and displaying column total value in the element with the colindexsum. $4.$ Change the value of the input box to the value of the property of the object. $5.$ Show whether the user won or lost by changing the text content of the element to the text returned by the object's method. Document your work with comments."use strict"; New Perspectives on HTML$5,$ CSS$3,$ and JavaScript $6$th Edition Tutoriew Assignment $14$ Author: Date: Filename: ag$\_$cards $2.$ j s Custom Object classes squareGame The squareGame object contains properties and methods for the game of Poker Squares