WORD_COUNTER
The single web page application featured in this tutorial web page substantiates a word counting application which allows the user to input a sequence of text characters and, after the user clicks the SUBMIT button, statistics about that input sequence are displayed as static text inside the DIV element whose id is “output” such as the total number of text characters in the input sequence, the total number of words in the input sequence, and the total number of times each unique word occurs in the input sequence. (Note that uppercase letters are treated as different text characters than their lowercase counterparts).
To view hidden text inside each of the preformatted text boxes below, scroll horizontally.
SOFTWARE_APPLICATION_COMPONENTS
Hyper-Text-Markup-Language_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/word_counter.html
Cascading-Style-Sheet_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/karbytes_aesthetic.css
JavaScript_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/word_counter.js
Hyper-Text-Markup-Language Code
The following Hyper-Text-Markup-Language (HTML) code defines the user interface component of the WORD_COUNTER web page application. Copy the HTML code from the source code file which is linked below into a text editor and save that file as word_counter.html. Use a web browser such as Firefox to open that HTML file (and ensure that the JavaScript and Cascading-Style-Sheet files are in the same file directory as the HTML file).
(Note that angle brackets which resemble HTML tags (i.e. an “is less than” symbol (i.e. ‘<‘) followed by an “is greater than” symbol (i.e. ‘>’)) displayed on this web page have been replaced (at the source code level of this web page) with the Unicode symbols U+003C (which is rendered by the web browser as ‘<‘) and U+003E (which is rendered by the web browser as ‘>’). That is because the WordPress web page editor or web browser interprets a plain-text version of an “is less than” symbol followed by an “is greater than” symbol as being an opening HTML tag (which means that the WordPress web page editor or web browser deletes or fails to display those (plain-text) inequality symbols and the content between those (plain-text) inequality symbols)).
If copy-pasting the following HTML code from the preformatted text box below into a text editor, remove the zero-width space Unicode character (​) which is located between the ‘s’ and the ‘r’ in the script tag(s) which each link to a JavaScript file.
Hyper-Text-Markup-Language_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/word_counter.html
<!--
/**
* file: word_counter.html
* type: Hyper-Text-Markup-Language
* author: karbytes
* date: 10_JULY_2023
* license: PUBLIC_DOMAIN
*/
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WORD_COUNTER</title>
<link rel="stylesheet" href="karbytes_aesthetic.css">
<script src="word_counter.js"></script>
<style>
#S_field {
width: 600px;
border-color: #00ff00;
border-width: 1px;
border-style: solid;
background: #000000;
color: #00ff00;
}
#S_field:hover {
background: #00ff00;
color: #000000;
}
</style>
</head>
<body onload="initialize_page()">
<h1>WORD_COUNTER</h1>
<ol>
<li>
<p>
Enter a sequence of text characters (which will be represented as the
variable named S) into the text field below.
</p>
</li>
<li>
<p>
Click the SUBMIT button to compute the number of times each
unique word occurs in S.
</p>
</li>
<li>
<p>
The application will then display the number of times each unique
word occurs in S with in descending order of unique word frequencies
such that the word with the highest frequency is displayed at the top
of the list and the word with the lowest frequency is displayed at
the bottom of the list.
</p>
</li>
<li>
<p>
Click the RESET button to clear the word counter results from the
display area and to return to the initial web page application state.
</p>
</li>
</ol>
<p class="console" id="S_field_display">S := <input type="textarea" id="S_field"></p>
<p><input type="button" id="submit_button" value="SUBMIT" onclick="submit()"></p>
<p><input type="button" id="reset_button" value="RESET" onclick="initialize_page()"></p>
<div id="output">
<p>
This sentence will disappear in response to the event of a SUBMIT button click.
</p>
</div>
<div class="console" id="time_stamped_messages"><p>???</p></div>
</body>
</html>
Cascading-Style-Sheet Code
The following Cascading-Style-Sheet (CSS) code defines a stylesheet which customizes the appearance of interface components of the WORD_COUNTER web page application. Copy the CSS code from the source code file which is linked below into a text editor and save that file as karbytes_aesthetic.css.
Cascading-Style-Sheet_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/karbytes_aesthetic.css
/**
* file: karbytes_aesthetic.css
* type: Cascading-Style-Sheet
* date: 10_JULY_2023
* author: karbytes
* license: PUBLIC_DOMAIN
*/
/** Make the page background BLACK, the text orange and monospace, and the page content width 800 pixels or less. */
body {
background: #000000;
color: #ff9000;
font-family: monospace;
font-size: 16px;
padding: 10px;
width: 800px;
}
/** Make input elements and select elements have an orange rounded border, a BLACK background, and orange monospace text. */
input, select {
background: #000000;
color: #ff9000;
border-color: #ff9000;
border-width: 1px;
border-style: solid;
border-radius: 5px;
padding: 10px;
appearance: none;
font-family: monospace;
font-size: 16px;
}
/** Invert the text color and background color of INPUT and SELECT elements when the cursor (i.e. mouse) hovers over them. */
input:hover, select:hover {
background: #ff9000;
color: #000000;
}
/** Make table data borders one pixel thick and CYAN. Give table data content 10 pixels in padding on all four sides. */
td {
color: #00ffff;
border-color: #00ffff;
border-width: 1px;
border-style: solid;
padding: 10px;
}
/** Set the text color of elements whose identifier (id) is "output" to CYAN. */
#output {
color: #00ffff;
}
/** Set the text color of elements whose class is "console" to GREEN and make the text background of those elements BLACK. */
.console {
color: #00ff00;
background: #000000;
}
JavaScript Code
The following JavaScript (JS) code defines the functions which control the behavior of the WORD_COUNTER web page application. Copy the JS code from the source code file which is linked below into a text editor and save that file as word_counter.js.
JavaScript_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/word_counter.js
/**
* file: word_counter.js
* type: JavaScript
* date: 10_JULY_2023
* author: karbytes
* license: PUBLIC_DOMAIN
*/
/**
* Get the Number of milliseconds which have elapsed since the Unix Epoch.
*
* The Unix Epoch is 01_JANUARY_1970 at midnight (Coordinated Universal Time (UTC)).
*
* @return {String} message displaying the time at which this function was called.
*/
function generate_time_stamp() {
const milliseconds_elapsed_since_unix_epoch = Date.now();
return milliseconds_elapsed_since_unix_epoch + " milliseconds since midnight on 01_JANUARY_1970.";
}
/**
* Determine whether or not T is a valid word separator token (i.e. delimiter).
*
* If T is not a valid delimiter, then T is assumed to be a character within a word.
*
* A word is a sequence of some natural number of non-delimiter text characters.
*
* @param {String} T is assumed to be exactly one text character (i.e. a String whose length is one).
*
* @return {Boolean} true if T is a valid delimiter; false otherwise.
*/
function is_delimiter(T) {
try {
let D = [' ', '.', ',', '"', '?', '!', ';'], i = 0;
if (arguments.length !== 1) throw "Exactly one function argument is required.";
if (typeof T !== "string") throw "T must be a string type value.";
if (T.length !== 1) throw "T must have a length property whose value is exactly 1.";
for (i = 0; i < D.length; i += 1) if (T === D[i]) return true;
return false;
}
catch(e) {
console.log("An exception to normal functioning occurred during the runtime of is_delimiter(T): " + e);
return false;
}
}
/**
* Create an array whose elements are the words which occur in the input string S.
*
* The first element of the output array is the first word in S.
*
* The last element of the output array is the last word in S.
*
* Each the element of the output array is listed in the same order as its corresponding word occurs in S.
*
* A word is a sequence of some natural number of non-delimiter text characters.
*
* Words are separated by delimiter characters.
*
* If there are only delimiter characters in S, then return an empty array.
*
* @param {String} S is assumed to be a string comprised of some natural number of text characters.
*
* @return {Object} an array of zero or more string type values.
*/
function get_words(S) {
try {
let words_array = [], word = '', i = 0;
if (arguments.length !== 1) throw "Exactly one function argument is required.";
if (typeof S !== "string") throw "S must be a string type value.";
if ((S.length < 1) || (S.length !== Math.floor(S.length))) throw "S must have a length property whose value is a natural number.";
for (i = 0; i < S.length; i += 1) {
if (!is_delimiter(S[i])) word += S[i];
if (is_delimiter(S[i]) && (word.length !== 0)) {
words_array.push(word);
word = '';
}
if ((i === (S.length - 1)) && (word.length !== 0)) words_array.push(word);
}
if (words_array.length === 0) throw "S appears to only contain delimiters. Hence, an empty array is returned.";
return words_array;
}
catch(e) {
console.log("An exception to normal functioning occurred during the runtime of function get_words(S): " + e);
return [];
}
}
/**
* Create an array whose elements are the unique words occurring in the input string S.
*
* The first element of the output array is the first word in S.
*
* If there are only delimiter characters in S, then return an empty array.
*
* Each element of the returned array is unique with respect to every other element of that array.
* In other words, each element of the returned array occurs exactly one time throughout that array.
*
* @param {String} S is assumed to be a string comprised of some natural number text characters.
*
* @return {Object} an array of zero or more string type values.
*/
function get_unique_words(S) {
try {
let all_words_array = [], unique_words_array = [], i = 0, k = 0, duplicate_word_found = false;
if (arguments.length !== 1) throw "Exactly one function argument is required.";
if (typeof S !== "string") throw "S must be a string type value.";
if ((S.length < 1) || (S.length !== Math.floor(S.length))) throw "S must have a length property whose value is a natural number.";
all_words_array = get_words(S);
if (all_words_array.length === 0) throw "S appears to only contain delimiters. Hence, an empty array is returned.";
unique_words_array.push(all_words_array[0]);
for (i = 0; i < all_words_array.length; i += 1) {
for (k = 0; k < unique_words_array.length; k += 1) {
if (all_words_array[i] === unique_words_array[k]) duplicate_word_found = true;
}
if (!duplicate_word_found) unique_words_array.push(all_words_array[i]);
duplicate_word_found = false;
}
return unique_words_array;
}
catch(e) {
console.log("An exception to normal functioning occurred during the runtime of get_unique_words(S): " + e);
return [];
}
}
/**
* Create an array whose elements are objects consisting of the following key-value pairs:
*
* - unique_word: a string representing exactly one element of the array returned by get_unique_words(S).
*
* - unique_word_frequency: a nonnegative integer representing the number of times unique_word occurs as a value in the array returned by get_words(S).
*
* If there are only delimiter characters in S, then return an empty array.
*
* Arrange the output array in descending order in terms of unique_word_frequency values for each of the array elements using the Bubble Sort algorithm.
* In other words, set the first element of the returned array to be the key-value pair associated with the most frequent word which occurs in S.
*
* @param {String} S is assumed to be a string comprised of some natural number of text characters.
*
* @return {Object} an array of zero or more object type values.
*/
function get_unique_word_counts(S) {
try {
let all_words_array = [], unique_words_array = [], unique_words_and_frequencies_array = [], i = 0, k = 0, placeholder = {}, adjacent_elements_were_swapped = false, array_is_sorted = false;
if (arguments.length !== 1) throw "Exactly one argument is required.";
if (typeof S !== "string") throw "S must be a string type value.";
if ((S.length < 1) || (S.length !== Math.floor(S.length))) throw "S must have a length property whose value is a natural number.";
all_words_array = get_words(S);
if (all_words_array.length === 0) throw "S appears to only contain delimiters. Hence, an empty array is returned.";
unique_words_array = get_unique_words(S);
for (i = 0; i < unique_words_array.length; i += 1) unique_words_and_frequencies_array.push({unique_word:unique_words_array[i],unique_word_frequency:0});
for (i = 0; i < unique_words_array.length; i += 1) for (k = 0; k < all_words_array.length; k += 1) if (unique_words_array[i] === all_words_array[k]) unique_words_and_frequencies_array[i].unique_word_frequency += 1;
if (unique_words_and_frequencies_array.length === 1) return unique_words_and_frequencies_array;
while (!array_is_sorted) {
for (i = 1; i < unique_words_and_frequencies_array.length; i += 1) {
if (unique_words_and_frequencies_array[i].unique_word_frequency > unique_words_and_frequencies_array[i - 1].unique_word_frequency) {
placeholder = unique_words_and_frequencies_array[i];
unique_words_and_frequencies_array[i] = unique_words_and_frequencies_array[i - 1];
unique_words_and_frequencies_array[i - 1] = placeholder;
adjacent_elements_were_swapped = true;
}
}
if (!adjacent_elements_were_swapped) array_is_sorted = true;
adjacent_elements_were_swapped = false;
}
return unique_words_and_frequencies_array;
}
catch(e) {
console.log("An exception to normal functioning occurred during the runtime of get_unique_word_counts(S): " + e);
return [];
}
}
/**
* Populate the DIV whose id is "output" with program results:
*
* 1. A read-only copy of S (i.e. the input string).
*
* 2. The total number of characters in S (including delimiters).
*
* 3. The total number of words in S.
*
* 4. A list of each word in S.
*
* 5. The total number of unique words in S.
*
* 6. A list of each unique word in S.
*
* 7. The total number of rows in the table which displays the frequency of each unique word (listed in descending order of frequency).
*
* 8. A table showing the count for each unique word in S.
*/
function print_results() {
try {
let output_div, input_text_field, S_string = '', all_words_array = [], unique_words_array = [], unique_words_and_frequencies_array = [], p0 = ('<' + 'p' + '>'), p1 = ('<' + '/' + 'p' + '>'), p0_green = ('<' + 'p class="console"' + '>'), i = 0;
output_div = document.getElementById("output");
input_text_field = document.getElementById("S_field");
S_string = input_text_field.value;
all_words_array = get_words(S_string);
unique_words_array = get_unique_words(S_string);
unique_words_and_frequencies_array = get_unique_word_counts(S_string);
output_div.innerHTML = (p0 + "WORD COUNTER RESULTS" + p1);
output_div.innerHTML += (p0 + "1. S (input string): " + p1 + p0_green + S_string + p1);
output_div.innerHTML += (p0 + "2. S length: " + S_string.length + " characters total" + p1);
output_div.innerHTML += (p0 + "3. S word count: " + all_words_array.length + " words total" + p1);
output_div.innerHTML += (p0 + "4. All words in S: " + p1);
for (i = 0; i < all_words_array.length; i += 1) output_div.innerHTML += (p0_green + all_words_array[i] + p1);
output_div.innerHTML += (p0 + "5. Number of unique words in S: " + unique_words_array.length + p1);
output_div.innerHTML += (p0 + "6. All unique words in S: " + p1);
for (i = 0; i < unique_words_array.length; i += 1) output_div.innerHTML += (p0_green + unique_words_array[i] + p1);
output_div.innerHTML += (p0 + "7. Number of rows in the table of unique words and their respective frequencies: " + unique_words_and_frequencies_array.length + p1);
for (i = 0; i < unique_words_and_frequencies_array.length; i += 1) output_div.innerHTML += (p0_green + unique_words_and_frequencies_array[i].unique_word + " (" + unique_words_and_frequencies_array[i].unique_word_frequency + ")" + p1);
output_div.innerHTML += (p0 + "END OF WORD COUNTER RESULTS" + p1);
}
catch(e) {
console.log("Runtime exception occurred in function print_results(): " + e);
}
}
/**
* Append a time-stamped message to the bottom of the web page indicating that the RESET button was clicked or that the web page was opened or else refreshed by the web browser.
*
* Clear the input text field (the textarea HTML element whose id is "S_field").
*
* Set the input text field to visible rather than to hidden.
*
* Set the SUBMIT button to visible rather than to hidden.
*
* Set the RESET button to hidden rather than visible.
*
* Set the inner HTML of the DIV element whose id is "output" to some placeholder sentence.
*/
function initialize_page() {
try {
const time_stamped_message = "The initialize_page() function was called at time: " + generate_time_stamp(), p0 = ('<' + 'p' + '>'), p1 = ('<' + '/' + 'p' + '>');
console.log(time_stamped_message);
document.getElementById("time_stamped_messages").innerHTML = p0 + time_stamped_message + p1;
document.getElementById("S_field").value = '';
document.getElementById("S_field_display").style.display = "block";
document.getElementById("submit_button").style.display = "block";
document.getElementById("reset_button").style.display = "none";
document.getElementById("output").innerHTML = (p0 + "This sentence will disappear in response to the event of a SUBMIT button click." + p1);
}
catch(e) {
console.log("An exception to normal functioning occurred during the runtime of function initialize_page(): " + e);
}
}
/**
* Append a time-stamped message to the bottom of the web page indicating that the SUBMIT button was clicked.
*
* Hide the input text field.
*
* Hide the SUBMIT button.
*
* Display the RESET button.
*
* Set the inner HTML of the DIV element whose id is "output" to the word count statistics generated by analyzing input string S.
*/
function submit() {
try {
const time_stamped_message = "The submit() function was called at time: " + generate_time_stamp(), p0 = ('<' + 'p' + '>'), p1 = ('<' + '/' + 'p' + '>');
console.log(time_stamped_message);
document.getElementById("time_stamped_messages").innerHTML += p0 + time_stamped_message + p1;
document.getElementById("S_field_display").style.display = "none";
document.getElementById("submit_button").style.display = "none";
document.getElementById("reset_button").style.display = "block";
print_results();
}
catch(e) {
console.log("Runtime exception occurred in function submit(): " + e);
}
}
WORD_COUNTER Interface (Initial)
The screenshot image below depicts what the WORD_COUNTER web page interface is supposed to look like when the web page is initially loaded by a web browser or after the RESET button is clicked.
WORD_COUNTER Interface (Progress)
The screenshot image below depicts what the WORD_COUNTER web page interface could look like after the user types keyboard characters into the text field.
(Notice that the entire input sequence may not be displayed in the text area whose width is 600 pixels. Scroll horizontally to see hidden text which was entered into the text area).
WORD_COUNTER Interface (Final)
The screenshot image below depicts what the WORD_COUNTER web page interface could look like after the SUBMIT button is clicked.
(Notice that the RESET button appears after the SUBMIT button is clicked while the SUBMIT button is hidden. Clicking the RESET button will reset the web page interface to its initial state).
This web page was last updated on 19_FEBRUARY_2025. The content displayed on this web page is licensed as PUBLIC_DOMAIN intellectual property.