Little League Age Selector

by Joshua Salwen

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="pageElement textBlockElement clearfix">
<div class="text clearfix">
<p>
<label>Season: <select id="season">
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
</label>
</p>
<p id="find-age">
<label style="display:block;">
Birthdate:
<input type="date" name="bday" id="bday">
</label>

<input type="button" id="get-age" value="Show Eligibility" />
</p>
</div>

<table id="ll-age-2016" class="ll-age dataTable" data-year="2016" border="1" cellpadding="1" cellspacing="1">
    <thead>
        <tr>
            <th>JAN</th>
            <th>FEB</th>
            <th>MAR</th>
            <th>APR</th>
            <th>MAY</th>
            <th>JUN</th>
            <th>JUL</th>
            <th>AUG</th>
            <th>SEP</th>
            <th>OCT</th>
            <th>NOV</th>
            <th>DEC</th>
            <th>AGE</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2012</td>
            <td>2012</td>
            <td>2012</td>
            <td>2012</td>
            <td>2012</td>
            <td>2012</td>
            <td>2012</td>
            <td>2012</td>
            <td>2011</td>
            <td>2011</td>
            <td>2011</td>
            <td>2011</td>
            <td>4</td>
        </tr>
        <tr>
            <td>2011</td>
            <td>2011</td>
            <td>2011</td>
            <td>2011</td>
            <td>2011</td>
            <td>2011</td>
            <td>2011</td>
            <td>2011</td>
            <td>2010</td>
            <td>2010</td>
            <td>2010</td>
            <td>2010</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2010</td>
            <td>2010</td>
            <td>2010</td>
            <td>2010</td>
            <td>2010</td>
            <td>2010</td>
            <td>2010</td>
           ...

CSS

table.ll-age, div#ll-ineligiable {
  display: none;
}

JavaScript

var $j = jQuery.noConflict();

$j(function() {
  function leadingZero(num) {
    return (num < 10 ? '0' : '') + num;
  }
  // event when season year selector changes
  $j('#season').change(function() {
    // show all the years ages again
    $j('.age-eligible').show();
    // hide the error message
    $j('#ll-ineligible').hide();
  });
  
  $j('#get-age').click(function() {
    var
      now = new Date(),
      birthdate = $j('#bday').val() + 'T' + 
        leadingZero(now.getHours()) + ':' + 
        leadingZero(now.getMinutes()) + ':00',
      date = new Date(birthdate),
      monthCol = date.getMonth() + 1,
      birthYear = date.getYear() + 1900,
      $table = $j('#ll-age-' + $j('#season option:selected').val()),
      // get all the cells in the column
      $monthCells = $table.find('tbody tr td:nth-child(' + monthCol + ')'),
      cellLen = $monthCells.length,
      match = false
    ;

    $monthCells.each(function(index) {
      // match the year in the lookup table
      if ($j(this).text() == birthYear) 
      {
        var
          // find the row
          row = index + 1,
          // get the last value in the row (the age)
          age = $table.find('tbody tr:nth-child(' + row + ') td:last-child').text()
        ;
        // hide all the ages
        $j('.age-eligible').hide()
        // show just the age
        .filter('#ll' + age + '-eligible').show();
        // hide the age tables
        $j('.ll-age').hide();
        match = true;
      }
      if (index === cellLen - 1) {
        if (!match) {
          // hide all the ages
          $j('.age-eligible').hide()
          // show just the age
          .filter('#ll-ineligible').show();
        }
      }
    });
  });
  // run after page loads
  $j(function() {
    var
      // get the current year
      currentYear = (new Date).getFullYear()
    ;
    // select the current year in the Season dropdown
    $j('#season option[value=' + currentYear + ']').attr('selected','selected');
  });
});