Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Make Your Own Bingo Card</title>
    <link href="Style/bingo.css" rel="stylesheet" />
    <script type="text/javascript">
        //This contains the variables for the number of squares and max number. This is done so we can easily alter then.
        //EG, if we were doing a VAT, we would have a variable for VAT rather than type 20% each time.
        //This way if VAT changed again we would have to change one line rather than multiple.
        var model =
        {
            NumOfSquares: 24,
            MaxNumber: 75,
        };

        //this contains the code to generate the random number.
        var helpers =
        {
            //this function uses max as a paramater. So whatever the value of maxNumber gets passed into it. When it's called in view.
            RandomNumber: function (max)
            {
                //Math.random() generates a random number between 0 and 1. We then multiple it by the max number (75).
                //this then rounds the number down to an interger. It Then adds one because we rounded down.
                //If we didn't add one, the number generated would be between 0 and 74 rather than 1 and 75.
                return Math.floor(Math.random() * max) + 1;
            }
        }

        var view =
        {
            //sets the prefix to "square" and creates the text for the error message.
            prefix: "square",
            errorMessage: "Sorry you are unable to play this game",
            //this function has thisSquare as a paramater.
            setSquare: function (thisSquare)
            {
                //creates currSquare and sets it to prefix, so "square" and then concatanates it with the id of thisSquare, which would be i from controller.
                //so it's the same as  var currSquare = "square" + i; from version 2.
                var currSquare = view.prefix + thisSquare.toString();
                //Changes the inner html of the current square to the contents of RandomNumber passing in the maxNumber from model.
                document.getElementById(currSquare).innerHTML = helpers.RandomNumber(model.MaxNumber);
            },
            //This function will display the error message when called.
            displayMessage: function (message)
            {
                //alert will make a popup with
                message
                alert(message);
            },
        };

        var controller =
        {
            initAll: function ()
            {
                //This if statement checks if we can use getElementById. If we can't it will display the error message.
                if (document.getElementById)
                {
                    //this for loop creates a var called i, sets it to 0.
                    //as long as i is less than the number of squares (24), it runs setsquare in view, then adds one to i.
                    //so it will repeat 24 times, populating the contents of the squares.
                    for (var i = 0; i < model.NumOfSquares; i++)
                    {
                        //runs setSqaure with i being passed in.
                        view.setSquare(i);
                    }
                }
                else
                {
                    //displays the error message created in view.
                    view.displayMessage(view.errorMessage);
                }
            }
        };
        //runs initALL inside controller when the window loads.
        window.onload = controller.initAll;

    </script>
</head>
<body>
    <h1>Bingo</h1>
    <div>
        <table>
            <tr>
                <th>B</th>
                <th>I</th>
                <th>N</th>
                <th>G</th>
                <th>O</th>
            </tr>
            <tr>
                <td id="square0">&nbsp;</td>
                <td id="square5">&nbsp;</td>
                <td id="square10">&nbsp;</td>
                <td id="square14">&nbsp;</td>
                <td id="square19">&nbsp;</td>
            </tr>
            <tr>
                <td id="square1">&nbsp;</td>
                <td id="square6">&nbsp;</td>
                <td id="square11">&nbsp;</td>
                <td id="square15">&nbsp;</td>
                <td id="square20">&nbsp;</td>
            </tr>
            <tr>
                <td id="square2">&nbsp;</td>
                <td id="square7">&nbsp;</td>
                <td id="free">Free</td>
                <td id="square16">&nbsp;</td>
                <td id="square21">&nbsp;</td>
            </tr>
            <tr>
                <td id="square3">&nbsp;</td>
                <td id="square8">&nbsp;</td>
                <td id="square12">&nbsp;</td>
                <td id="square17">&nbsp;</td>
                <td id="square22">&nbsp;</td>
            </tr>
            <tr>
                <td id="square4">&nbsp;</td>
                <td id="square9">&nbsp;</td>
                <td id="square13">&nbsp;</td>
                <td id="square18">&nbsp;</td>
                <td id="square23">&nbsp;</td>
            </tr>
        </table>
    </div>
    <div>
        <p>
            <button id="BtnCall">Shout Number</button>
        </p>

        <div id="usednum"></div>

    </div>
</body>
</html>