
previous

page 32
next
displaying the total
I was going to suggest that you implement this all by yourself but, when I tried myself, I found it was trickier than I thought.
It's not enough to keep adding the row or column score after each click because that score can be different to last time so we need to subtract the old_score from the total before adding the new score!
my index.html
<body>
<script>var total=0;</script>
<script>var pick=Random(9);</script>
<div id='left_panel'>
<img src='counters/0.png' id='pick'>
<div id='total'>0</div>
</div>
<script>var total=0;</script>
<script>var pick=Random(9);</script>
<div id='left_panel'>
<img src='counters/0.png' id='pick'>
<div id='total'>0</div>
</div>
We will need a new bit of CSS to make the total sit under the picked counter -
flex-direction:column; because flex flows across the page by default.
my styles.css
#left_panel {
display:flex;
flex-direction:column;
align-items:center;
}
display:flex;
flex-direction:column;
align-items:center;
}

previous
next