JSFiddle - React, Tailwind, and code Playground

by simpleorchid

HTML

<h1>
 Create a bingo card
</h1>
<table>
<tr>
  <th width="20%">B</th>
  <th width="20%">I</th>
  <th width="20%">N</th>
  <th width="20%">G</th>
  <th width="20%">O</th>
</tr>
<tr>
  <td id="square0">&nbsp;</td>
  <td id="square5">&nbsp;</td>
  <td id="square10">&nbsp;</td>
  <td id="square15">&nbsp;</td>
  <td id="square20">&nbsp;</td>
</tr>
<tr>
  <td id="square1">&nbsp;</td>
  <td id="square6">&nbsp;</td>
  <td id="square11">&nbsp;</td>
  <td id="square16">&nbsp;</td>
  <td id="square21">&nbsp;</td>
</tr>
<tr>
  <td id="square2">&nbsp;</td>
  <td id="square7">&nbsp;</td>
  <td id="square12">Free</td>
  <td id="square17">&nbsp;</td>
  <td id="square22">&nbsp;</td>
</tr>
<tr>
  <td id="square3">&nbsp;</td>
  <td id="square8">&nbsp;</td>
  <td id="square13">&nbsp;</td>
  <td id="square18">&nbsp;</td>
  <td id="square23">&nbsp;</td>
</tr>
<tr>
  <td id="square4">&nbsp;</td>
  <td id="square9">&nbsp;</td>
  <td id="square14">&nbsp;</td>
  <td id="square19">&nbsp;</td>
  <td id="square24">&nbsp;</td>
</tr>
</table>

<p><button id="clickme"> Reload

</button>
</p>

CSS

body {
  background-color: white;
  color: black;
  font-size: 20 px;
}

h1{
  font-size: 28 px;
}
table {
  border-collapse: collapse;
}
th, td{
  padding: 10 px;
  border: 2px #666 solid;
  text-align: center;
}

JavaScript

var usedNums = new Array(24);

for(var i = 0; i < 25; i++){
		if(i === 12){
    		continue;
    }
    var newNum = Math.floor(Math.random() * 75);
    
    if(checkIfUsed(newNum)){
    		i = i - 1;  // same number so revert i back to -1 so as to repeat the i value again.
    } else {
    		$("#square" + i).text(newNum);    // new number so add it...
        usedNums[i] = newNum;
    }
}
//alert(usedNums);
function checkIfUsed(newNum){   // error here need to check...
		alert(usedNum + " ");
    for(var j = 0 ; j < usedNums.length; j++){
    			alert(usedNum + " " + (usedNum[j] === undefined));
    			if(usedNum[j] === undefined){
          		return false;
          } else {
          			if(usedNums[j] === newNum){
                		return true;
                }
          }
    }
}