Week 6, day 6

I've spent today catching up on sleep so no big developments but I thought I would quickly breakdown the process of creating and setting up an HTML/CSS table with the requisite interactivity provided by JQuery and JavaScript.

See the previous blog post for an image of and link to the app whose table I'm referring to, GitHub link to the repo at the top of this post.

My HTML for the table:

  <div class="bowlingTable">
    <table >
      <thead>
        <tr>
          <th colspan="2">Frame 1</th>
          <th colspan="2">Frame 2</th>
          <th colspan="2">Frame 3</th>
          <th colspan="2">Frame 4</th>
          <th colspan="2">Frame 5</th>
          <th colspan="2">Frame 6</th>
          <th colspan="2">Frame 7</th>
          <th colspan="2">Frame 8</th>
          <th colspan="2">Frame 9</th>
          <th colspan="3">Frame 10</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="box1">0</td>
          <td class="box2">0</td>
          <td class="box3">0</td>
          <td class="box4">0</td>
          <td class="box5">0</td>
          <td class="box6">0</td>
          <td class="box7">0</td>
          <td class="box8">0</td>
          <td class="box9">0</td>
          <td class="box10">0</td>
          <td class="box11">0</td>
          <td class="box12">0</td>
          <td class="box13">0</td>
          <td class="box14">0</td>
          <td class="box15">0</td>
          <td class="box16">0</td>
          <td class="box17">0</td>
          <td class="box18">0</td>
          <td class="box19">0</td>
          <td class="box20">0</td>
          <td class="box21">0</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td id="f1score" colspan="2">0</td>
          <td id="f2score" colspan="2">0</td>
          <td id="f3score" colspan="2">0</td>
          <td id="f4score" colspan="2">0</td>
          <td id="f5score" colspan="2">0</td>
          <td id="f6score" colspan="2">0</td>
          <td id="f7score" colspan="2">0</td>
          <td id="f8score" colspan="2">0</td>
          <td id="f9score" colspan="2">0</td>
          <td id="f10score" colspan="3">0</td>
        </tr>
      </tfoot>
    </table>
  </div>

I might have been able to make this more efficient but I didn't get a chance to investigate that possibility. The structure of the table is established here though.

Next I create the JQuery to dynamically insert the correct values, below is the function I call after every roll is registered:

var afterRoll = function(){
  for (var i = 1; i <= 10; i ++){
    $('#f' + i + 'score').text(bowling.cumulativeScore(i));
  };
  for (var i = 1; i <= 21; i ++){
    $('.box' + i).text(bowling.scoresArray[i - 1]);
  };
};

This makes clever use of the iterative i to iterate over HTML elements.

Then comes the CSS:

table {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border-spacing: 0.5em;
    border-collapse: collapse;
}

thead {
    background-color: orange;
    color: white;
}

tbody {
    background-color: lightgrey;
    font-weight: thin;
}

tfoot {
    background-color: lightblue;
}

th, td {
    border: 5px solid white;
    text-align: center;
    padding: 8px;
}

Written on April 25, 2015