JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<div id="container">
    <textArea id="inputbox" cols=50 rows=5></textArea>
	</div>
	<p id="output">output arrays will be here</p>
	<p id="outputObj">Same with object</p>

JavaScript

var input,		// Global variables
	container,	//
	output;		//

/**
 * Initialzie components
 */
function initDocElements() {
	container = document.getElementById("container");
	input = document.getElementById("inputbox");
	output = document.getElementById("output");
}

/**
 * Creates the letters frequency arrays.
 * Note that every time you click a letter, this is done from scratch.
 * Good side: no need to deal with "backspace"
 * Bad side: efficiency. Didn't try this with huge texts, but you get the point ...
 */
function createArrayMap() {
	var index,					// obvious
		tempChar,				// temp vars for: char 
		tempStr = input.value,	// string
		len = tempStr.length,	// for loop iteration
		arrMapKey	= [],		// our keys
		arrMapValue = [];		// our values

	for (var i = 0 ; i <len ; i++) {

		// These 2 change each iteration
		tempChar = tempStr.charAt(i);
		index = arrMapKey.indexOf(tempChar); 

		// If key exists, increment value
		if ( index > -1) {			
			arrMapValue[index]++;
		}	
		// Otherwise, push to keys array, and push 1 to value array
		else {						
			arrMapKey.push(tempChar);
			arrMapValue.push(1);
		}
	}

	// Some temp output added, instead of cluttering the console, to the 
	// a paragraph beneath the text area.
	output.innerHTML = "array keys:   "+arrMapKey.toString() + 
		"<br/>array values:"+arrMapValue.toString();
}


/**
 * Same as above method, using an object, instead of 2 arrays
 */
function createObject() {
	var index,					// obvious
		tempChar,				// temp vars for: char 
		tempStr = input.value,	// string
		len = tempStr.length,	// for loop iteration
		freqObj = {};			// our frequency object

	for (var i = 0 ; i <len ; i++) {
		tempChar = tempStr.charAt(i);	// temp char value

		if (freqObj.hasOwnProperty(tempChar))
			freqObj[tempChar]++;
		else
			freqObj[tempChar] = 1;
	}

	// Some temp output added, instead of cluttering the console, to the 
	// a paragraph beneath the text area.
	outputObj.innerHTML =...