JS Ninja #4

by Anupama

HTML

<!doctype html>
<html>
    <head>
        <title>TGIF Contest #3</title>
    </head>
    <body>
        <h3>TGIF Contest #3</h3>
        <hr />
        <label for="rows">Rows: </label><input type="text" id="rows" />
        <label for="columns">Columns: </label><input type="text" id="columns" /><br /><br />
            <label for="startHex">Start Color:&nbsp;&nbsp;#</label><input maxlength="6" type="text" id="startHex" />
            <label for="endHex">End Color:&nbsp;&nbsp;#</label><input maxlength="6" type="text" id="endHex" />
            <input type="button" value="Start" id="start" />
            <hr />
        <div id="tblHolder" class="tableWrapper">
        </div>
        <div class="set">
            <input type="button" value="Reset" disabled="disabled" id="reset" />
        </div>
    </body>
</html>

CSS

body{
    font-family: tahoma;
    color:#333;
}

input[type=text]{
    border-radius:4px;
    border: 1px solid #0087EB;
    box-shadow: inset 1px 1px 10px rgba(50,50,50, 0.2);
}

input[type=text]:focus, input[type=text]:hover{
    outline:none;
    border-color:#EB6400;
}

.tableWrapper{
    min-height: 300px;
}

.set {
    margin: 10px 0;
}

#contentTable {
    border: 2px solid #ccc;
}
#contentTable td {
  padding: 5px;
  border: 2px dotted #A1A1A1;
  cursor: pointer;
}

JavaScript

(function() {
    var rowsElem, colsElem, startColorElem, endColorElem, startBtn, resetBtn;
    var selectedCells = [], selectedCount = 0;
    
    var byId = function(id) {
      return document.getElementById(id);
    };
 
    /* get all element references */
    startBtn = byId("start");
    resetBtn = byId("reset");
    rowsElem = byId("rows");
    colsElem = byId("columns");
    startColorElem = byId("startHex");
    endColorElem = byId("endHex");
    
    var showError = function(message) {
        var tableElem = byId("tblHolder");
        if(tableElem) {
            tableElem.innerHTML = "<div style='color:red;font-weight:bold;'>" + message + "</div>";
        }
    };

    var clearErrors = function() {
        var tableElem = byId("tblHolder");
        if(tableElem) {
            tableElem.innerHTML = "";
        }
    };

    try {
        var validateData  = function(tableData) {
            var validData = true;
            var hexColorRegEx = /(^[0-9A-F]{6}$)|(^[0-9A-F]{3}$)/i;
        
            if(!(tableData.rowCount && tableData.columnCount && tableData.startColor && tableData.endColor)) {
                /* empty data validation */
                showError("Input values are empty");
                validData = false;
            } else if(isNaN(tableData.rowCount) || isNaN(tableData.columnCount)) {
                 /* check row & column counts are numbers */
                showError("Give a number");
                validData = false;
            } else if(!(hexColorRegEx.test(tableData.startColor) && hexColorRegEx.test(tableData.endColor))) {
                /* check for valid hex color values */
                showError("Invalid hex values");
                validData = false;
            } else if(!(parseInt(tableData.startColor, 16) < parseInt(tableData.endColor, 16))) {
                /* check if startColor < endColor */
                showError("Start color is greater than end color");
                validData = false;
           ...