JSFiddle - React, Tailwind, and code Playground

by dixalex

HTML

<div class="rrQuestionContainer">
    <hr>
    <div style="border:1px solid #888; 
     background:#efefef;margin-top:1em;margin-left:2em;margin-right:2em;padding-top:5px;padding:1em;text-align:left; vertical-align:top; color:#000055;font-weight:normal;">
        <center> <span class="mrQuestionText" style=""><b>Staff Information (for all office
        locations)</b></span>

        </center>
    </div><span class="mrQuestionText" style=""><br>
    <br>
    17. A. Indicate the TOTAL number of full time staff your firm has in the following
    positions. DO NOT count a staff member in more than one position. (numeric values
    only, no need for thousands separator)</span>

    <table summary="&lt;hr/&gt;&lt;div style='border:1px solid #888; 
     background:#efefef;margin-top:1em;margin-left:2em;margin-right:2em;padding-top:5px;padding:1em;text-align:left; vertical-align:top; color:#000055;font-weight:normal;'&gt;&lt;center&gt;&lt;b&gt;Staff Information (for all office locations)&lt;/b&gt;&lt;/center&gt;&lt;/div&gt;&lt;br/&gt;&lt;br/&gt;17. A. Indicate the TOTAL number of full time staff your firm has in the following positions. DO NOT count a staff member in more than one position. (numeric values only, no need for thousands separator)&lt;span class='sumcol'&gt;&lt;/span&gt;" class="mrQuestionTable" style="display: inline-block;">
        <tbody>
            <tr>
                <td id="Cell.0.0"></td>
                <td id="Cell.1.0" class="mrGridQuestionText" style=""><span class="mrQuestionText" style=""><span style="clear:none; font-weight:bold; margin:0 
           auto; display:block; text-align:center;
          width:280px;">&nbsp;</span></span>
                </td>
            </tr>
            <tr>
                <td id="Cell.0.1" class="mrGridCategoryText" style=" text-Align: Left; 
 vertical-align: Middle; background-color: #D8D8D8; width: 430px; border-color: 
 black; border-width: 1px; border-left-style: Solid; border-right-style: Solid; 
     ...

CSS

.rowA {
	background-color: #CCF3FF !important;
	height: 30px;
	text-align: center;
	font-size: 17px;
	color: green;
    border: solid 1px black;
}

.complete {
	border: solid 1px green;
    border-left: 5px solid green;
}

.error{
    border: 1px solid red; 
    border-left: 5px solid red;
}

JavaScript

//Code Review 07-19-2015
//Reduce large lines of code by utilizing arrays, each, for, on change and setInterval
//Please ignore rows "B." & "C." as they are not the focus of this exercise.
//-Dynamically Add Input Count - Dixon, Alexander 2015
//Currently 53 lines down from 312. The "for" loop method was not utilized. Original found: https://jsfiddle.net/dixalex/d375u6Ln/
//Copyright: MIT License http://opensource.org/licenses/mit-license.php


var $inputBoxes =  $('#customSum').closest('table').find('tr td:nth-child(2) input[type=text]').not(':last');
$inputBoxes.addClass('rowA');
//or in case the former code was just a test scenario, use var $inputBoxes = $('input.rowA');

var $custSum = $('#customSum'), $chk = $('#topFour').html('<img src="http://www.alexldixon.com/images/checkmark.png">').hide(); //add the check once, but hidden (can be done in hard coded in html instead)

$inputBoxes.on("propertychange input", function(e) { //note: keyup to get the value *after* the keypress is complete  
    SetInput(this);      
    CheckInputs();
});

function SetInput(inputBox){
    var $input = $(inputBox), val = $input.val(), isvalid = val.length > 0 && isFinite(val) && val > -1;
    $input.data('valid', isvalid).data('number', isvalid ? parseInt(val) : null); //instead of an array, reuse the jquery elements    
    $input.toggleClass('complete', isvalid).toggleClass('error', val.length  > 0 && !isvalid);  
}

function SetAllInputs(){
    $inputBoxes.each(function(){SetInput(this);});
    CheckInputs();
}

function CheckInputs(){
    var total = 0, validcount = 0;    
    $inputBoxes.each(function(){
        if($(this).data('valid')){
            validcount++;        
            total+= $(this).data('number');
        }
    });
    $custSum.text(total);
    $chk.toggle(validcount === $inputBoxes.length); //show the 'check' image if all input is valid
}


 SetAllInputs(); //call on page load, in case of pre entered values.

//If you still need a setInterval, you can...