Diagonal Difference

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="page-header">
    <h1>Diagonal Difference <small>by <a href="https://www.hackerrank.com/vatsalchanana">vatsalchanana</a></small></h1>
  </div>

  <details>
    <summary class="lead">Given a square matrix of size <tt>N * N</tt>, calculate the absolute difference between the sums of its diagonals.</summary>
<div class="panel panel-default">
  <div class="panel-body">

<h2>Input Format</h2>

The first line contains a single integer, <tt>N</tt>. The next <tt>N</tt> lines denote the matrix's rows, with each line containing space-separated integers describing the columns.

<h2>Output Format</h2>

Print the absolute difference between the two sums of the matrix's diagonals as a single integer.

<h2>Sample Input</h2>

<pre>
3
11 2 4
4 5 6
10 8 -12
</pre>

<h2>Sample Output</h2>

<pre>15</pre>

<h2>Explanation</h2>

The primary diagonal is: 
<pre>
11
      5
            -12
</pre>

Sum across the primary diagonal: <pre>11 + 5 - 12 = 4</pre>

The secondary diagonal is:

<pre>
            4
      5
10
</pre>

Sum across the secondary diagonal: <pre>4 + 5 + 10 = 19</pre>
Difference: <pre>|4 - 19| = 15</pre>
      </div>
    </div>
  </details>
  <div class="panel panel-default">
    <div class="panel-body">
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-2 control-label">A Matrix</label>
          <div class="col-sm-10">
            <textarea class="form-control" rows="3">11 2 4
4 5 6
10 8 -12</textarea>
             <span id="textResult" class="help-block"><strong>How to use:</strong> Make a <tt>N * N</tt> matrix, then click elsewhere to see this code run.</span>
          </div>
        </div>
      </form>
    </div>
  </div>
  <p>
  Diagnoal Difference code kata solution by <a href="http://renoirb.com/">Renoir Boulanger</a>
  </p>
</div>

CSS

details.supported > summary small { visibility: visible !important; }
details.supported { cursor: pointer; }

Babel + JSX

"use strict";

/**
 * Diagnoal Difference code kata solution by Renoir Boulanger
 **/

function isValidMatrix(m) {
  return m.every( c => c.length === m.length);
}

function diagonalDifference(matrix) {
    var sum = [0,0]
    if ( isValidMatrix(matrix) === false ) {
        throw new Error('Matrix input is not same length');
    }
    matrix.forEach( (l, i) => {
 
      let p = 0 + i
        , s = (l.length - 1) - i;
        sum[0] += l[p];
        sum[1] += l[s];
    });
    return Math.abs(sum.reduce( (p, c) => { return p - c; }));
}



/** ============ Handling the form of this Fiddle ============ **/



function fieldHandler(evt) {
  let field = evt.target
    , fieldValue = field.value.trim()
    , matrix = []
    , a_i = 0
    , rows = fieldValue.split("\n");
    for(a_i = 0; a_i < rows.length; a_i++){
       matrix[a_i] = rows[a_i].split(' ');
       matrix[a_i] = matrix[a_i].map(Number);
    }
  	validateInput(matrix);
    calculateDifference(matrix);
}

function validateInput(m) {
  let validation = isValidMatrix(m)
    , feedbackBlock = document.querySelector('#textResult')
    , feedbackOutcome = (validation === true) ? 'Valid' : 'Invalid'
    , feedbackClassName = (validation === true) ? 'has-success' : 'has-error'
    , changeClassNode = document.querySelector('form').firstChild.nextSibling;
  feedbackBlock.textContent = `Matrix is in ${feedbackOutcome} size`;
  changeClassNode.className = `form-group ${feedbackClassName}`;
}

function calculateDifference(m) {
	let feedbackBlock = document.querySelector('#textResult')
    , calc = diagonalDifference(m)
    , feedbackOutcome = `, Diagonal difference is ${calc}`;
	feedbackBlock.textContent += feedbackOutcome;
}
document.querySelector('textarea').addEventListener('blur', fieldHandler);



/** ============ Adjusting UI for HTML5 summary ============ **/



(function iife() {
	let detailsNode = document.querySelector('details')
    , summaryText = document.querySelector('details > summary')
    ,...