T6 Case Problem 2: The Japanese Puzzle Factory

Summary
The Japanese Puzzle Factory: Rebecca Peretz has a passion for riddles and puzzles. Her favorites are the Japanese logic puzzles that have become very popular in recent years. Rebecca and a few of her friends have begun work on a new website called The Japanese Puzzle Factory where they plan to create and distribute Japanese-style puzzles. Eventually, the JPF website will include interactive programs to enable users to solve the puzzles online, but for now Rebecca is interested only in the design and layout of the pages. You have been asked to help by creating a draft version of the web page describing the Sudoku puzzle
A preview of the home page is shown above.
The style sheets and graphic files have already been created for you. Your job is to write the HTML markup.
Instructions
This Review Assignment contains interactive instructions that you can complete to ensure you've completed the instruction correctly.
After reading each instruction thoroughly, perform the requested change in the code editor to the right. You can use the Build Website button to refresh your website preview at any point and view a full-page version of your website by clicking the arrow in the top right corner of your website preview.

Linking CSS File
Enter your name and the date in the comment section of jpf_sudoku.html and jpf_sudoku.css.
Open the jpf_sudoku.html file and add a link to the jpf_sudoku.css style sheet file to the document head.
You will not be tested on this instruction, but you should still complete it.
Create the Table
Within the section element, insert a table element that will be used to display the Sudoku puzzle. Give the table element the class name spuzzle .
Add a caption to the spuzzle table containing the text Sudoku.
Table Header
Create a table header row group containing a single row. The row should display 10 heading cells. The first heading cell should be blank and the remaining nine cells should display the digits from 1 to 9.
Table Body
Create the table body row group containing nine table rows with the first cell in each row containing a heading cell displaying the letters A through I.
After the initial table heading cell in the first, fourth, and seventh rows of the table body row group, insert three table data cells spanning three rows and three columns each. Altogether, these nine data cells will store the nine 3×3 boxes that are part of the Sudoku puzzle.
In the first row of the table body row, put the three table data cells you entered in the last step in the greenBox, goldBox, and greenBox classes, respectively. In the fourth row, the three data cells belong to the goldBox, greenBox, and goldBox classes. In the seventh row, the three data cells belong to the greenBox, goldBox, and greenBox classes.
Table Data Cells
Go to each of the nine table data cells you created in the last two steps. Within each data cell, insert a nested table belonging to the subTable class. Within each of these nested tables, insert three rows and three columns of data cells. Enter the digits from the example in the Introduction section in the appropriate table cells. Where there is no digit, leave the data cell empty.


Outer Table Layout
Open the jpf_sudoku.css file. Start by creating styles for the outer table. Go to the Table Styles section and create a style rule for the table element of the spuzzle class that:
sets the table borders to collapse,
sets the top/bottom margins to 0 pixels and the left/right margins to auto , and
sets the width to 90%.
Outer Table Elements
For every td element, create a style rule that:
adds a 5-pixel outset gray border and
sets the width to 33.3%
For every th element, create a style rule that:
sets the font color to gray and
sets the right and bottom padding space to 10 pixels.
Inner Table Layout
Next, you create styles for the inner table that is placed within each cell of the outer table. Go to the Inner Table Styles section and create a style rule for the table element of the subTable class that:
sets the table borders to collapse and
sets the width to 100%
Inner Table Elements
For every td element within the subTable table, create a style rule that:
adds an inset box shadow with offset values of 0 pixels in the horizontal and vertical directions with a blur of 15 pixels,
adds a 1-pixel solid black border,
displays the text in a blue font,
sets the cell height to 40 pixels, and
centers the cell text in the horizontal and vertical directions.
For every td element that is nested within a td element of the goldBox class, create a style rule that sets the background color to rgb(228, 199, 42).
For every td element that is nested within a td element of the greenBox class, create a style rule that sets the background color to rgb(203, 229, 130).


Verify
Open the jpf_sudoku.html file and click the Build Website button to verify that the table layout and design match the example shown in the Introduction section.
Review the webpage you have created on the right side of the screen.
Validate
You can use the W3C HTML Validator to ensure that your HTML files adhere to World Wide Web (W3) standards. This also helps improve the readability of your HTML files, making them easier to work with.

jpf_sudoku.html
<!DOCTYPE html>
<html>
<head>
   <!--
      New Perspectives on HTML5 and CSS3, 7th Edition
      Tutorial 6
      Case Problem 2

      Sudoku Puzzle
      Author:
      Date: 10/10/2018
      Filename:   jpf_sudoku.html

   -->

   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>The Sudoku Puzzle</title>
   <link href="jpf_reset.css" rel="stylesheet" />
   <link href="jpf_styles.css" rel="stylesheet" />
   <link href="jpf_sudoku.css" rel="stylesheet" />
</head>

