Bingo/Housie Random Number Generator
A random generator that goes with the Bingo/Housie game.
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>
...
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 = 89;
var random = Math.floor(Math.random() * (max - min + 1)) + min;
return random;
},
generateNextRandom: function() {
if (bingo.selectedNumbers.length > 88) {
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;
};
});