var CHEMICAL_ELEMENTS = {
  0: {'background-color': '#F1EEFA',
      'border-color': '#F1EEFA',
      'color': '#F1EEFA',
      'name': 'n/a'},

  H: {'background-color': '#dde',
      'border-color': '#888',
      'color': 'black',
      'name': 'hydrogen'},

  He: {'background-color': '#edd',
      'border-color': '#888',
      'color': 'black',
      'name': 'helium'},
};

var TETRONIMO_TEMPLATES = {
  jBlock: ['xx',
           'x ',
           'x '],
  lBlock: ['xx',
           ' x',
           ' x'],
  square: ['xx',
           'xx'],
  sBlock: ['x ',
           'xx',
           ' x'],
  zBlock: [' x',
           'xx',
           'x '],
  line:   ['x',
           'x',
           'x',
           'x'],
  tBlock: ['xxx',
           ' x ']
};

var processTetronimos = function() {
  var tetraShape = new Object;
  for(var shape in TETRONIMO_TEMPLATES) {
    if( TETRONIMO_TEMPLATES.hasOwnProperty(shape)) {
      tetraShape[shape] = new Array;
      var currentShape = TETRONIMO_TEMPLATES[shape];
      for(var row in currentShape) {
        for(var col in currentShape[row]) {
          if(currentShape[row][col] == 'x') {
            tetraShape[shape].push({x: parseInt(col, 10),
                                    y: parseInt(row, 10)});
          }
        }
      }
    }
  }
  return tetraShape
}

var tetronimoShapes = processTetronimos();

var tetrisBoard = [];

for(var row = 0; row < 20; row++) {
  tetrisBoard[row] = [];
  for(var col = 0; col < 10; col++) {
    tetrisBoard[row][col] = 0;
  }
};

var drawBoard = function() {
  for(var row = 0; row < 20; row++) {
    $('main').append('<section id="row-' + row + '"></section>');
  }
  for(var col = 0; col < 10; col++) {
    $('section').append('<div class="col-' + col + '">0</div>');
  }
};

var updateBoard = function() {
  for(var row = 0; row < 20; row++) {
    for(var col = 0; col < 10; col++) {
      var currentNode = $('#row-' + row + ' .col-' + col);

      currentNode.text(tetrisBoard[row][col]);
      setElementStyles(CHEMICAL_ELEMENTS[tetrisBoard[row][col]], currentNode);
    }
  }
}

var setElementStyles = function(element, htmlNode) {
  for(var prop in element) {
    if(element.hasOwnProperty(prop)) {
      htmlNode.css(prop, element[prop]);
    }
  }
}

var Tetronimo = function(args) {
  this.element = args.element;
  this.blocks = args.blocks;
  this.row = 0;
  this.col = 5;

  for(var block in this.blocks) {
    this.blocks[block].y += this.row;
    this.blocks[block].x += this.col;
  }
}

Tetronimo.prototype.blit = function() {
  for(var block in this.blocks) {
    var currentBlock = this.blocks[block]
    tetrisBoard[currentBlock.y][currentBlock.x] = this.element;
  }
  updateBoard();
}

Tetronimo.prototype.drop = function() {
  this.row++;
  for(var block in this.blocks) {
    this.blocks[block].y++;
  }
  this.blit();
};

$(document).ready(function() {
  drawBoard();
});

@@ -1518,564 +1518,8 @@
 %7D;%0A%0A
-var drawBoard = function() %7B%0A  for(var row = 0; row %3C 20; row++) %7B%0A    $('main').append('%3Csection id=%22row-' + row + '%22%3E%3C/section%3E');%0A  %7D%0A  for(var col = 0; col %3C 10; col++) %7B%0A    $('section').append('%3Cdiv class=%22col-' + col + '%22%3E0%3C/div%3E');%0A  %7D%0A%7D;%0A%0Avar updateBoard = function() %7B%0A  for(var row = 0; row %3C 20; row++) %7B%0A    for(var col = 0; col %3C 10; col++) %7B%0A      var currentNode = $('#row-' + row + ' .col-' + col);%0A%0A      currentNode.text(tetrisBoard%5Brow%5D%5Bcol%5D);%0A      setElementStyles(CHEMICAL_ELEMENTS%5BtetrisBoard%5Brow%5D%5Bcol%5D%5D, currentNode);%0A    %7D%0A  %7D%0A%7D%0A%0A
 var 
@@ -1563,24 +1563,24 @@
 htmlNode) %7B%0A
+
   for(var pr
@@ -2120,25 +2120,8 @@
   %7D%0A
-  updateBoard();%0A
 %7D%0A%0AT
@@ -2258,16 +2258,16 @@
 ();%0A%7D;%0A%0A
+
 $(docume
@@ -2293,23 +2293,8 @@
 ) %7B%0A
-  drawBoard();%0A
 %7D);%0A

Remove html-tag-drawing functions from js