BINGO Caller Board

BINGO caller board

by Scott Currell

HTML

<body>

  <div class="row">
    <!--------------------------- left-hand column -------------------------->
    <div class="column small-12 medium-6">
      
      <div class="row">
        <div class="column">

          <h2>Last number called: <span id="js-last-num" class="last-num">Click to Draw</span></h2>

        </div>

      </div>
      <div class="row">
        <div class="column">

          <p>Draw History</p>
          <ol id="js-history"></ol>

        </div>
        <div class="column">
          
          <input id="js-draw" type="button" value="Draw Number" autofocus>
          <input id="js-reset" class="display-none" type="button" value="Reset">

        </div>
      </div>

    </div>
    <!--------------------------- end left-hand column ---------------------->
    <!--------------------------- right-hand column ------------------------->
    <div class="column small-12 medium-6">

      <table id="bingo">
        <tr>
          <th>B</th>
          <th>I</th>
          <th>N</th>
          <th>G</th>
          <th>O</th>
        </tr>
        <tr>
          <td id="B-1">1</td>
          <td id="I-16">16</td>
          <td id="N-31">31</td>
          <td id="G-46">46</td>
          <td id="O-61">61</td>
        </tr>
        <tr>
          <td id="B-2">2</td>
          <td id="I-17">17</td>
          <td id="N-32">32</td>
          <td id="G-47">47</td>
          <td id="O-62">62</td>
        </tr>
        <tr>
          <td id="B-3">3</td>
          <td id="I-18">18</td>
          <td id="N-33">33</td>
          <td id="G-48">48</td>
          <td id="O-63">63</td>
        </tr>
        <tr>
          <td id="B-4">4</td>
          <td id="I-19">19</td>
          <td id="N-34">34</td>
          <td id="G-49">49</td>
          <td id="O-64">64</td>
        </tr>
        <tr>
          <td id="B-5">5</td>
          <td id="I-20">20</td>
          <td id="N-35">35</td>
          <td id="G-50">50</td>
          <td id="O-65">65</td>
       ...

CSS

/*****************************************************************************
* main
****************************************************************************/
* { box-sizing: border-box; }

body {
   max-width: 960px;
   margin: 0 auto;
}

h2 { white-space: nowrap; }

/*****************************************************************************
* grid
****************************************************************************/
.row {
   position: relative;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 0;
   margin-bottom: 0;
   max-width: 75rem;
}

.row .row {
   /*width: auto;*/
   width: 100%;
   margin-left: -0.9375rem;
   margin-right: -0.9375rem;
   margin-top: 0;
   margin-bottom: 0;
   max-width: none;
}

.row:before, .row:after {
   content: " ";
   display: table;
}

.row:after { clear: both; }

.column, .columns {
   padding-left: 0.9375rem;
   padding-right: 0.9375rem;
   width: 100%;
   float: left;
}

[class*="column"] + [class*="column"]:last-child { float: right; }

[class*="column"] + [class*="column"].end { float: left; }

@media only screen {
   .small-1         { width:       8.3333333333%;  }
   .small-offset-1  { margin-left: 8.3333333333%;  }
   .small-2         { width:       16.6666666667%; }
   .small-offset-2  { margin-left: 16.6666666667%; }
   .small-3         { width:       25%;            }
   .small-offset-3  { margin-left: 25%;            }
   .small-4         { width:       33.3333333333%; }
   .small-offset-4  { margin-left: 33.3333333333%; }
   .small-5         { width:       41.6666666667%; }
   .small-offset-5  { margin-left: 41.6666666667%; }
   .small-6         { width:       50%;            }
   .small-offset-6  { margin-left: 50%;            }
   .small-7         { width:       58.3333333333%; }
   .small-offset-7  { margin-left: 58.3333333333%; }
   .small-8         { width:       66.6666666667%; }
   .small-offset-8  { margin-left: 66.6666666667%; }
   .small-9         { width:      ...

JavaScript

/*****************************************************************************
 * BINGO GAME REFACTOR
 * 
 * Description:
 * - Randomly draw, store, and display bingo balls.
 *
 * JS Dependencies:
 * - None. Vanilla JS.
 *
 * DOM Dependencies:
 * - .js-draw     : draw button
 * - .js-reset    : reset button
 * - .js-history  : <ol> drawn balls
 * - .js-last-num : <span> last drawn ball
 *
 * @var {Object} BINGO - Global namespace.
 *
 * @author Scott Currell
 ****************************************************************************/

var BINGO = BINGO || {};

BINGO.ballCount   = 75;
BINGO.ballsArr    = [];

BINGO.domElems = {
    drawButton  : document.getElementById( 'js-draw' ),
    resetButton : document.getElementById( 'js-reset' ),
    drawHistory : document.getElementById( 'js-history' ),
    drawnLast   : document.getElementById( 'js-last-num' )
};

/******************************************************************************
 * CREATE BALLS
 * Populates ballsArr[] with 75 balls ranging from B-1 to O-75.
 *****************************************************************************/
BINGO.createBalls = function() {

    for ( let i = this.ballCount; i >= 1; i--) {

        if ( i >= 1  && i <= 15 ) this.ballsArr.push( 'B-' + i );
        if ( i >= 16 && i <= 30 ) this.ballsArr.push( 'I-' + i );
        if ( i >= 31 && i <= 45 ) this.ballsArr.push( 'N-' + i );
        if ( i >= 46 && i <= 60 ) this.ballsArr.push( 'G-' + i );
        if ( i >= 61 && i <= 75 ) this.ballsArr.push( 'O-' + i );

    }

};

/******************************************************************************
 * INITIALIZER ( IIFE )
 * Kicks things off.
 *****************************************************************************/
(BINGO.init = function() {

    let _this = BINGO;

    _this.ballCount = 75;

    _this.createBalls();

})();

/******************************************************************************
 * POP BALL
 * Receives a randomized ball number and removes...