Bingo/Housie Random Number Generator

A random generator that goes with the Bingo/Housie game.

by bobbari mahendranath

HTML

<div class="container">
  <div>
    <span>Bingo/Housie Number Generator</span>
  </div>
  <div class="bigNumberDisplay">
    <span>0</span>
  </div>
  <div>
    <input id="btnGenerate" type="button" value="Generate" />
  </div>

  <br/>

  <div class="numbersTable">
    <table>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      ...

CSS

div {
         text-align: center;
       }
       
       .bigNumberDisplay {
         font-size: 6em;
       }
       
       .numbersTable {
         font-size: 1.6em;
       }
       
       table {
         margin-left: auto;
         margin-right: auto;
       }
       
       table,
       tr,
       td {
         border-collapse: collapse;
         border: solid 1px #999;
       }
       
       td {
         min-width: 100px;
         color: #fff;
       }
       
       td.selected {
         color: #f00;
       }

JavaScript

$(function() {
  var bingo = {
    selectedNumbers: [],
    generateRandom: function() {
      var min = 1;
      var max = 90;
      var random = Math.floor(Math.random() * (max - min + 1)) + min;
      return random;
    },
    generateNextRandom: function() {
      if (bingo.selectedNumbers.length > 91) {
        alert("All numbers Exhausted");
        return 0;
      }
      var random = bingo.generateRandom();
      while ($.inArray(random, bingo.selectedNumbers) > -1) {
        random = bingo.generateRandom();
      }
      bingo.selectedNumbers.push(random);
      return random;
    }
  };
  $('td').each(function() {
    var concatClass = this.cellIndex + "" + this.parentNode.rowIndex;
    var numberString = parseInt(concatClass, 10).toString();
    $(this).addClass("cell" + numberString).text(numberString);
  });
  $('#btnGenerate').click(function() {
    var random = bingo.generateNextRandom().toString();
    $('.bigNumberDisplay span').text(random);
    $('td.cell' + random).addClass('selected');
  });
  window.onbeforeunload = function(e) {
    e = e || window.event;
    var returnString = 'Are you sure?';
    if (e) {
      e.returnValue = returnString;
    }
    return returnString;
  };
});