Write a simple Bingo Card with Javascript and Jquery

Writing a bingo card couldn’t be easier with tools such as JQuery and a brain. There are some simple techniques that you need to put into place to get it all up and running. There are three files included in this tutorial. index.html, style.css and script.js

Now, you should end up with something like this:

Source Demo

If you want to glance through the source code you can do so here: index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Bingo - Card</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

        <script type="text/javascript" src="assets/js/script.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css" />
    </head>
    <body>

        <div id="page">
            <h1>Free Bingo Card</h1>
            <table>
                <tr>
                    <td id="cell0"> nbsp;</td>
                    <td id="cell5"> nbsp;</td>
                    <td id="cell10"> nbsp;</td>
                    <td id="cell14"> nbsp;</td>
                    <td id="cell19"> nbsp;</td>
                </tr>
                <tr>
                    <td id="cell1"> nbsp;</td>
                    <td id="cell6"> nbsp;</td>
                    <td id="cell11"> nbsp;</td>
                    <td id="cell15"> nbsp;</td>
                    <td id="cell20"> nbsp;</td>
                </tr>
                <tr>
                    <td id="cell2"> nbsp;</td>
                    <td id="cell7"> nbsp;</td>
                    <td id="free">Free</td>
                    <td id="cell16"> nbsp;</td>
                    <td id="cell21"> nbsp;</td>
                </tr>
                <tr>
                    <td id="cell3"> nbsp;</td>
                    <td id="cell8"> nbsp;</td>
                    <td id="cell12"> nbsp;</td>
                    <td id="cell17"> nbsp;</td>
                    <td id="cell22"> nbsp;</td>
                </tr>
                <tr>
                    <td id="cell4"> nbsp;</td>
                    <td id="cell9"> nbsp;</td>
                    <td id="cell13"> nbsp;</td>
                    <td id="cell18"> nbsp;</td>
                    <td id="cell23"> nbsp;</td>
                </tr>
            </table>
            <h3><a href="#" id="newCard" >Click me for a new card</a></h3>
        </div>

    </body>
</html>

The following is the source of the CSS: style.css

#page{
    width:455px;
    margin:0 auto;
}

td{
    font-family:arial;
    color:#333;
    padding:10px;
    width:50px;
    height:50px;
    text-align:center;
    border:10px solid #ddc;
    background-color:#eee;
}

.bingohead{
    border:10px solid #c2324c;
}

h1, h3, h3 a{
    font-family:arial;
    text-align:center;
    padding:3px;
    color:#211111;
    background-color:#EEEEEE;
    border:2px solid #DDDDCC;
}

td{
    cursor:pointer;
}

#free{
    background-color:#fff;
    color:#eee;
    cursor:default;
}

And finally all of that JavaScript goodness: script.js

$(document).ready(function(){
   
    var usedArray = new Array(76);
    var baseArray = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
    var number = 0;
    var base = 0;
   
    init();
   
    function init(){
        for(var i = 0; i<24; i++){
            fillCard(i);
        }
    }
	  	 
    function fillCard(i){
        base = baseArray[i] * 15;
        number = base + Math.floor(Math.random()*15)+1;
		 
		 
        if(usedArray[number] != true){
            $('#cell'+i).html(number);
            usedArray[number] = true;
        }else{
            fillCard(i);
        }
    }
	 
    function resetUsedNumbersArray(){
        for(var j = 0; j < usedArray.length; j++){
            usedArray[j] = false;
        }
    }
	 
	 
    $('#newCard').click(function(){
        resetUsedNumbersArray();
        init();
    });
	 
    $('td').click(function(){
		
        var toggle = this.style;
        toggle.backgroundColor = toggle.backgroundColor? "":"#333";
        toggle.color = toggle.color? "":"#fff";
    });

});

Something to read while eating your sandwich and drinking your tea, yummie! Extreme programming!!

4 comments

  1. Hello,

    Thanks for this post. I used your code as the base for a (humorous) political bingo (http://labs.vitorbaptista.com/bingodoze/)

    I’ve added two interesting features: each bingo card has an unique URL (done it with seeding the random function) and the URL also contains info about which cells were marked (encoded this in a 25-byte hex number in the URL).

    The code is messy, but I like the result.

    Thanks again.

    Regards,
    Vitor Baptista.

Comments are closed.