<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Array Work - RJM Programming - September, 2020</title>
<style>
th, tr { text-align: center; }
textarea { width: 90%; }
.code { background-color: yellow; }
.gcode { border: 12px solid darkgreen; }
.bcode { border: 12px solid darkblue; }
.pcode { border: 12px solid olive; }
.ocode { border: 12px solid purple; }
button { border-style: dashed !important; }
</style>
<script type='text/javascript'>

// 1️⃣

var score=0, goes=0;
var clickcnt=0;
var csuff="";

var names=['Blaire', 'Ash', 'Coco', 'Dean', 'Georgia'];
var popElement="";
var shiftElement="";
var lastcol="white";

var ppsucols=['darkgreen','darkblue','olive','purple'];

function doit() {
eval((document.getElementById('workon').innerText || document.getElementById('workon').contentWindow || document.getElementById('workon').contentDocument));
}

function cc(incont) {
var ns="0123456789";
clickcnt++;
csuff=" /" + "/ ";
var ccc='' + clickcnt;
for (var ij=0; ij<ccc.length; ij++) {
csuff+='&#' + eval(48 + eval('' + ns.indexOf(ccc.substring(ij).substring(0,1)))) + ';️⃣';
}
//csuff+='️⃣';
return incont.replace(';', '; ' + csuff);
}

function documentgetElementById(elid, cont) {
var cprefix='', csuffix='';
if (elid != 'workon') {
if (elid.indexOf('push') != -1) {
lastcol=ppsucols[0]; //'lightgreen';
cprefix='<font color=' + lastcol + '>';
csuffix='</font>';
} else if (elid.indexOf('pop') != -1) {
lastcol=ppsucols[1]; //'lightblue';
cprefix='<font color=' + lastcol + '>';
csuffix='</font>';
} else if (elid.indexOf('unshift') != -1) {
lastcol=ppsucols[3]; //'orange';
cprefix='<font color=' + lastcol + '>';
csuffix='</font>';
} else if (elid.indexOf('shift') != -1) {
lastcol=ppsucols[2]; //'pink';
cprefix='<font color=' + lastcol + '>';
csuffix='</font>';
}
} else {
cprefix='<font color=' + lastcol + '>';
csuffix='</font>';
}
if (('' + document.getElementById(elid).outerHTML).indexOf('<textarea') == 0) {
cprefix='';
csuffix='';
if (elid == 'workon') {
document.getElementById(elid).value+=cont;
} else {
document.getElementById(elid).value=cont;
}
} else {
while (cont.indexOf(String.fromCharCode(10)) != -1) {
cont=cont.replace(String.fromCharCode(10), '<br>');
}
if (elid == 'workon') {
document.getElementById(elid).innerHTML+=cprefix + cont + csuffix;
} else {
document.getElementById(elid).innerHTML+=cprefix + cont + csuffix;
}
}
}

function pushit() {
eval(document.getElementById('pushcode').value);
documentgetElementById('pushresult',cc("console.log('// ' + names);" + String.fromCharCode(10) + ('/' + '/ ' + names).replace(/\,/g,', ') + String.fromCharCode(10)));
documentgetElementById('workon',String.fromCharCode(10) + 'names = [' + ("'" + names + "'").replace(/\,/g, "', '") + '];' + csuff);
}

function popit() {
eval(document.getElementById('popcode').value);
documentgetElementById('popresult',cc("console.log('// ' + names);" + String.fromCharCode(10) + ('/' + '/ ' + names).replace(/\,/g,', ') + String.fromCharCode(10) + "console.log('// ' + popElement);" + String.fromCharCode(10) + '/' + '/ ' + popElement + String.fromCharCode(10)));
documentgetElementById('workon',String.fromCharCode(10) + 'names = [' + ("'" + names + "'").replace(/\,/g, "', '") + '];' + csuff);
}

function shiftit() {
eval(document.getElementById('shiftcode').value);
documentgetElementById('shiftresult',cc("console.log('// ' + names);" + String.fromCharCode(10) + ('/' + '/ ' + names).replace(/\,/g,', ') + String.fromCharCode(10) + "console.log('// ' + shiftElement);" + String.fromCharCode(10) + '/' + '/ ' + shiftElement + String.fromCharCode(10)));
documentgetElementById('workon',String.fromCharCode(10) + 'names = [' + ("'" + names + "'").replace(/\,/g, "', '") + '];' + csuff);
}

function unshiftit() {
eval(document.getElementById('unshiftcode').value);
documentgetElementById('unshiftresult',cc("console.log('// ' + names);" + String.fromCharCode(10) + ('/' + '/ ' + names).replace(/\,/g,', ') + String.fromCharCode(10)));
documentgetElementById('workon',String.fromCharCode(10) + 'names = [' + ("'" + names + "'").replace(/\,/g, "', '") + '];' + csuff);
}

</script>
</head>
<body onload=doit();>
<h1>Array Work</h1>
<h3>RJM Programming - September, 2020</h3>
<h4>Thanks to <a target=_blank title='Useful link, thanks' href='//www.positronx.io/javascript-array-push-pop-shift-unshift-methods/'>https://www.positronx.io/javascript-array-push-pop-shift-unshift-methods/</a></h4><br><br>

<table style=width:100%; border=50>
<tr><th colspan=5>
<tr><th>Work on ...</th><th><button class=gcode onclick=pushit();>push</button></th><th><button class=bcode onclick=popit();>pop</button></th><th><button class=pcode onclick=shiftit();>shift</button></th><th><button class=ocode onclick=unshiftit();>unshift</button></th></tr>
<tr><td><div contenteditable=true data-rows=25 id=workon>var names = ['Blaire', 'Ash', 'Coco', 'Dean', 'Georgia']; // 0️⃣</div></td><td><textarea class=gcode id=pushcode>names.push('Annie', 'Li');</textarea><br><div data-rows=15 id=pushresult></div></td><td><textarea class=bcode id=popcode>popElement=names.pop();</textarea><br><div data-rows=15 id=popresult></div></td><td><textarea class=pcode id=shiftcode>shiftElement=names.shift();</textarea><br><div data-rows=15 id=shiftresult></div></td><td><textarea class=ocode id=unshiftcode>names.unshift('Zachary', 'Millicent');</textarea><br><div data-rows=15 id=unshiftresult></div></td></tr>
</table>

</body>
</html>