
previous

page 2
next
the Grid

Let's start by creating the grid. As there are 100 squares it makes sense to use JavaScript.
So create a squares.js file that contains the function squares() which writes the necessary html code.
To help you, below are the first two lines of output. The a attribute is for answer and will contain one of 1 to 7 indicating which image belongs on that square.
The v is for value and is used to store what the player puts there.
<div class='row'>
<img src='images/0.png' class='square' id='0' onClick='square_clicked(this);' a='7' v='0'>
<img src='images/0.png' class='square' id='0' onClick='square_clicked(this);' a='7' v='0'>
and here's my index.html now.
<html>
<head>
<title>Ships</title>
<link rel='stylesheet' href='styles.css'>
<script src='library.js'></script>
<script src='squares.js'></script>
</head>
<body>
<script>squares();</script>
</body>
<html>
<head>
<title>Ships</title>
<link rel='stylesheet' href='styles.css'>
<script src='library.js'></script>
<script src='squares.js'></script>
</head>
<body>
<script>squares();</script>
</body>
<html>
previous
next