HTML and CSS Reference
In-Depth Information
Engage thrusters
Let's work on the HTML and CSS to create the layout's skeleton:
1. First, in the
index.html
file, we define the following DOM nodes for the game
elements. The structure defines how the nodes are grouped:
...
<div id="game">
<div id="status-bar">$23,000</div>
<div id="customer-view">
<canvas id="canvas" width="100" height="100">
</canvas>
</div>
<div id="dishes"></div>
<div id="sushi-area">
<div id="ingredients">
<div class="ingredient" data-type='rice'>10</div>
<div class="ingredient"
data-type='octopus'>10</div>
<div class="ingredient" data-type='salmon'>10</div>
<div class="ingredient" data-type=
'salmon-roe'>10</div>
<div class="ingredient"
data-type='seaweed'>10</div>
<div class="ingredient" data-type='egg'>10</div>
<div id="phone"></div>
</div>
<div id="sushi-board">
<a id="delete-sushi-btn">Delete</a>
<div id="others"></div>
<div id="rices"></div>
<div id="seaweeds"></div>
</div>
</div>
</div>
<div id="recipes">
<h1>Sushi Recipes</h1>
<p><img src="images/recipe.png" alt="recipe"></p>
</div>
...
2. Most of the layout-changing logic code is present in CSS. We have the following
styles for the layout:
/* Main layout */
/* By default, the game is 100% width and the recipes is at the
bottom of the game */