<body>
   <header>
      <img src="jpf_logo.png" alt="Japanese Puzzle Factory" id="logoimg" />
      <nav> <a id="navicon" href="#"><img src="jpf_navicon.png" alt="" /></a>
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Store</a></li>
            <li><a href="#">Hints</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Competitions</a></li>
            <li><a href="#">Site Map</a></li>
         </ul>
      </nav>
   </header>

   <section>
	<table class="spuzzle">
		<caption>Sudoku</caption>
		<thead>
			<tr>
				<th></th>
				<th>1</th>
				<th>2</th>
				<th>3</th>
				<th>4</th>
				<th>5</th>
				<th>6</th>
				<th>7</th>
				<th>8</th>
				<th>9</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>A</th>
				<td rowspan="3" colspan="3" class="greenBox">
					<table class="subTable">
						<tr>
							<td></td>
							<td></td>
							<td>4</td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td>3</td>
							<td>5</td>
							<td></td>
						</tr>
					</table>
				</td>
				<td rowspan="3" colspan="3" class="goldBox">
					<table class="subTable">
						<tr>
							<td>5</td>
							<td></td>
							<td>3</td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</table>
				</td>
				<td rowspan="3" colspan="3" class="greenBox">
					<table class="subTable">
						<tr>
							<td></td>
							<td>7</td>
							<td></td>
						</tr>
						<tr>
							<td>3</td>
							<td>1</td>
							<td></td>
						</tr>
						<tr>
							<td>2</td>
							<td></td>
							<td></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<th>B</th>
			</tr>
			<tr>
				<th>C</th>
			</tr>
			<tr>
				<th>D</th>
				<td rowspan="3" colspan="3" class="goldBox">
					<table class="subTable">
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td>6</td>
							<td></td>
							<td>9</td>
						</tr>
						<tr>
							<td>4</td>
							<td>7</td>
							<td>2</td>
						</tr>
					</table>
				</td>
				<td rowspan="3" colspan="3" class="greenBox">
					<table class="subTable">
						<tr>
							<td></td>
							<td>2</td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td>9</td>
							<td></td>
						</tr>
					</table>
				</td>
				<td rowspan="3" colspan="3" class="goldBox">
					<table class="subTable">
						<tr>
							<td>9</td>
							<td>3</td>
							<td>7</td>
						</tr>
						<tr>
							<td>4</td>
							<td></td>
							<td>8</td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<th>E</th>
			</tr>
			<tr>
				<th>F</th>
			</tr>
			<tr>
				<th>G</th>
				<td rowspan="3" colspan="3" class="greenBox">
					<table class="subTable">
						<tr>
							<td></td>
							<td></td>
							<td>1</td>
						</tr>
						<tr>
							<td></td>
							<td>4</td>
							<td>5</td>
						</tr>
						<tr>
							<td></td>
							<td>6</td>
							<td></td>
						</tr>
					</table>
				</td>
				<td rowspan="3" colspan="3" class="goldBox">
					<table class="subTable">
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td>8</td>
							<td></td>
							<td>1</td>
						</tr>
					</table>
				</td>
				<td rowspan="3" colspan="3" class="greenBox">
					<table class="subTable">
						<tr>
							<td></td>
							<td>5</td>
							<td>2</td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td>7</td>
							<td></td>
							<td></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<th>H</th>
			</tr>
			<tr>
				<th>I</th>
			</tr>

		</tbody>
	</table>
   </section>

   <article>
      <h1>To Play</h1>
      <p>Sudoku is played on a 9x9 grid with nine 3x3 boxes
         placed within the grid. Enter a digit from 1 to 9 in
         each table cell. A few starting numbers have been
         supplied for you. The digits from 1 to 9 can appear
         only once each in every row, column, and box in the
         table (diagonals don't count). Every Sudoku puzzle
         has a unique solution.
      </p>
      <p>Good luck!</p>
   </article>

   <footer>
      <nav>
         <ul>
            <li><a href="#">Akari</a></li>
            <li><a href="#">Divide by Box</a></li>
            <li><a href="#">Fillomino</a></li>
            <li><a href="#">Hashiwokakero</a></li>
            <li><a href="#">Heyawake</a></li>

         </ul>
         <ul>
            <li><a href="#">Hitori</a></li>
            <li><a href="#">Kakuro</a></li>
            <li><a href="#">Katagaku</a></li>
            <li><a href="#">Masugo</a></li>
            <li><a href="#">Masyu</a></li>
         </ul>
         <ul>
            <li><a href="#">Nonogram</a></li>
            <li><a href="#">Oekaki Logic</a></li>
            <li><a href="#">Shikaku</a></li>
            <li><a href="#">Sudoku</a></li>
            <li><a href="#">Suhai</a></li>
         </ul>
         <ul>
            <li><a href="#">Super Sudoku</a></li>
            <li><a href="#">Tenketsu</a></li>
            <li><a href="#">Tentai Show</a></li>
            <li><a href="#">Wordoku</a></li>
            <li><a href="#">Yajilin</a></li>
         </ul>
      </nav>
   </footer>

</body>
</html>

 jpf_sudoku.css
@charset "utf-8";
/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 6
   Case Problem 2

   Sudoku Style Sheet
   Author:
   Date: 10/10/2018
   Filename:jpf_sudoku.css

*/
/* Table Styles */

table.spuzzle {
	border-collapse: collapse;
	margin-bottom: 0px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
}

td {
	border: 5px outset gray;
	width: 33.3%;
}

th {
	color: gray;
	padding-bottom: 10px;
	padding-right: 10px;
}
/* Inner Table Styles */

table.subTable {
	border-collapse: collapse;
	width: 100%;
}

table.subTable td {
	box-shadow: inset 0px 0px 15px;
	border: 1px solid black;
	color: blue;
	height: 40px;
	text-align: center;
}

td.goldBox td {
	background-color: rgb(288,199,42);
}

td.greenBox td {
	background-color: rgb(203, 229, 130);
}