previous

page 28

next
the picked counter is not displayed

First we need a place for it to display so we need an image added to our html page. But we need it to be separate from the grid display so we need to group what we have so far with div tags. Have a go and then check mine:

<body>
<script>var pick=Random(9);</script>
<img src='counters/0.png' id='pick'>
<div>
<div class='row'>
<script>one_row(0);</script>
</div>
...
<div class='row5'>
<script>row5();</script>
</div>
</div>

To see how far we've got - change 0.png to 1.png.
Well, it's a start but we need to adjust its size like the other counters. We could use the cell class but that would put a border around it. What we need is just to do height:13vmin; for this one item. We can get to it via its id even in CSS - like this:

#pick {
height:13vmin;
}

Note that a hash ( # ) is used to tell CSS that pick is an id.

Next we need to get the picked counter beside the grid.
Couldn't be easier - just turn the whole body into a flex display.
And maybe you remember how to get the picked counter centred.

previous
next