Please reply asap, need it according to the requirement.
Board Design The primary feature of the main web page is the sudoku board. This will be implemented as a 99 table, with appropriate styling (see the figures, below). The board must be centred horizontally on the page, and each column and row must be consistent sizing. For the purposes of this part of the lab, hard code the values shown in the sample below. The table will be given the id board for easy styling and element lookups in JavaScript, later. Try to match the font and font size as closely as possible, and use the various screenshots throughout this document to match the layout, table borders, and other styling. Figure 1 - The sudoku board Below the game board, there will be another table consisting of every digit, except zero (19), as well as an undo icon ( Figure 2 - The numbers palette Note: All styling information should be included in the provided CSS file Additional Styling When the cursor hovers over a cell in the Sudoku board, or in the numbers palette, it should change its background colour to Create two additional CSS classes, which will be used in the next part: - will set the background colour to - will set the background colour to Part 2 - Common Page Elements and a High Scores Table Common Page Elements Both the game page and the high scores page will have the same header, which will show a logo and the title of the page, as well as a simple menu. This will be made using the Bulma CSS framework. For simplicity, you can just copy/paste the code into the other page once you get it working in one of the pages. The menu will appear horizontally in a large display, and will collapse into a menu button on smaller displays. The menu will have two items: - links to the game page I - links to the high scores page 1 Sudoku Centre Play Game High Scores Figure 3 - The game page - desktop version Figure 4 - The game page - mobile version Note: All styling information should be included in the provided CSS file High Scores Table The high scores page will display a list of high scores, including the date (format: and the duration (in minutes and seconds, format: to complete. For now, just fill this table with sample data from the figures, below. Sudoku Centre Play Game High Scores Figure 5 - The high scores page - desktop version Figure 5 - The high scores page - desktop version Sudoku Centre Figure 6 - The high scores page - desktop version Sudoku Page Add code to the sudoku. js file that will dynamically build the game board, based on an array of integers (19, with 1 being a special placeholder value representing empty cells). When you create the td elements, give them a name (e.g. for the cell in row 2 , the third row, and column 1 , the second column), so that it will be easy to lookup. When a cell in the numbers palette is clicked, it will make that digit active. When a digit (1-9) is active, clicking on a cell in the game board will make the number appear in that game board. This is how a user will make a move in the game. When a move is made such that one of the following condition holds, all conflicting cells will be highlighted usign the class: - another of the same digit is present elsewhere in the same row - another of the same digit is present elsewhere in the same column - another of the same digit is present elsewhere in the same 33 block The following code may be helpful (if you choose to use it): Note: Be sure to handle the case where the x and y values are identical. That would not be a conflict. Finally, the undo button will undo the last move made by the user. This will include un-highlighting any previously highlighted cells from an erroneous move. High Scores Page Add code to the file that will dynamically build the high scores table, based on an array of JavaScript objects (e.g
