BASE_CONVERTER
The single web page application featured in this tutorial web page converts an INPUT_SEQUENCE (i.e. an unsigned integer consisting of no more than eight digits) whose base is INPUT_BASE to its equivalent representation as an unsigned integer whose base is OUTPUT_BASE.
(The base conversion process used by this application is a more general version of the process used to convert unsigned integers from base-two to base-ten in the BITS_AND_BYTES tutorial web page of this website).
To view hidden text inside each of the preformatted text boxes below, scroll horizontally.
OUTPUT_SEQUENCE := CONVERT(INPUT_SEQUENCE, INPUT_BASE, OUTPUT_BASE). // First the base conversion process converts INPUT_SEQUENCE to its equivalent value in base-ten. Then that base-ten value is converted to its equivalent value in OUTPUT_BASE.
SOFTWARE_APPLICATION_COMPONENTS
Hyper-Text-Markup-Language_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/base_converter.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_packk/main/base_converter_interface.js
JavaScript_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/base_converter_arithmetic.js
JavaScript_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/time_stamp.js
Hyper-Text-Markup-Language Code
The following Hyper-Text-Markup-Language (HTML) code defines the user interface component of the BASE_CONVERTER 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 base_converter.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 the contents of the HTML file are not displayed in a preformatted text box on this web page due to the fact that the WordPress server makes no distinction between HTML code which is encapsulated inside of a preformatted text box and WordPress web page source code.
Hyper-Text-Markup-Language_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/base_converter.html
Cascading-Style-Sheet Code
The following Cascading-Style-Sheet (CSS) code defines a stylesheet which customizes the appearance of interface components of the BASE_CONVERTER 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 functions which control the behavior of the user interface component of the BASE_CONVERTER 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 base_converter_interface.js.
JavaScript_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/base_converter_interface.js
/**
* file: base_converter_interface.js
* type: JavaScript
* date: 10_JULY_2023
* author: karbytes
* license: PUBLIC_DOMAIN
*/
/**
* Make a particular HTML element on the web page whose source code file is base_converter.html invisible (without deleting that element).
*
* @param {String} element_id is assumed to be the id value of an existing HTML element on the web whose source code file is base_converter.html.
*/
function hide_page_element(element_id) {
try {
let web_page_element;
if (arguments.length !== 1) throw "exactly one function argument is required.";
if (typeof element_id !== "string") throw "element_id is required to be a String type value.";
if (element_id.length < 1) throw "element_id is required to be a non-empty string.";
web_page_element = document.getElementById(element_id);
web_page_element.style.display = "none";
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of hide_page_element(element_id): " + exception);
}
}
/**
* Make a particular HTML element on the web page defined by base_converter.html visible rather than hidden.
*
* @param {String} element_id is assumed to be the id value of an existing HTML element on the web page whos source code file is base_converter.html.
*/
function unhide_page_element(element_id) {
try {
let web_page_element;
if (arguments.length !== 1) throw "exactly one function argument is required.";
if (typeof element_id !== "string") throw "element_id is required to be a String type value.";
if (element_id.length < 1) throw "element_id is required to be a non-empty string.";
web_page_element = document.getElementById(element_id);
web_page_element.style.display = "block";
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of unhide_page_element(element_id): " + exception);
}
}
/**
* Generate the name of a particular numeric base in the following format: "[base_name] (base-[base_number])".
*
* @param {Number} cardinality_of_base is assumed to be a base-ten integer which is no smaller than two and no larger than sixteen.
*
* @return {String} the inner HTML component of an option for a base select menu; undefined if an exception to normal functioning occurs.
*/
function get_numeric_base_option_label(cardinality_of_base) {
try {
if (arguments.length !== 1) throw "exactly one function argument is required.";
if (typeof cardinality_of_base !== "number") throw "cardinality_of_base is required to be a Number type value.";
if (cardinality_of_base !== Math.floor(cardinality_of_base)) throw "cardinality_of_base is required to be a whole number.";
if ((cardinality_of_base < 2) || (cardinality_of_base > 16)) throw "cardinality_of_base is required to be no smaller than two and no larger than sixteen.";
if (cardinality_of_base === 2) return "BINARY (base-2)";
if (cardinality_of_base === 3) return "TERNARY (base-3)";
if (cardinality_of_base === 4) return "QUATERNARY (base-4)";
if (cardinality_of_base === 5) return "QUINARY (base-5)";
if (cardinality_of_base === 6) return "SENARY (base-6)";
if (cardinality_of_base === 7) return "SEPTENARY (base-7)";
if (cardinality_of_base === 8) return "OCTAL (base-8)";
if (cardinality_of_base === 9) return "NONARY (base-9)";
if (cardinality_of_base === 10) return "DECIMAL (base-10)";
if (cardinality_of_base === 11) return "UNDECIMAL (base-11)";
if (cardinality_of_base === 12) return "DUODECIMAL (base-12)";
if (cardinality_of_base === 13) return "TRIDECIMAL (base-13)";
if (cardinality_of_base === 14) return "TETRADECIMAL (base-14)";
if (cardinality_of_base === 15) return "PENTADECIMAL (base-15)";
if (cardinality_of_base === 16) return "HEXIDECIMAL (base-16)";
if (true) throw "some unexpected runtime error occurred.";
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of get_numeric_base_option_label(cardinality_of_base): " + exception);
return undefined;
}
}
/**
* Define a select element whose options are the following natural number bases:
* 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16.
*
* Note that the option whose value is "2" is set to be automatically selected if the application user does not click on the select menu.
*
* @param {String} select_id is assumed to be the id of an existing select HTML element on the corresponding web page.
*
* @return {String} an HTML string which is used to instantiate a select element whose options are the following natural number bases:
* 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16;
* undefined if an exception to normal functioning occurs.
*/
function generate_html_string_for_base_select_menu(select_id) {
try {
let html_string = "", option_value = 0;
if (arguments.length !== 1) throw "exactly one function argument is required.";
if (typeof select_id !== "string") throw "select_id is required to be a String type value.";
if (select_id.length < 1) throw "select_id is required to be a non-empty string.";
html_string += '<' + 'select id="' + select_id + '"' + '>';
html_string += '<' + 'option value="2" selected' + '>' + get_numeric_base_option_label(2) + '<' + '/' + 'option' + '>';
for (option_value = 3; option_value <= 16; option_value += 1) html_string += '<' + 'option value="' + option_value + '"' + '>' + get_numeric_base_option_label(option_value) + '<' + '/' + 'option' + '>';
html_string += '<' + '/' + 'select' + '>';
return html_string;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of generate_html_string_for_base_select_menu(select_id): " + exception);
return undefined;
}
}
/**
* Return the value of the selected menu option of a select menu element.
*
* @param {String} select_menu_identifier is assumed to be the id of an existing select HTML element on the corresponding web page.
*
* @return {String} the value of the selected menu option; undefined if an exception to normal functioning occurs.
*/
function get_selected_menu_option_value(select_menu_identifier) {
try {
let menu_object = {}, options_array = [], selected_option_index = 0, selected_option_object = {}, selected_option_value;
menu_object = document.getElementById(select_menu_identifier);
options_array = menu_object.options;
selected_option_index = menu_object.selectedIndex;
selected_option_object = options_array[selected_option_index];
selected_option_value = selected_option_object.value
return selected_option_value;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of get_selected_menu_option(select_menu_identifier): " + exception);
return undefined;
}
}
/**
* Generate the digit key buttons which are used to enter digits whose base is cardinality_of_base.
*
* For example, if cardinality_of_base is 16, then all sixteen digit key buttons will be generated.
*
* By contrast, if cardinality_of_base is 10, then only the first ten of sixteen digit key buttons will be generated.
*
* The digit key buttons are arranged vertically in descending order (where each digit button is encapsulated inside of its own paragraph element).
*
* @param {Number} cardinality_of_base is assumed to be a base-ten integer which is no smaller than two and no larger than sixteen.
*
* @return {String} the HTML string which is used to substantiate the content of the div element whose id is "input_sequence_digit_keys_div";
* undefined if an exception to normal functioning occurs.
*/
function generate_html_string_for_input_sequence_digit_buttons(cardinality_of_base) {
try {
let html_string = "", p0 = '<' + 'p' + '>', p1 = '<' + '/' + 'p' + '>', i = 0, hexidecimal_digit_set = "0123456789ABCDEF";
if (arguments.length !== 1) throw "exactly one function argument is required.";
if (typeof cardinality_of_base !== "number") throw "cardinality_of_base is required to be a Number type value.";
if (cardinality_of_base !== Math.floor(cardinality_of_base)) throw "cardinality_of_base is required to be a whole number.";
if ((cardinality_of_base < 2) || (cardinality_of_base > 16)) throw "cardinality_of_base is required to be no smaller than two and no larger than sixteen.";
for (i = 0; i < cardinality_of_base; i += 1) html_string += p0 + '<' + 'input type="button" value="' + hexidecimal_digit_set[i] + '" onclick="append_digit_' + hexidecimal_digit_set[i] + '()"' + '>' + p1;
return html_string;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of generate_html_string_for_input_sequence_digit_buttons(cardinality_of_base): " + exception);
return undefined;
}
}
/**
* Determine whether or not hexidecimal_digit is an element of the following set:
* ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F' ].
*
* @param {String} hexidecimal_digit is assumed to be an element of the following set:
* ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F' ].
*
* @return {Boolean} true if hexidecimal is a valid hexidecimal digit as defined above; false otherwise.
*/
function is_valid_hexidecimal_digit(hexidecimal_digit) {
try {
let i = 0, hexidecimal_digit_set = "0123456789ABCDEF";
if (arguments.length !== 1) throw "exactly one function argument is required.";
if (typeof hexidecimal_digit !== "string") throw "hexidecimal_digit is required to be a String type value.";
if (hexidecimal_digit.length !== 1) throw "hexidecimal_digit is required to have a length of exactly one character.";
for (i = 0; i < 16; i += 1) if (hexidecimal_digit === hexidecimal_digit_set[i]) return true;
return false;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of is_valid_hexidecimal_digit(hexidecimal_digit): " + exception);
return false;
}
}
/**
* Remove the leftmost character from the inner HTML string of the span HTML element whose id is "input_sequence_span".
*
* Append hexidecimal_digit to right end of that string (such that the total number of characters enclosed by the input sequence span is always eight).
*
* @param {String} hexidecimal_digit is assumed to be an element of the following set:
* ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F' ].
*/
function append_digit(hexidecimal_digit) {
try {
let i = 0, input_sequence_span, old_input_sequence = "", new_input_sequence = "";
if (!is_valid_hexidecimal_digit(hexidecimal_digit)) throw "hexidecimal_digit is required to be an element of the following set: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F' ].";
input_sequence_span = document.getElementById("input_sequence_span");
old_input_sequence = input_sequence_span.innerHTML;
for (i = 1; i < 8; i += 1) new_input_sequence += old_input_sequence[i];
new_input_sequence += hexidecimal_digit;
input_sequence_span.innerHTML = new_input_sequence;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of append_digit_1(): " + exception);
}
}
/**
* Remove the leftmost character from the inner HTML string of the span HTML element whose id is "input_sequence_span".
*
* Append '0' to right end of that string (such that the total number of characters enclosed by the input sequence span is always eight).
*/
function append_digit_0() {
append_digit('0');
}
/**
* Remove the leftmost character from the inner HTML string of the span HTML element whose id is "input_sequence_span".
*
* Append '1' to right end of that string (such that the total number of characters enclosed by the input sequence span is always eight).
*/
function append_digit_1() {
append_digit('1');
}
/**
* Remove the leftmost character from the inner HTML string of the span HTML element whose id is "input_sequence_span".
*
* Append '2' to right end of that string (such that the total number of characters enclosed by the input sequence span is always eight).
*/
function append_digit_2() {
append_digit('2');
}
/**
* Remove the leftmost character from the inner HTML string of the span HTML element whose id is "input_sequence_span".
*
* Append '3' to right end of that string (such that the total number of characters enclosed by the input sequence span is always eight).
*/
function append_digit_3() {
append_digit('3');
}
/**
* Remove the leftmost character from the inner HTML string of the span HTML element whose id is "input_sequence_span".
*
* Append '4' to right end of that string (such that the total number of characters enclosed by the input sequence span is always eight).
*/
function append_digit_4() {
append_digit('4');
}
/**
* Remove the leftmost character from the inner HTML string of the span HTML element whose id is "input_sequence_span".
*
* Append '5' to right end of that string (such that the total number of characters enclosed by the input sequence span is always eight).
*/
function append_digit_5() {
append_digit('5');
}
/**
* Remove the leftmost character from the inner HTML string of the span HTML element whose id is "input_sequence_span".
*
* Append '6' to right end of that string (such that the total number of characters enclosed by the input sequence span is always eight).
*/
function append_digit_6() {
append_digit('6');
}
/**
* Remove the leftmost character from the inner HTML string of the span HTML element whose id is "input_sequence_span".
*
* Append '7' to right end of that string (such that the total number of characters enclosed by the input sequence span is always eight).
*/
function append_digit_7() {
append_digit('7');
}
/**
* Remove the leftmost character from the inner HTML string of the span HTML element whose id is "input_sequence_span".
*
* Append '8' to right end of that string (such that the total number of characters enclosed by the input sequence span is always eight).
*/
function append_digit_8() {
append_digit('8');
}
/**
* Remove the leftmost character from the inner HTML string of the span HTML element whose id is "input_sequence_span".
*
* Append '9' to right end of that string (such that the total number of characters enclosed by the input sequence span is always eight).
*/
function append_digit_9() {
append_digit('9');
}
/**
* Remove the leftmost character from the inner HTML string of the span HTML element whose id is "input_sequence_span".
*
* Append 'A' to right end of that string (such that the total number of characters enclosed by the input sequence span is always eight).
*/
function append_digit_A() {
append_digit('A');
}
/**
* Remove the leftmost character from the inner HTML string of the span HTML element whose id is "input_sequence_span".
*
* Append 'B' to right end of that string (such that the total number of characters enclosed by the input sequence span is always eight).
*/
function append_digit_B() {
append_digit('B');
}
/**
* Remove the leftmost character from the inner HTML string of the span HTML element whose id is "input_sequence_span".
*
* Append 'C' to right end of that string (such that the total number of characters enclosed by the input sequence span is always eight).
*/
function append_digit_C() {
append_digit('C');
}
/**
* Remove the leftmost character from the inner HTML string of the span HTML element whose id is "input_sequence_span".
*
* Append 'D' to right end of that string (such that the total number of characters enclosed by the input sequence span is always eight).
*/
function append_digit_D() {
append_digit('D');
}
/**
* Remove the leftmost character from the inner HTML string of the span HTML element whose id is "input_sequence_span".
*
* Append 'E' to right end of that string (such that the total number of characters enclosed by the input sequence span is always eight).
*/
function append_digit_E() {
append_digit('E');
}
/**
* Remove the leftmost character from the inner HTML string of the span HTML element whose id is "input_sequence_span".
*
* Append 'F' to right end of that string (such that the total number of characters enclosed by the input sequence span is always eight).
*/
function append_digit_F() {
append_digit('F');
}
/**
* Set the content displayed inside of the span HTML element whose id is "input_sequence_span" to "00000000".
*/
function initialize_input_sequence_span() {
try {
document.getElementById("input_sequence_span").innerHTML = "00000000";
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of initialize_input_sequence_span(): " + exception);
}
}
/**
* Set the inner HTML of the span element whose id is "input_sequence_span_2" and
* "input_sequence_span_3" to the inner HTML of the span element whose id is "input_sequence_span".
*/
function update_input_sequence_span() {
try {
let input_sequence_span, input_sequence_span_2, input_sequence_span_3;
input_sequence_span = document.getElementById("input_sequence_span");
input_sequence_span_2 = document.getElementById("input_sequence_span_2");
input_sequence_span_3 = document.getElementById("input_sequence_span_3");
input_sequence_span_2.innerHTML = input_sequence_span.innerHTML;
input_sequence_span_3.innerHTML = input_sequence_span.innerHTML;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of update_input_sequence_span_2(): " + exception);
}
}
/**
* Set the content displayed inside of
* the span element whose id is "input_base_span",
* the span element whose id is "input_base_span_2", and
* the span element whose id is "input_base_span_3" to the
* input base option which is currently selected from the list of options
* displayed inside the select HTML element whose id is "input_base_menu".
*/
function update_input_base_span() {
try {
let input_base_value = 0, input_base_span, input_base_span_2, input_base_span_3;
input_base_span = document.getElementById("input_base_span");
input_base_span_2 = document.getElementById("input_base_span_2");
input_base_span_3 = document.getElementById("input_base_span_3");
input_base_value = get_selected_menu_option_value("input_base_menu");
input_base_span.innerHTML = input_base_value;
input_base_span_2.innerHTML = input_base_value;
input_base_span_3.innerHTML = input_base_value;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of update_input_base_span(): " + exception);
}
}
/**
* Set the content displayed inside of the HTML element whose id is "digit_buttons_div"
* to display the digit buttons which correspond with the input base option
* which is currently selected from the list of options displayed inside the select HTML element whose id is "input_base_menu".
*/
function update_digit_buttons_div() {
try {
let input_base_value = 0, digit_buttons_div, digit_buttons_for_selected_base;
digit_buttons_div = document.getElementById("digit_buttons_div");
input_base_value = parseInt(get_selected_menu_option_value("input_base_menu"));
digit_buttons_for_selected_base = generate_html_string_for_input_sequence_digit_buttons(input_base_value);
digit_buttons_div.innerHTML = digit_buttons_for_selected_base;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of update_input_base_span(): " + exception);
}
}
/**
* Set the content displayed inside of the span element whose id is "output_base_span_2"
* to the output base option which is currently selected from the list of options displayed
* inside the select HTML element whose id is "output_base_menu".
*/
function update_output_base_span_2() {
try {
let output_base_value = 0, output_base_span_2;
output_base_span_2 = document.getElementById("output_base_span_2");
output_base_value = get_selected_menu_option_value("output_base_menu");
output_base_span_2.innerHTML = output_base_value;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of update_output_base_span_2(): " + exception);
}
}
/**
* Progress from STEP_0 to STEP_1 of the base converter application's input form (which is substantiated using the web page file named base_converter.html).
*
* Assume that this function is called in response to the event of a button click of the NEXT button displayed inside of the div whose id is "step_0_div".
*
* Submit the input base option which is currently selected from the list of options displayed inside the select HTML element whose id is "input_base_menu".
*
* Display the digit buttons which correspond with the selected input base in the next step.
*
* Append a time stamped message to the bottom of the web page indicating that this function was called.
*/
function step_0_next() {
const time_stamp = generate_time_stamp(), p0 = '<' + 'p' + '>', p1 = '<' + '/' + 'p' + '>';
let message = "step_0_next() was called at time: " + time_stamp;
console.log(message);
document.getElementById("time_stamped_messages").innerHTML += p0 + message + p1;
update_input_base_span();
update_digit_buttons_div();
hide_page_element("step_0_div");
unhide_page_element("step_1_div");
}
/**
* Regress from STEP_1 to STEP_0 of the base converter application's input form (which is substantiated using the web page file named base_converter.html).
*
* Assume that this function is called in response to the event of a button click of the BACK button displayed inside of the div whose id is "step_1_div".
*
* Reset the text displayed inside of the span element whose id is "input_sequence_span" to its initial state: 00000000.
*
* Append a time stamped message to the bottom of the web page indicating that this function was called.
*/
function step_1_back() {
const time_stamp = generate_time_stamp(), p0 = '<' + 'p' + '>', p1 = '<' + '/' + 'p' + '>';
let message = "step_1_back() was called at time: " + time_stamp;
console.log(message);
document.getElementById("time_stamped_messages").innerHTML += p0 + message + p1;
initialize_input_sequence_span();
hide_page_element("step_1_div");
unhide_page_element("step_0_div");
}
/**
* Progress from STEP_1 to STEP_2 of the base converter application's input form (which is substantiated using the web page file named base_converter.html).
*
* Assume that this function is called in response to the event of a button click of the NEXT button displayed inside of the div whose id is "step_1_div".
*
* Update the input base and input sequence displays inside of the STEP_2 div.
*
* Append a time stamped message to the bottom of the web page indicating that this function was called.
*/
function step_1_next() {
const time_stamp = generate_time_stamp(), p0 = '<' + 'p' + '>', p1 = '<' + '/' + 'p' + '>';
let message = "step_1_next() was called at time: " + time_stamp;
console.log(message);
document.getElementById("time_stamped_messages").innerHTML += p0 + message + p1;
update_input_sequence_span();
hide_page_element("step_1_div");
unhide_page_element("step_2_div");
}
/**
* Regress from STEP_2 to STEP_1 of the base converter application's input form (which is substantiated using the web page file named base_converter.html).
*
* Assume that this function is called in response to the event of a button click of the BACK button displayed inside of the div whose id is "step_2_div".
*
* Append a time stamped message to the bottom of the web page indicating that this function was called.
*/
function step_2_back() {
const time_stamp = generate_time_stamp(), p0 = '<' + 'p' + '>', p1 = '<' + '/' + 'p' + '>';
let message = "step_2_back() was called at time: " + time_stamp;
console.log(message);
document.getElementById("time_stamped_messages").innerHTML += p0 + message + p1;
initialize_input_sequence_span();
hide_page_element("step_2_div");
unhide_page_element("step_1_div");
}
/**
* Progress from STEP_2 to STEP_3 of the base converter application's input form (which is substantiated using the web page file named base_converter.html).
*
* Assume that this function is called in response to the event of a button click of the NEXT button displayed inside of the div whose id is "step_2_div".
*
* Submit the output base option which is currently selected from the list of options displayed inside the select HTML element whose id is "input_base_menu".
*
* Update the input_base, input_sequence, and output_base values which are displayed inside the STEP_3 div.
*
* Append a time stamped message to the bottom of the web page indicating that this function was called.
*/
function step_2_next() {
const time_stamp = generate_time_stamp(), p0 = '<' + 'p' + '>', p1 = '<' + '/' + 'p' + '>';
let message = "step_2_next() was called at time: " + time_stamp;
console.log(message);
document.getElementById("time_stamped_messages").innerHTML += p0 + message + p1;
update_output_base_span_2();
hide_page_element("step_2_div");
unhide_page_element("step_3_div");
}
/**
* Regress from STEP_3 to STEP_2 of the base converter application's input form (which is substantiated using the web page file named base_converter.html).
*
* Assume that this function is called in response to the event of a button click of the BACK button displayed inside of the div whose id is "step_3_div".
*
* Reset the text displayed inside of the div element whose id is "output" to its initial state: "This sentence will be replaced with base conversion results when the CONVERT button is clicked."
*
* Append a time stamped message to the bottom of the web page indicating that this function was called.
*/
function step_3_back() {
const time_stamp = generate_time_stamp(), p0 = '<' + 'p' + '>', p1 = '<' + '/' + 'p' + '>';
let message = "step_3_back() was called at time: " + time_stamp;
console.log(message);
document.getElementById("time_stamped_messages").innerHTML += p0 + message + p1;
initialize_output_div();
hide_page_element("step_3_div");
unhide_page_element("step_2_div");
}
/**
* Define the application interface component (to be displayed on the web page whose source code file is base_converter.html)
* which enables the user to select an INPUT_BASE.
*
* @return {String} an HTML string which is used to instantiate a DIV page element whose id is "step_0_div".
*/
function generate_html_string_for_step_0_div() {
let html_string = '<' + 'div class="module input_step" id="step_0_div"' + '>', p0 = '<' + 'p' + '>', p1 ='<' + '/' + 'p' + '>';
html_string += p0 + "STEP_0: Select an INPUT_BASE from the expandable menu. Then click the NEXT button to proceed to the INPUT_SEQUENCE step." + p1;
html_string += p0 + "INPUT_BASE := " + generate_html_string_for_base_select_menu("input_base_menu") + p1;
html_string += p0 + '<' + 'input type="button" value="NEXT" onclick="step_0_next()"' + '>';
html_string += '<' + '/' + 'div' + '>';
return html_string;
}
/**
* Define the application interface component (to be displayed on the web page whose source code file is base_converter.html)
* which enables the user to enter an INPUT_SEQUENCE.
*
* @return {String} an HTML string which is used to instantiate a DIV page element whose id is "step_1_div".
*/
function generate_html_string_for_step_1_div() {
let html_string = '<' + 'div class="module input_step" id="step_1_div"' + '>', p0 = '<' + 'p' + '>', p1 = '<' + '/' + 'p' + '>', input_sequence_span;
input_base_value = get_selected_menu_option_value("input_base_menu");
html_string += p0 + "STEP_1: Use the digit keys to enter no more than eight digits. Then click the NEXT button to proceed to the INPUT_SEQUENCE step. To re-select the INPUT_BASE, click the BACK button." + p1;
html_string += p0 + "INPUT_BASE := " + '<' + 'span style="background:#000000;color:#ffff00" id="input_base_span"' + '>' + input_base_value + '<' + '/' + 'span' + '>' + p1;
html_string += p0 + "INPUT_SEQUENCE := " + '<' + 'span style="background:#000000;color:#ffff00" id="input_sequence_span"' + '>' + "00000000" + '<' + '/' + 'span' + '>' + p1;
html_string += '<' + 'div id="digit_buttons_div"' + '>' + generate_html_string_for_input_sequence_digit_buttons(parseInt(input_base_value)) + '<' + '/' + 'div' + '>';
html_string += p0 + '<' + 'input type="button" value="BACK" onclick="step_1_back()"' + '>';
html_string += " " + '<' + 'input type="button" value="NEXT" onclick="step_1_next()"' + '>' + p1;
html_string += '<' + '/' + 'div' + '>';
return html_string;
}
/**
* Define the application interface component (to be displayed on the web page whose source code file is base_converter.html)
* which enables the user to review input values before initiating the base conversion.
*
* @return {String} an HTML string which is used to instantiate a DIV page element whose id is "step_2_div".
*/
function generate_html_string_for_step_2_div() {
let html_string = '<' + 'div class="module input_step" id="step_2_div"' + '>', p0 = '<' + 'p' + '>', p1 ='<' + '/' + 'p' + '>';
html_string += p0 + "STEP_2: Select an OUTPUT_BASE from the expandable menu. Then click the NEXT button to proceed to the BASE_CONVERSION step. To re-enter the INPUT_SEQUENCE, click the BACK button." + p1;
html_string += p0 + "INPUT_BASE := " + '<' + 'span style="background:#000000;color:#ffff00" id="input_base_span_2"' + '>' + "???" + '<' + '/' + 'span' + '>' + p1;
html_string += p0 + "INPUT_SEQUENCE := " + '<' + 'span style="background:#000000;color:#ffff00" id="input_sequence_span_2"' + '>' + "???" + '<' + '/' + 'span' + '>' + p1;
html_string += p0 + "OUTPUT_BASE := " + '<' + 'span style="background:#000000;color:#ffff00" id="output_base_span"' + '>' + generate_html_string_for_base_select_menu("output_base_menu") + '<' + '/' + 'span' + '>' + p1;
html_string += p0 + '<' + 'input type="button" value="BACK" onclick="step_2_back()"' + '>';
html_string += " " + '<' + 'input type="button" value="NEXT" onclick="step_2_next()"' + '>' + p1;
html_string += '<' + '/' + 'div' + '>';
return html_string;
}
/**
* Define the application interface component (to be displayed on the web page whose source code file is base_converter.html)
* which enables the user to click the CONVERT button.
*
* @return {String} an HTML string which is used to instantiate a DIV page element whose id is "step_3_div".
*/
function generate_html_string_for_step_3_div() {
let html_string = '<' + 'div class="module input_step" id="step_3_div"' + '>', p0 = '<' + 'p' + '>', p1 ='<' + '/' + 'p' + '>';
html_string += p0 + "STEP_3: Click the CONVERT button to convert INPUT_SEQUENCE to its OUTPUT_BASE representation. To re-select the OUTPUT_BASE, click the BACK button." + p1;
html_string += p0 + "INPUT_BASE := " + '<' + 'span style="background:#000000;color:#ffff00" id="input_base_span_3"' + '>' + "???" + '<' + '/' + 'span' + '>' + p1;
html_string += p0 + "INPUT_SEQUENCE := " + '<' + 'span style="background:#000000;color:#ffff00" id="input_sequence_span_3"' + '>' + "???" + '<' + '/' + 'span' + '>' + p1;
html_string += p0 + "OUTPUT_BASE := " + '<' + 'span style="background:#000000;color:#ffff00" id="output_base_span_2"' + '>' + "???" + '<' + '/' + 'span' + '>' + p1;
html_string += p0 + '<' + 'input type="button" value="BACK" onclick="step_3_back()"' + '>';
html_string += " " + '<' + 'input type="button" value="CONVERT" onclick="convert()"' + '>' + p1;
html_string += '<' + '/' + 'div' + '>';
return html_string;
}
/**
* Set the content displayed inside of the div HTML element whose id is "output" to its initial placeholder text.
*/
function initialize_output_div() {
try {
let p0 = '<' + 'p class="module output_step"' + '>', p1 = '<' + '/' + 'p' + '>';
document.getElementById("output").innerHTML = p0 + "This sentence will be replaced with base conversion results when the CONVERT button is clicked." + p1;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of initialize_output_div(): " + exception);
}
}
/**
* Set the web page interface (i.e. base_converter.html) to its intial state.
*
* Assume that this function is called in response the event of the web page being loaed by the web browser.
*/
function initialize_application() {
try {
const time_stamp = generate_time_stamp(), p0 = '<' + 'p' + '>', p1 = '<' + '/' + 'p' + '>';
let message = "The web page, base_converter.html, was loaded at time: " + time_stamp;
let input_form_div = undefined;
console.log(message);
document.getElementById("time_stamped_messages").innerHTML = p0 + message + p1;
input_form_div = document.getElementById("input_form");
initialize_output_div();
input_form_div.innerHTML = generate_html_string_for_step_0_div();
input_form_div.innerHTML += generate_html_string_for_step_1_div();
input_form_div.innerHTML += generate_html_string_for_step_2_div();
input_form_div.innerHTML += generate_html_string_for_step_3_div();
hide_page_element("step_1_div");
hide_page_element("step_2_div");
hide_page_element("step_3_div");
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of initialize_application(): " + exception);
}
}
/**
* Perform the base converion using the input values which were submitted by the application user via the web page interface.
*
* Convert an INPUT_SEQUENCE (i.e. an unsigned integer consisting of no more than eight digits)
* whose base is INPUT_BASE to its equivalent representation as an unsigned integer whose base is OUTPUT_BASE.
*
* Append a time stamped message to the bottom of the web page indicating that this function was called.
*/
function convert() {
try {
const time_stamp = generate_time_stamp();
let message = "convert() was called at time: " + time_stamp;
let INPUT_BASE = 0, INPUT_SEQUENCE = "", OUTPUT_BASE = 0, OUTPUT_SEQUENCE = "";
let p00 = '<' + 'p class="module" style="border-color: #00ffff; border-width: 1px;border-style: solid;"' + '>', p0 = '<' + 'p' + '>', p1 = '<' + '/' + 'p' + '>';
console.log(message);
document.getElementById("time_stamped_messages").innerHTML += p0 + message + p1;
INPUT_BASE = parseInt(document.getElementById("input_base_span").innerHTML);
INPUT_SEQUENCE = document.getElementById("input_sequence_span").innerHTML;
OUTPUT_BASE = parseInt(document.getElementById("output_base_span_2").innerHTML);
OUTPUT_SEQUENCE = perform_base_conversion(INPUT_BASE, INPUT_SEQUENCE, OUTPUT_BASE);
document.getElementById("output").innerHTML = p00 + INPUT_SEQUENCE + " (in base-" + INPUT_BASE + ") is equal to " + OUTPUT_SEQUENCE + " (in base-" + OUTPUT_BASE + ")." + p1
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of convert(): " + exception);
}
}
JavaScript Code
The following JavaScript (JS) code defines functions which perform the arithmetic operations involved in converting INPUT_SEQUENCE from INPUT_BASE to OUTPUT_BASE when using the BASE_CONVERTER 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 base_converter_arithmetic.js.
JavaScript_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/base_converter_arithmetic.js
/**
* file: base_converter_arithmetic.js
* type: JavaScript
* date: 10_JULY_2023
* author: karbytes
* license: PUBLIC_DOMAIN
*/
/**
* Get the result of the following calculation: base ^ exponent (i.e. base to the power of exponent (i.e. base multiplied by itself exponent times))
* .
* @param {Number} base is assumed to be a base-ten natural number which is no smaller than two and no larger than sixteen.
*
* @param {Number} exponent is assumed to be a base-ten natural number which is no smaller than zero and no larger than seven.
*
* @return {Number} base multiplied by itself exponent times if no exception is thrown; otherwise 1.
*/
function compute_power(base, exponent) {
try {
let result = 1;
if (arguments.length !== 2) throw "exactly two function arguments are required.";
if (typeof base !== "number") throw "base is required to be a Number type value.";
if (typeof exponent !== "number") throw "exponent is required to be a Number type value.";
if (Math.floor(base) !== base) throw "base is required to be a whole number.";
if (Math.floor(exponent) !== exponent) throw "exponent is required to be a whole number.";
if ((base < 2) || (base > 16)) throw "base is required to be no smaller than two and no larger than sixteen.";
if ((exponent < 0) || (exponent > 7)) throw "exponent is required to be no smaller than zero and no larger than seven.";
while (exponent > 0) {
result *= base;
exponent -= 1;
}
return result;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of compute_power(base, exponent): " + exception);
return 1;
}
}
/**
* Determine whether or not the given function arguments represents a valid input_sequence with whose digits are in the input_base.
*
* @param {Number} input_base is assumed to be a base-ten integer which is no smaller than two and no larger than sixteen.
*
* @param {String} input_sequence is assumed to be a sequence of exactly eight characters such that each character is a digit whose numeric base is input_base.
*
* @return {Boolean} true if input_sequence is a string comprised of exactly eight characters such that each character is a digit whose numeric base is input_base; false otherwise.
*/
function validate_input_sequence(input_base, input_sequence) {
try {
let hexidecimal_digit_set = "0123456789ABCDEF", i = 0, k = 0, is_valid_input_sequence_digit = false;
if (arguments.length !== 2) throw "exactly two function arguments are required.";
if (typeof input_base !== "number") throw "input_base is required to be a Number type value.";
if (typeof input_sequence !== "string") throw "input_sequence is required to be a String type value.";
if (Math.floor(input_base) !== input_base) throw "input_base is required to be a whole number.";
if ((input_base < 2) || (input_base > 16)) throw "input_base is required to be no smaller than two and no larger than sixteen.";
if (input_sequence.length !== 8) throw "input_sequence is required to have a length of exactly eight characters.";
for (i = 0; i < 8; i++) {
for (k = 0; k < input_base; k++) if (input_sequence[i] === hexidecimal_digit_set[k]) is_valid_input_sequence_digit = true;
if (!is_valid_input_sequence_digit) throw "at least one character in input_sequence is not a valid digit (i.e. a digit whose base is input_base).";
is_valid_input_sequence_digit = false;
}
return true;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of convert_to_decimal(input_base, input_sequence): " + exception);
return false;
}
}
/**
* Return the decimal integer index of the hexidecimal digit which H represents where hexidecimal digits
* are the following set of characters arranged in the following permutation:
* ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
*
* @param {String} H is assumed to be a single hexidecimal digit.
*
* @return {Number} the decimal integer index of the hexidecimal digit which H represents.
*/
function get_decimal_value_of_hexidecimal_digit(H) {
if (H === '0') return 0;
if (H === '1') return 1;
if (H === '2') return 2;
if (H === '3') return 3;
if (H === '4') return 4;
if (H === '5') return 5;
if (H === '6') return 6;
if (H === '7') return 7;
if (H === '8') return 8;
if (H === '9') return 9;
if (H === 'A') return 10;
if (H === 'B') return 11;
if (H === 'C') return 12;
if (H === 'D') return 13;
if (H === 'E') return 14;
if (H === 'F') return 15;
return 0;
}
/**
* Get the decimal number representation of input_sequence by converting input_sequence from input_base to decimal (i.e. base-ten).
*
* @param {Number} input_base is assumed to be a base-ten integer which is no smaller than two and no larger than sixteen.
*
* @param {String} input_sequence is assumed to be a sequence of exactly eight characters such that each character is a digit whose numeric base is input_base.
*
* @return {Number} the base-ten number which input_sequence in the input_base represents; zero if an exception to normal functioning is thrown.
*/
function convert_to_decimal(input_base, input_sequence) {
try {
let decimal_output = 0, i = 0;
if (!validate_input_sequence(input_base, input_sequence)) throw "input_base or input_sequence appears to be an invalid function argument.";
for (i = 0; i < 8; i++) decimal_output += (get_decimal_value_of_hexidecimal_digit(input_sequence[i]) * compute_power(input_base, 7 - i));
return decimal_output;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of convert_to_decimal(input_base, input_sequence): " + exception);
return 0;
}
}
/**
* Get the hexidecimal equivalent of a single decimal digit.
*
* @param {Number} D is assumed to be a single base-ten digit (i.e. exactly one element within the following array:
* [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]).
*
* @return {String} the element of the following array whose index in the array is D:
* ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'] if D is a valid decimal digit;
* '0' otherwise.
*/
function convert_decimal_digit_to_hexidecimal(D) {
try {
let hexidecimal_digit_set = "0123456789ABCDEF";
if (arguments.length !== 1) throw "exactly one function argument is required.";
if (typeof D !== "number") throw "D is required to be a Number type value.";
if (Math.floor(D) !== D) throw "D is required to be a whole number.";
if ((D < 0) || (D > 9)) "D is required to be no smaller than zero and no larger than nine.";
return hexidecimal_digit_set[D];
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of convert_decimal_digit_to_hexidecimal(D): " + exception);
return '0';
}
}
/**
* Return a string whose constituent characters are identical to the characters in S except for the fact that
* the output string characters are in reverse order from those in S.
*
* @param {String} S is assumed to be a sequence of characters.
*
* @return {String} S in reverse order.
*/
function reverse_string(S) {
try {
let output_string = "", i = 0;
if (arguments.length !== 1) throw "exactly one function argument is required.";
if (typeof S !== "string") throw "output_string is required to be a String type value.";
for (i = (S.length - 1); i >= 0; i--) output_string += S[i];
return output_string;
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of reverse_string(S): " + exception);
return "ERROR";
}
}
/**
* Get the output_base representation of decimal_number by converting decimal_number from decimal (i.e. base-ten) to output_base.
*
* @param {Number} output_base is assumed to be a base-ten integer which is no smaller than two and no larger than sixteen.
*
* @param {Number} decimal_number is assumed to be a base-ten integer no smaller than zero and no larger than the following sum:
* (16 * (16 ^ 7)) + (16 * (16 ^ 6)) + (16 * (16 ^ 5)) + (16 * (16 ^ 4)) + (16 * (16 ^ 3)) + (16 * (16 ^ 2)) + (16 * (16 ^ 1)) + (16 * (16 ^ 0)) = 4581298448.
*
* @return {String} a sequence of one ore more hexidecimal digits which represents the value of decimal_number in the given output_base.
*/
function convert_from_decimal(output_base, decimal_number) {
try {
let maximum_decimal_number_value = 0, i = 0, output_base_result = "";
if (arguments.length !== 2) throw "exactly two function arguments are required.";
if (typeof output_base !== "number") throw "output_base is required to be a Number type value.";
if (typeof decimal_number !== "number") throw "decimal_number is required to be a Number type value.";
if (Math.floor(output_base) !== output_base) throw "output_base is required to be a whole number.";
if (Math.floor(decimal_number) !== decimal_number) throw "decimal_number is required to be a whole number.";
if ((output_base < 2) || (output_base > 16)) throw "output_base is required to be no smaller than two and no larger than sixteen.";
for (i = 7; i >= 0; i -= 1) maximum_decimal_number_value += (16 * compute_power(16, i));
if ((decimal_number < 0) || (decimal_number > maximum_decimal_number_value)) throw "decimal_number is required to be larger than zero and no larger than " + maximum_decimal_number_value + ".";
while (decimal_number > 0) {
output_base_result += convert_decimal_digit_to_hexidecimal(decimal_number % output_base);
decimal_number = Math.floor(decimal_number / output_base);
}
return reverse_string(output_base_result);
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of convert_from_decimal(output_base, decimal_number): " + exception);
return '0';
}
}
/**
* Convert an INPUT_SEQUENCE (i.e. an unsigned integer consisting of no more than eight digits)
* whose base is INPUT_BASE to its equivalent representation as an unsigned integer whose base is OUTPUT_BASE.
*
* This is the "main function" of this JavaScript file (i.e. the "macro function" which implements each of the arithmetic functions defined above).
*
* @param {Number} input_base is assumed to be a base-ten integer which is no smaller than two and no larger than sixteen.
*
* @param {String} input_sequence is assumed to be a sequence of exactly eight characters such that each character is a digit whose numeric base is input_base.
*
* @param {Number} output_base is assumed to be a base-ten integer which is no smaller than two and no larger than sixteen.
*
* @return {String} input_sequence in its output_base representation if no exception to normal functioning is thrown; "0" otherwise.
*/
function perform_base_conversion(input_base, input_sequence, output_base) {
try {
let decimal_number = convert_to_decimal(input_base, input_sequence);
return convert_from_decimal(output_base, decimal_number);
}
catch(exception) {
console.log("An exception to normal functioning occurred during the runtime of perform_base_conversion(input_base, input_sequence, output_base): " + exception);
return '0';
}
}
JavaScript Code
The following JavaScript (JS) code defines one function which controls the behavior of the HEXIDECIMAL_COLOR_CODES web page application; namely the function which returns the number of milliseconds elapsed since the Unix Epoch concatenated to the string ” milliseconds since midnight on 01_JANUARY_1970″. Copy the JS code from the source code file which is linked below into a text editor and save that file as time_stamp.js.
JavaScript_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/time_stamp.js
/**
* file: time_stamp.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.";
}
BASE_CONVERTER Interface (Initial)
The screenshot image below depicts what the BASE_CONVERTER web page interface is supposed to look like when the web page is initially loaded by a web browser.
BASE_CONVERTER Interface (Step One)
The screenshot image below depicts one possible configuration of what the the BASE_CONVERTER web page interface could look like after the user selects an INPUT_BASE from the expandable menu and then clicks on the NEXT button in the “step_0” module portion of the “input_form”.
(Note that only digit keys in the INPUT_BASE will appear and more than eight digits can be input into INPUT_SEQUENCE. If more than eight digits are input, the leftmost digit will be removed while the most recently input digit will be appended to the rightmost end of the INPUT_SEQUENCE).
BASE_CONVERTER Interface (Step Two)
The screenshot image below depicts one possible configuration of what the the BASE_CONVERTER web page interface could look like after the user enters digits into an INPUT_SEQUENCE using the INPUT_BASE digit buttons and then clicks on the NEXT button in the “step_1” module portion of the “input_form”.
(Note that the user can use BACK buttons to return to previous steps in order to change the input values).
BASE_CONVERTER Interface (Step Three)
The screenshot image below depicts one possible configuration of what the the BASE_CONVERTER web page interface could look like after the user selects an OUTPUT_BASE from the expandable menu and then clicks on the NEXT button in the “step_2” module portion of the “input_form”.
BASE_CONVERTER Interface (Final)
The screenshot image below depicts one possible configuration of what the the BASE_CONVERTER web page interface could look like after the user clicks on the CONVERT button in the “step_3” module portion of the “input_form”.
This web page was last updated on 10_JULY_2023. The content displayed on this web page is licensed as PUBLIC_DOMAIN intellectual property.