JSFiddle - React, Tailwind, and code Playground

by greghelton

HTML

<body>
This syntax checker is modeled after the apparent functionality of the the programming exercises on codeschool.com in which the student is given precise instructions for writing the required code.  This example requires additional features and it is surely not as good as codeschool's but it does show how case insensitive syntax checking can be implemented for RPG.
<div>
<br/>
Instructions to the student:<br/>
Write a program with a declared main proc named Main.  In the Main proc's PI, declare two parameters named inTele and outAreaCode. Both parameters are CHAR. The first is 12 in length and the second is 3 in length.
<br/><br/>
Declare an unnamed data structure with two sub-fields named Telephone and AreaCode, of 12 and 3 characters respectively.
<br/><br/>
Have the program return without performing any functionality.
<br/><br/>
When finished coding, click the Verify RPG Syntax button.
</div>
<br/>
				<textarea id='pgmArea' rows='20' cols='80'></textarea><br/><br/>
        <input id='button' type='button' value='Verify RPG Syntax'></input><br/><br/>
        <input id='statusLine' type='text' disabled='true' size='80'></input><br/><br/>
        Errors<br/>
        <textArea id='errArea' rows='20' cols='80'></textarea>
</body>

CSS

div {
    padding-left: 2em;
    text-indent: -2em;
}

JavaScript

var rpgProgram = [                           
		"ctl-opt Main(Main);",
		"dcl-proc Main;",
		"   dcl-pi *N extpgm;",
		"      inTele                      CHAR(12);",
		"      outAreaCode                 CHAR(3);",
		"   end-pi;",
		"   dcl-ds *N;",
		"      dcl-subf Telephone char(12);",
		"      dcl-subf AreaCode char(3) overlay(Telephone);",
		"   end-ds;",
		"RETURN;",
		"end-proc;"
];
var rpgRegex = [
		{src: "\ {0,99}ctl-opt\ {1,99}main\\(main\\)\ {0,99};", err: "Error on CTL-OPT"},
		{src: "\ {0,99}dcl-proc\ {1,99}main\ {0,99};", err: "Error on DCL-PROC"},
		{src: "\ {0,99}dcl-pi\ {1,99}\\*n\ {1,99}extpgm\ {0,99};", err: "Error on DCL-PI"},
		{src: "\ {0,99}inTele\ {1,99}CHAR\\(12\\)\ {0,99};", err: "Error on first parameter"},
		{src: "\ {0,99}outareacode\ {1,99}char\\(3\\)\ {0,99};", err: "Error on second parameter"},
		{src: "\ {0,99}END-PI\ {0,99};", err: "Error on END-PI"},
		{src: "\ {0,99}DCL-DS\ {0,99}\\*N\ {0,99};", err: "Error on DCL-DS"},
		{src: "\ {0,99}DCL-subf\ {0,99}Telephone\ {1,99}char\\(12\\)\ {0,99};", err: "Error on TELEPHONE subfield"},
		{src: "\ {0,99}DCL-subf\ {0,99}areacode\ {1,99}char\\(3\\)\ {0,99}overlay\\(telephone\\)\ {0,99};", err: "Error on AREACODE subfield"},
		{src: "\ {0,99}END-DS\ {0,99};", err: "Error on END-DS"},
		{src: "\ {0,99}return\ {0,99};", err: "Error on RETURN"},
		{src: "\ {0,99}end-proc\ {0,99};", err: "Error on END-PROC"}
];
var pgmTextArea = document.getElementById('pgmArea');
var errTextArea = document.getElementById('errArea');
var statusLine = document.getElementById('statusLine');
var button = document.getElementById('button');

for (var j = 0; j < rpgProgram.length; j++) {
	pgmTextArea.value += rpgProgram[j] + '\n';
}

button.onclick = function() {
	errTextArea.value = '';
  var matchArray = [], errorArray = [];
  rpgPgmArray = pgmTextArea.value.split('\n');
	for (var x = 0; x < rpgRegex.length; x++) {
		try {
			var regExpression = new RegExp(rpgRegex[x].src, 'i');
			if...