HEXIDECIMAL_COLOR_CODES
The single web page application featured in this tutorial web page substantiates a three-by-three square grid composed of nine equally-sized rectangular tiles where each tile is assigned a random background color. Each tile displays the hexidecimal color code which represents that tile’s background color in the format #RRGGBB along with that tile background color’s RED gradient (RR), GREEN gradient (GG), and BLUE gradient (BB). The application end user may select a color skew option from a list of options to limit the randomized color output values to be either RED skewed, GREEN skewed, BLUE skewed, or not skewed towards any primary color gradient (and skew NONE is automatically selected if no other color skew menu option is selected when the GENERATE button is clicked).
Note that a live version of the HEXIDECIMAL_COLOR_CODES application is available to try using immediately from your current web browser at the following web address: https://karlinarayberinger.github.io/KARBYTES_BLOG_APPS_github_hosted_website/HEXIDECIMAL_COLOR_CODES/hexidecimal_color_codes.html
If color_skew_specification is “red”, the decimal number which “RR” represents will be larger than or equal to the decimal number represented by “GG” and larger than or equal to the decimal number represented by “BB”.
If color_skew_specification is “green”, the decimal number which “GG” represents will be larger than or equal to the decimal number represented by “RR” and larger than or equal to the decimal number represented by “BB”.
If color_skew_specification is “blue”, the decimal number which “BB” represents will be larger than or equal to the decimal number represented by “RR” and larger than or equal to the decimal number represented by “GG”.
If color_skew_specification is neither “red” nor “green” nor “blue”, then no color skew will be applied (i.e. the color_skew_specification value will be set to “none”).
To view hidden text inside each of the preformatted text boxes below, scroll horizontally.
hexidecimal_digits := ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']. // The nonnegative integer value of a hexidecimal digit is sixteen to the power of the decimal array index value of that particular hexidecimal digit.
primary_color_gradient_hexidecimal_value := hexidecimal_digits[P] hexidecimal_digits[Q]. // P and Q are each nonnegative decimal integer values no larger than 15.
primary_color_gradient_decimal_value := (P * (16 ^ 1)) + (Q * (16 ^ 0)). // P and Q are each nonnegative decimal integer values no larger than 15.
maximum_value(primary_color_gradient_decimal_value) := (hexidecimal_to_decimal('F') * (16 ^ 1)) + (hexidecimal_to_decimal('F') * (16 ^ 0)) = (15 * 16) + (15 * 0) = 255.
minimum_value(primary_color_gradient_decimal_value) := (hexidecimal_to_decimal('0') * (16 ^ 1)) + (hexidecimal_to_decimal('0') * (16 ^ 0)) = (0 * 16) + (0 * 0) = 0.
SOFTWARE_APPLICATION_COMPONENTS
Hyper-Text-Markup-Language_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/hexidecimal_color_codes.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/hexidecimal_color_codes.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 HEXIDECIMAL_COLOR_CODES 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 hexidecimal_color_codes.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_packk/main/hexidecimal_color_codes.html
<!-- /** * file: hexidecimal_color_codes.html * type: Hyper-Text-Markup-Language * date: 10_JULY_2023 * author: karbytes * license: PUBLIC_DOMAIN */ --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HEXIDECIMAL_COLOR_CODES</title> <link rel="stylesheet" href="karbytes_aesthetic.css"> <script src="hexidecimal_color_codes.js"></script> <script src="time_stamp.js"></script> <style> .green_input_element { background: #000000; color: #00ff00; border-color: #00ff00; } .green_input_element:hover { background: #00ff00; color: #000000; } .tile_text { background: #000000; color: #00ffff; } </style> </head> <body onload="initialize_application()"> <h1>HEXIDECIMAL_COLOR_CODES</h1> <p>1) Select a color skew from the expandable menu.</p> <p class="console">COLOR_SKEW := <select class="green_input_element" id="color_skew_menu"> <option value="none" selected>NONE</option> <option value="red">RED</option> <option value="green">GREEN</option> <option value="blue">BLUE</option> </select> </p> <p> 2) Click the GENERATE button to generate a grid comprised of 3 rows and 3 columns of randomly colored tiles according to the selected color skew. </p> <p><input class="green_input_element" type="button" value="GENERATE" onclick="generate_color_grid()"></p> <div id="output"><p>???</p></div> <div id="time_stamped_events" class="console"><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 HEXIDECIMAL_COLOR_CODES 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 most of the functions (except for one function) which control the behavior of the HEXIDECIMAL_COLOR_CODES 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 hexidecimal_color_codes.js.
JavaScript_file: https://raw.githubusercontent.com/karlinarayberinger/KARLINA_OBJECT_summer_2023_starter_pack/main/hexidecimal_color_codes.js
/** * file: hexidecimal_color_codes.js * type: JavaScript * date: 10_JULY_2023 * author: karbytes * license: PUBLIC_DOMAIN */ /** * Set the web page interface to its initial state. * * Display a placeholder paragraph inside of the div element whose id is "output". * * Assume that this function is called in response to the event of the corresponding web page, * hexidecimal_color_codes.html, being loaded by the web browser. */ function initialize_application() { try { const time_stamp = generate_time_stamp(), p0 = '<' + 'p' + '>', p1 = '<' + '/' + 'p' + '>'; let message = "The web page, hexidecimal_color_codes.html, was loaded at time: " + time_stamp; console.log(message); document.getElementById("time_stamped_events").innerHTML = p0 + message + p1; document.getElementById("output").innerHTML = p0 + "This sentence will disappear when the GENERATE button is clicked." + p1; } catch(exception) { console.log("An exception to normal functioning occurred during the runtime of initialize_application(): " + exception); } } /** * 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 a select HTML element. * * @return {String} the value of the selected menu option. */ 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); } } /** * Use the native JavaScript Math library function for generating random numbers to select a * base-ten number no smaller than 0 and less than 1. * * @return {Number} a base-ten (i.e. decimal) number no smaller than zero and smaller than one. */ function generate_random_nonnegative_number_less_than_one() { return Math.random(); } /** * Use the native JavaScript Math library function for generating random numbers to select a base-ten * number no smaller than 0 and less than 1 and store the result in a variable named N. * * Multiply N by 256, round the result down to the nearest integer, and return that rounded down result. * * @return {Number} a base-ten (i.e. decimal) integer no smaller than 0 and no larger than 255. */ function generate_random_nonnegative_integer_less_than_two_hundred_fifty_six() { let N = generate_random_nonnegative_number_less_than_one(); return Math.floor(N * 256); } /** * Convert a nonnegative decimal integer which is no smaller than 0 and no larger than 255 to its two-digit hexidecimal (i.e. base-sixteen) equivalent. * * @param {Number} decimal_integer is assumed to be a base-ten integer no smaller than 0 and no larger than 255. * * @return {String} a sequence of two hexidecimal digits which represents the same numerical value as decimal_integer. */ function convert_from_decimal_to_hexidecimal(decimal_integer) { try { let hexidecimal_digits_set = "0123456789ABCDEF"; let hexidecimal_output_array = ['0','0']; let hexidecimal_output_string = ""; if (arguments.length !== 1) throw "exactly one function argument is required."; if (typeof arguments[0] !== "number") throw "decimal_integer must be a Number type value."; if (decimal_integer !== Math.floor(decimal_integer)) throw "decimal_integer must be a whole number value."; if (decimal_integer < 0) throw "decimal_integer must be a nonnegative number value."; if (decimal_integer > 255) throw "decicmal_integer must not exceed 255."; hexidecimal_output_array[0] = hexidecimal_digits_set[decimal_integer % 16]; decimal_integer = Math.floor(decimal_integer / 16); hexidecimal_output_array[1] = hexidecimal_digits_set[decimal_integer % 16]; hexidecimal_output_string += hexidecimal_output_array[1]; hexidecimal_output_string += hexidecimal_output_array[0]; return hexidecimal_output_string; } catch(exception) { console.log("An exception to normal functioning occurred during the runtime of convert_from_decimal_to_hexidecimal(decimal_integer): " + exception); return "00"; } } /** * Generate a random hexidecimal color code string in the format "#RRGGBB" * such that RR represents the RED gradient, * GG represents the GREEN gradient, and * BB represents the BLUE gradient * (and such that each of the three "primary color" gradients * is a sequence of two hexidecimal digits which represents a decimal integer * no smaller than 0 and no larger than 255)). * * If color_skew_specification is "red", * the decimal number which "RR" represents will be * larger than or equal to the decimal number represented by "GG" and * larger than or equal to the decimal number represented by "BB". * * If color_skew_specification is "green", * the decimal number which "GG" represents will be * larger than or equal to the decimal number represented by "RR" and * larger than or equal to the decimal number represented by "BB". * * If color_skew_specification is "blue", * the decimal number which "BB" represents will be * larger than or equal to the decimal number represented by "RR" and * larger than or equal to the decimal number represented by "GG". * * If color_skew_specification is neither "red" nor "green" nor "blue", * then no color skew will be applied (i.e. the color_skew_specification value will be set to "none"). * * Note that a hexidecimal digit is a String type character from the following set of sixteen base-sixteen digits * (which are listed in ascending order such that each hexidecimal digit * represents a base-ten integer value starting with 0 and incrementing by exactly 1): * * hexidecimal_digits := ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']. * * @param {String} color_skew_specification is assumed to be either "none", "red", "green", or "blue". * * @return {String} a hexidecimal color code string in the format "#RRGGBB". */ function generate_random_hexidecimal_color_code(color_skew_specification) { try { let red_gradient_hexidecimal_digits_sequence = "00", red_gradient_decimal_value = 0; let green_gradient_hexidecimal_digits_sequence = "00", green_gradient_decimal_value = 0; let blue_gradient_hexidecimal_digits_sequence = "00", blue_gradient_decimal_value = 0; if (arguments.length !== 1) throw "exactly one function argument is required."; if (typeof arguments[0] !== "string") throw "color_skew_specification must be a String type value."; red_gradient_decimal_value = generate_random_nonnegative_integer_less_than_two_hundred_fifty_six(); green_gradient_decimal_value = generate_random_nonnegative_integer_less_than_two_hundred_fifty_six(); blue_gradient_decimal_value = generate_random_nonnegative_integer_less_than_two_hundred_fifty_six(); if (color_skew_specification === "red") { while ((red_gradient_decimal_value < green_gradient_decimal_value) || (red_gradient_decimal_value < blue_gradient_decimal_value)) { red_gradient_decimal_value = generate_random_nonnegative_integer_less_than_two_hundred_fifty_six(); green_gradient_decimal_value = generate_random_nonnegative_integer_less_than_two_hundred_fifty_six(); blue_gradient_decimal_value = generate_random_nonnegative_integer_less_than_two_hundred_fifty_six(); } } if (color_skew_specification === "green") { while ((green_gradient_decimal_value < red_gradient_decimal_value) || (green_gradient_decimal_value < blue_gradient_decimal_value)) { red_gradient_decimal_value = generate_random_nonnegative_integer_less_than_two_hundred_fifty_six(); green_gradient_decimal_value = generate_random_nonnegative_integer_less_than_two_hundred_fifty_six(); blue_gradient_decimal_value = generate_random_nonnegative_integer_less_than_two_hundred_fifty_six(); } } if (color_skew_specification === "blue") { while ((blue_gradient_decimal_value < red_gradient_decimal_value) || (blue_gradient_decimal_value < green_gradient_decimal_value)) { red_gradient_decimal_value = generate_random_nonnegative_integer_less_than_two_hundred_fifty_six(); green_gradient_decimal_value = generate_random_nonnegative_integer_less_than_two_hundred_fifty_six(); blue_gradient_decimal_value = generate_random_nonnegative_integer_less_than_two_hundred_fifty_six(); } } red_gradient_hexidecimal_digits_sequence = convert_from_decimal_to_hexidecimal(red_gradient_decimal_value); green_gradient_hexidecimal_digits_sequence = convert_from_decimal_to_hexidecimal(green_gradient_decimal_value); blue_gradient_hexidecimal_digits_sequence = convert_from_decimal_to_hexidecimal(blue_gradient_decimal_value); return "#" + red_gradient_hexidecimal_digits_sequence + green_gradient_hexidecimal_digits_sequence + blue_gradient_hexidecimal_digits_sequence; } catch(exception) { console.log("An exception to normal functioning occurred during the runtime of generate_random_hexidecimal_color_code(color_skew_specification): " + exception); return "#000000"; } } /** * Return the decimal integer index of the hexidecimal digit which H represents in the array below: * * hexidecimal_digits := ['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; } /** * Convert a string comprised of exactly two hexidecimal digits to its corresponding decimal representation. * * Note that the characters comprising hexidecimal_sequence must be members of the following set: * * hexidecimal_digits := ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']. * * Note that the output value will be a decimal integer no smaller than 0 and no larger than 255. * * @param {String} hexidecimal_sequence is assumed to be a string comprised of exactly two hexidecimal digits. * * @return {Number} the base-ten number which hexidecimal_sequence represents. */ function convert_from_hexidecimal_to_decimal(hexidecimal_sequence) { try { let hexidecimal_digits_set = "0123456789ABCDEF", i = 0, is_valid_hexidecimal_digit = false, decimal_output = 0; if (arguments.length !== 1) throw "exactly one function argument is required."; if (typeof arguments[0] !== "string") throw "hexidecimal_sequence must be a String type value."; if (hexidecimal_sequence.length !== 2) throw "hexidecimal_sequence must have a length of exactly 2 characters."; for (i = 0; i < 16; i += 1) if (hexidecimal_sequence[0] === hexidecimal_digits_set[i]) is_valid_hexidecimal_digit = true; if (!is_valid_hexidecimal_digit) throw "The first digit of hexidecimal_sequence is not a valid hexidecimal digit."; is_valid_hexidecimal_digit = false; for (i = 0; i < 16; i += 1) if (hexidecimal_sequence[1] === hexidecimal_digits_set[i]) is_valid_hexidecimal_digit = true; if (!is_valid_hexidecimal_digit) throw "The second digit of hexidecimal_sequence is not a valid hexidecimal digit."; decimal_output += (get_decimal_value_of_hexidecimal_digit(hexidecimal_sequence[0]) * 16); decimal_output += (get_decimal_value_of_hexidecimal_digit(hexidecimal_sequence[1])); return decimal_output; } catch(exception) { console.log("An exception to normal functioning occurred during the runtime of convert_from_hexidecimal_to_decimal(hexidecimal_sequence): " + exception); return 0; } } /** * Generate the HTML string which constructs a table data cell whose text content is as follows: * * - hexidecimal_color_code: a random hexidecimal color code string in the format "#RRGGBB" * such that RR represents the RED gradient, * GG represents the GREEN gradient, and * BB represents the BLUE gradient * (and such that each of the three "primary color" gradients * is a sequence of two hexidecimal digits which represents a decimal integer * no smaller than 0 and no larger than 255)). * * - red_value: a decimal integer no smaller than 0 and no larger than 255 which "RR" represents. * * - green_value: a decimal integer no smaller than 0 and no larger than 255 which "GG" represents. * * - blue_value: a decimal integer no smaller than 0 and no larger than 255 which "BB" represents. * * If color_skew_specification is "red", * the decimal number which "RR" represents will be larger than or equal to the decimal number represented by "GG" * and larger than or equal to the decimal number represented by "BB". * * If color_skew_specification is "green", * the decimal number which "GG" represents will be larger than or equal to the decimal number represented by "RR" * and larger than or equal to the decimal number represented by "BB". * * If color_skew_specification is "blue", * the decimal number which "BB" represents will be larger than or equal to the decimal number represented by "RR" * and larger than or equal to the decimal number represented by "GG". * * If color_skew_specification is neither "red" nor "green" nor "blue", * then no color skew will be applied (i.e. the color_skew_specification value will be set to "none"). * * @param {String} color_skew_specification is assumed to be either "none", "red", "green", or "blue". * * @return {String} the HTML string which may be used to construct a table data element on a web page. */ function generate_html_string_for_table_cell(color_skew_specification) { let html_string = "", hexidecimal_color_code = "", RR = "", GG = "", BB = "", red_value = 0, green_value = 0, blue_value = 0; hexidecimal_color_code = generate_random_hexidecimal_color_code(color_skew_specification); RR += hexidecimal_color_code[1]; RR += hexidecimal_color_code[2]; GG += hexidecimal_color_code[3]; GG += hexidecimal_color_code[4]; BB += hexidecimal_color_code[5]; BB += hexidecimal_color_code[6]; red_value = convert_from_hexidecimal_to_decimal(RR); green_value = convert_from_hexidecimal_to_decimal(GG); blue_value = convert_from_hexidecimal_to_decimal(BB); html_string += '<' + 'td' + ' style="background:' + hexidecimal_color_code + '"' + '>'; html_string += '<' + 'p' + ' class="tile_text"' + '>'; html_string += "hexidecimal_color_code: " + hexidecimal_color_code; html_string += '<' + '/' + 'p' + '>'; html_string += '<' + 'p' + ' class="tile_text"' + '>'; html_string += "red_value: " + red_value; html_string += '<' + '/' + 'p' + '>'; html_string += '<' + 'p' + ' class="tile_text"' + '>'; html_string += "green_value: " + green_value; html_string += '<' + '/' + 'p' + '>'; html_string += '<' + 'p' + ' class="tile_text"' + '>'; html_string += "blue_value: " + blue_value; html_string += '<' + '/' + 'p' + '>'; html_string += '<' + '/' + 'td' + '>'; return html_string; } /** * Populate the div element whose id is "output" with a table consisting of three rows, three columns, and data cells * such that the background color of each data cell is set to the hexidecimal color code text * displayed inside of that particular data cell. * * Each of the nine hexidecimal color codes is a randomly generated String value whose RED-GREEN-BLUE values are * constrained according to the option selected in the select menu whose id is "color_skew_menu". * * Assume that this function is called in response to the event of button on the corresponding web page, * hexidecimal_color_codes.html, whose value is "GENERATE" being clicked. */ function generate_color_grid() { try { const time_stamp = generate_time_stamp(), p0 = '<' + 'p' + '>', p1 = '<' + '/' + 'p' + '>'; let message = "The GENERATE button was clicked at time: " + time_stamp; let selected_color_skew = "", output_div_content = ""; console.log(message); document.getElementById("time_stamped_events").innerHTML += p0 + message + p1; selected_color_skew = get_selected_menu_option_value("color_skew_menu"); output_div_content = '<' + 'p' + '>'; output_div_content += "selected_color_skew := " + selected_color_skew + "."; output_div_content += '<' + '/' + 'p' + '>'; output_div_content += '<' + 'table' + '>'; output_div_content += '<' + 'tr' + '>'; output_div_content += generate_html_string_for_table_cell(selected_color_skew); output_div_content += generate_html_string_for_table_cell(selected_color_skew); output_div_content += generate_html_string_for_table_cell(selected_color_skew); output_div_content += '<' + '/' + 'tr' + '>'; output_div_content += '<' + 'tr' + '>'; output_div_content += generate_html_string_for_table_cell(selected_color_skew); output_div_content += generate_html_string_for_table_cell(selected_color_skew); output_div_content += generate_html_string_for_table_cell(selected_color_skew); output_div_content += '<' + '/' + 'tr' + '>'; output_div_content += '<' + 'tr' + '>'; output_div_content += generate_html_string_for_table_cell(selected_color_skew); output_div_content += generate_html_string_for_table_cell(selected_color_skew); output_div_content += generate_html_string_for_table_cell(selected_color_skew); output_div_content += '<' + '/' + 'tr' + '>'; output_div_content += '<' + '/' + 'table' + '>'; document.getElementById("output").innerHTML = output_div_content; } catch(exception) { console.log("An exception to normal functioning occurred during the runtime of generate_color_grid(): " + exception); } }
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."; }
HEXIDECIMAL_COLOR_CODES Interface (Initial)
The screenshot image below depicts what the HEXIDECIMAL_COLOR_CODES web page interface is supposed to look like when the web page is initially loaded by a web browser.
HEXIDECIMAL_COLOR_CODES Interface (Skew None)
The screenshot image below depicts one possible configuration of what the HEXIDECIMAL_COLOR_CODES web page interface could look like if the GENERATE button is clicked without first clicking on the color skew menu button or if the “NONE” option is selected in the color skew menu before the GENERATE button is clicked.
HEXIDECIMAL_COLOR_CODES Interface (Skew Red)
The screenshot image below depicts one possible configuration of what the HEXIDECIMAL_COLOR_CODES web page interface could look like if the “RED” option is selected in the color skew menu before the GENERATE button is clicked.
HEXIDECIMAL_COLOR_CODES Interface (Skew Green)
The screenshot image below depicts one possible configuration of what the HEXIDECIMAL_COLOR_CODES web page interface could look like if the “GREEN” option is selected in the color skew menu before the GENERATE button is clicked.
HEXIDECIMAL_COLOR_CODES Interface (Skew Blue)
The screenshot image below depicts one possible configuration of what the HEXIDECIMAL_COLOR_CODES web page interface could look like if the “BLUE” option is selected in the color skew menu before the GENERATE button is clicked.
This web page was last updated on 12_JULY_2025. The content displayed on this web page is licensed as PUBLIC_DOMAIN intellectual property.