previous

page 20

next
the message element

If you carefully tried the new words_check it would not have worked because we haven't added a message element to our HTML file yet.
I hope you realise we can easily test at this stage because we always know what the four words are.

Ideally the message element should be under the grid.
So now would be a good time to improve the layout by using flex to centre everything.

First group all the rows together in a single div.
Underneath this div, add the message element:

<div id='message'></div>

and here's the CSS I came up with:

body {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:90vmin;
}
#message {
font-size:4vmin;
height:9vmin;
}

At the moment your game will always produce the first set only.
My plan is to select a random set each time the game starts.
So you'll need my Random function again.

    function Random(n) {
      return Math.floor(Math.random() * (n) + 1);
    }

var g_set= word4_sets[Random((word4_sets.length)-1)];
previous
next