<style>
body {
    font-family: Consolas, Monaco, "Courier New", monospace; font-size: 11px;
}
pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    background-color: #eee;
    padding: 15px;
    border-radius: 5px;
}
</style>

<script type="text/javascript" src="jQuery_v3.6.0.js"></script>
<div class="basic_algorithm_scripting">
    <h1>Basic Algorithm Scripting</h1>
    <hr />
    convert temperature
    <hr />
    <input type="radio" name="temperature_format" value="celcius" checked="checked" /> <label><sup>o</sup>celcius</label>
    <input type="radio" name="temperature_format" value="fahrenheit" /> <label><sup>o</sup>fahrenheit</label>
    <br />
    <input type="text" name="temperature" id="temperature" placeholder="enter temperature value here" style="width: 200px; height: 25px;" />
    <br />
    Output: <label class="output"></label>
    <br />
    <pre>
        formula:
        fahrenheit to celcius: °F = (°C x 9/5) + 32
        celcius to fahrenheit: °C = (°F - 32) x 5/9
    </pre>
    <script>
        $(document).ready(function(){
            // validate number and decimal
            $(document).on("keypress", "input#temperature", function(event){
                // console.log(event.which);

                try {
                    var char_code = (event.which) ? event.which : event.keyCode;
                    // 46: delete
                    if(char_code==46) {
                        var txt=document.getElementById(this.id).value;
                        if(!(txt.indexOf(".") > -1)) {
                            return true;
                        }
                    }
                    // 
                    if (char_code > 31 && (char_code < 48 || char_code > 57/*0: 48, 1: 49, 2: 50, 3: 51, 4: 52, 5: 53, 6: 54, 7: 55, 8: 56, 9: 57*/) ) {
                        return false;
                    }
                    return true;
                } catch(exception) {
                    console.log(exception);
                }
            });
            $(document).on("keyup", "input#temperature", function(){
                change_temperature();
            });
            let celcius2fahrenheit = (value) => {
                var cTemp = value;
                var cToFahr = cTemp * 9 / 5 + 32;
                var message = cTemp+'\xB0C is ' + cToFahr + ' \xB0F.';
                // console.log(message);
                $("label.output").text(message);
            }
            let fahrenheit2celcius = (value) => {
                var fTemp = value;
                var fToCel = (fTemp - 32) * 5 / 9;
                var message = fTemp+'\xB0F is ' + fToCel + '\xB0C.';
                // console.log(message);
                $("label.output").text(message);
            }
            $(document).on("change", "input[name='temperature_format']", function(){
                // console.log("changed");
                change_temperature();
            });
            let change_temperature = () => {
                let input = $("input#temperature").val();
                // console.log(input);

                let checked_temperature = $("input[name='temperature_format']:checked").val();
                // console.log(checked_temperature);

                if (checked_temperature=="celcius") {
                    celcius2fahrenheit(input);
                } else if (checked_temperature=="fahrenheit") {
                    fahrenheit2celcius(input);
                }
            };
        });
    </script>

<hr /><hr />
<h3>Reverse a string</h3>
<input type="text" class="reverse_string_input" placeholder="enter string to reverse" style="height: 25px; width: 200px;" />
<br />
Output: <label class="reverse_string_output"></label>
<script>
$(document).ready(function(){
    $(document).on("keyup", "input.reverse_string_input", function(){
        let input_value = ($(this).val()).split("");
        // let string_array = input_value.split("");
        // console.log(string_array);
        // return;
        for (let i=0; i<parseInt(input_value.length/2); ++i) {
            let temp = input_value[i];
            input_value[i] = input_value[input_value.length - i - 1];
            input_value[input_value.length - i - 1] = temp;
            console.log(input_value[i],input_value[input_value.length - i - 1]);
            // new_string[i] = input_value[input_value.length - i - 1];
            // new_string[input_value.length - i - 1] = input_value[i];
        }
        $("label.reverse_string_output").text(input_value.join(""));
        // console.log(input_value);
    });
});
</script>

<hr /><hr />
<h3>Factorialize a number</h3>
<input type="number" min="0" max="50" name="factorial_number_input" id="factorial_number_input" value="" placeholder="enter a number" style="width: 200px; height: 25px;"/>
<br />
output: <label class="factorial_output"></label>
<script>
$(document).ready(function(){
    $(document).on("keyup", "input#factorial_number_input", function(){
        let input_val = $("input#factorial_number_input").val();
        let big_int = BigInt(input_val);
        let factorial = 1n;
        for (let i=0n; i<big_int; ++i) {
            factorial *= (big_int - i);
        }
        $("label.factorial_output").text(String(factorial));
    });
    $(document).on("keydown", "input#factorial_number_input", function(event){
        let key_code = parseInt(event.which);
        // console.log(key_code);
        if (key_code == 190) {
            event.preventDefault();
        }
        let input_val = parseInt($("input#factorial_number_input").val());
        if (input_val>50) {
            $("input#factorial_number_input").val(50)
            event.preventDefault();
        } else {
            console.log(input_val,typeof input_val);
        }

    });
    $(document).on("contextmenu", "input#factorial_number_input", function(){
        event.preventDefault();
    });
});
</script>

<hr /><hr />
<h3>longest word in a string</h3>
<textarea id="longest_word_textarea" placeholder="write anything here" style="width: 500px; height: 100px; resize: none; font-size:12px; padding: 10px;"></textarea>
<br />
<label class="longest_word_label"></label>
<script>
$(document).ready(function(){
    console.log("ready for longest word");
    $(document).on("keyup", "#longest_word_textarea", function(event){
        // console.log(event.which);
        // $(this).val($(this).val().trim());
        let the_string = $(this).val();
        let string_array = the_string.split(" ");
        // console.log(string_array,string_array.length);
        let [longest_word, longest_length] = ["",0];
        for (let i=0; i<string_array.length; ++i) {
            if (string_array[i].length>longest_length) {
                longest_word = string_array[i];
                longest_length = string_array[i].length;
            }
        }
        $(".longest_word_label").text("Longest word: '"+longest_word+"' of length "+longest_length);
    });
});
</script>

<hr /><hr />
<h3>largest number in subarrays</h3>
given array: [[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]
<br />
largest number: <label class="largest_number_label"></label>
<script>
$(document).ready(function(){
    let the_array = [
        [4, 5, 1, 3], 
        [13, 27, 18, 26], 
        [32, 35, 37, 39], 
        [1000, 1001, 857, 1]
    ];
    // console.log(the_array.length);
    let largest_number = the_array[0][0];
    for (let i=0; i<the_array.length; ++i) {
        for (let j=0; j<the_array[i].length; ++j) {
            if (the_array[i][j]>largest_number) {
                largest_number = the_array[i][j];
            }
        }
    }
    console.log(largest_number);
    $(".largest_number_label").text(largest_number);
});
</script>

<hr /><hr />
<h3>confirm string ending</h3>
<input type="text" name="confirm_string_ending_input_1" id="confirm_string_ending_input_1" placeholder="write a string here" style="height: 25px; width: 300px;" />
<br /><br />
<input type="text" name="confirm_string_ending_input_2" id="confirm_string_ending_input_2" placeholder="what ending are you looking for" style="height: 25px; width: 300px;" />
<br /><br />
output: <label class="confirm_string_ending_label"></label>
<script>
$(document).ready(function(){
    $(document).on("keydown", "#confirm_string_ending_input_1, #confirm_string_ending_input_2", function(event){
        console.log(event.which);
        if (event.which==32) {
            event.preventDefault();
        }
        let the_string = $("#confirm_string_ending_input_1").val();
        let the_ending = $("#confirm_string_ending_input_2").val();
        check_ending(the_string,the_ending);
    });
    $(document).on("keyup", "#confirm_string_ending_input_1, #confirm_string_ending_input_2", function(event){
        let current_string = $(this).val();
        if (current_string.indexOf(" ")!=-1) {
            $(this).val("");
        }
        let the_string = $("#confirm_string_ending_input_1").val();
        let the_ending = $("#confirm_string_ending_input_2").val();
        check_ending(the_string,the_ending);
    });
    $(document).on("keyup", "#confirm_string_ending_input_2", function(){
        let current_string = $(this).val();
        if (current_string.length>1) {
            $(this).val("");
        }
    });
    $(document).on("keydown", "#confirm_string_ending_input_2", function(){
        let current_string = $(this).val();
        if (current_string.length>1) {
            $(this).val("");
        }
    });
    let check_ending = (the_string,ending_string) => {
        if (the_string.charAt(the_string.length-1)!=ending_string.charAt(0)) {
            $(".confirm_string_ending_label").text(the_string.charAt(the_string.length-1)+"!="+ending_string.charAt(0));
        } else if (the_string.charAt(the_string.length-1)==ending_string.charAt(0)) {
            $(".confirm_string_ending_label").text(the_string.charAt(the_string.length-1)+"=="+ending_string.charAt(0));
        }
    };
});
</script>

<hr /><hr />
<h3>Repeat a String</h3>
<input type="text" name="repeat_string_value" id="repeat_string_value" placeholder="write string to be repeated" style="width: 300px; height: 25px; padding: 5px;" />
<br /><br />
<input type="text" name="repeat_string_number" id="repeat_string_number" placeholder="number of times to be repeated" style="width: 300px; height: 25px; padding: 5px;" />
<br /><br />
output: <label class="repeat_string_label"></label>
<script>
$(document).ready(function(){
    // console.log("ready for repeat string");

    $(document).on("keydown", "#repeat_string_value, #repeat_string_number", function(event){
        // console.log(event.which);
        if (event.which==32) { // space
            event.preventDefault();
        }
    });
    $(document).on("keydown", "#repeat_string_number", function(event){
        // console.log(event.which);
        if (event.which<48 || event.which>57) {
            event.preventDefault();
        }
    });
    $(document).on("keyup", "#repeat_string_value, #repeat_string_number", function(){
        let the_string = $("#repeat_string_value").val();
        let number_of_times = parseInt($("#repeat_string_number").val());
        let repeated_string = "";
        for (let i=0; i<number_of_times; ++i) {
            repeated_string += (` ${(i+1)}.` + the_string);
        }
        $(".repeat_string_label").text(repeated_string);
    });
});
</script>

<hr /><hr />
<h3>truncate a string</h3>
the string::
<label class="truncate_string_string">A-tisket a-tasket A green and yellow basket</label>
<br />
truncation length::
<label class="truncate_string_length">8</label>
<br />
Output:
<label class="truncate_string_output" style="display: block; height: 100px; overflow: auto; background-color: #eee;"></label>
<script>
$(document).ready(function(){
    let the_string = $(".truncate_string_string").text();
    let the_length = $(".truncate_string_length").text();
    console.log(the_string.length,the_length.length);

    let length_counter = the_string.length;
    let new_string = the_string;
    let display_string = "";
    while ((length_counter)>=8) {
        display_string += (`<br /><b>length ${length_counter}.</b> ` + new_string);
        new_string = new_string.substring(0,new_string.length-1);
        --length_counter;
    }
    $(".truncate_string_output").html(display_string);
});
</script>

<hr /><hr />
<h3>finders and keepers</h3>
array:: <label class="finders_keepers_array"></label>
<br />
test:: <label class="finders_keepers_test">even number: num => num % 2 === 0</label>
<br />
output:: <label class="finders_keepers_output"></label>
<pre>
    let condition = number => number % 2;
    let finders_keepers_array = [];
    let condition_met  = -1;
    for (let i=0; i<10; ++i) {
        finders_keepers_array.push(
            Math.floor(Math.random()*(100-50)) + 50
        );
    }
    $(".finders_keepers_array").text(finders_keepers_array);

    for (let i=0; i<finders_keepers_array.length; ++i) {
        if (condition(finders_keepers_array[i])==0) {
            condition_met = i;
            break;
        }
    }

    if (condition_met!=-1) {
        $(".finders_keepers_output").text(`first number to satisfy test is "${finders_keepers_array[condition_met]}" at position number "${condition_met+1}"`);
    } else {
        $(".finders_keepers_output").text(`none of the elements pass the test`);
    }
</pre>
<script>
$(document).ready(function(){
    console.log("finders and keepers");

    let condition = number => number % 2;
    let finders_keepers_array = [];
    let condition_met  = -1;
    for (let i=0; i<10; ++i) {
        finders_keepers_array.push(
            Math.floor(Math.random()*(100-50)) + 50
        );
    }
    $(".finders_keepers_array").text(finders_keepers_array);

    for (let i=0; i<finders_keepers_array.length; ++i) {
        if (condition(finders_keepers_array[i])==0) {
            condition_met = i;
            break;
        }
    }

    if (condition_met!=-1) {
        $(".finders_keepers_output").text(`first number to satisfy test is "${finders_keepers_array[condition_met]}" at position number "${condition_met+1}"`);
    } else {
        $(".finders_keepers_output").text(`none of the elements pass the test`);
    }
});
</script>

<hr /><hr />
<h3>boolean primitive or not</h3>
<input type="text" name="boolean_primitive_input" id="boolean_primitive_input" placeholder="write a boolean primitive 'true/false'" style="width: 300px; height: 25px; padding: 3px;" />
<br /><br />
<input type="button" id="boolean_primitive_button" value="click here to check inserted value is boolean primitive or not" />
<br /><br />
output: <label class="boolean_primitive_output"></label>
<script>
$(document).ready(function(){
    $(document).on("click", "#boolean_primitive_button", function(){
        let inserted_value = ($("#boolean_primitive_input").val()).trim();
        if (inserted_value!=="true" && inserted_value!=="false") {
            $(".boolean_primitive_output").text(`"${inserted_value}" is not a boolean primitive`);
        } else if (inserted_value==="true" || inserted_value==="false") {
            $(".boolean_primitive_output").text(`"${inserted_value}" is a a boolean primitive`);
        }
    });
});
</script>

<hr /><hr />
<h3>first char title case</h3>
<input type="text" name="title_case_input" id="title_case_input" placeholder="write your text here" style="width: 500px; height: 25px; padding: 3px;" />
<br /><br />
<input type="button" name="title_case_button" id="title_case_button" value="click here to convert" />
<br /><br />
output: 
<div class="title_case_output" style="height: 50px; overflow: scroll; background-color: #eee;"></div>
<script>
$(document).ready(function(){
    console.log("ready for title case");

    $(document).on("click", "#title_case_button", function(){
        // console.log("clicked");
        let the_string = $("#title_case_input").val();
        if (the_string.length==0) {
            return;
        }
        let string_array = the_string.split(" ");
        console.log(the_string,string_array);
        let new_string = "";
        for (let i=0; i<string_array.length; ++i) {
            let split_word = string_array[i].split("");
            for (let j=0; j<split_word.length; ++j) {
                if (j==0) {
                    new_string += split_word[j].toUpperCase();
                } else {
                    new_string += split_word[j].toLowerCase();
                }
            }
            new_string += " ";
        }
        $(".title_case_output").text(new_string);
    });
});
</script>

<hr /><hr />
<h3>Slice and Splice</h3>
array 1: ["claw", "tentacle"]
<br />
array 2: ["head", "shoulders", "knees", "toes"]
<br />
index: 2
<br />
output [add array 1 in array 2 at index 2 without changing the original arrays]: <label class="slice_splice_output"></label>
<script>
$(document).ready(function(){
    console.log("a2rp: Slice and Splice");
    let array_1 = [1,2,3];
    array_1 = ["claw", "tentacle"];
    let array_2 = [4,5];
    array_2 = ["head", "shoulders", "knees", "toes"];
    let index = 1;
    index = 2;
    // index = Math.floor(Math.random()*(array_1.length-0))+0;
    // array_1.splice(1,0,array_2);
    // console.log(array_1);
    let new_array = array_2.slice(0,array_2.length);
    // console.log(new_array);
    new_array.splice(2,0,...array_1);
    // console.log(array_1,array_2,new_array);
    $(".slice_splice_output").html(`<br />array_1: ${array_1}<br />array_2: ${array_2}<br />new_array: ${new_array}`);
});
</script>

<hr /><hr />
<h3>check for falsy values</h3>
6 falsy values in javascript:: 
<ul>
    <li><b>false</b></li>
    <li><b>null</b></li>
    <li><b>0</b></li>
    <li><b>""</b></li>
    <li><b>undefined</b></li>
    <li><b>NaN</b></li>
</ul>
<pre>
    let falsy_array = [1, false, 2, null, 3, 0, 4, "", 5, undefined, 6, NaN];

    console.log(`before removing falsy values the array is:: ${falsy_array} with length: ${falsy_array.length}`);
    // before removing falsy values the array is:: 1,false,2,,3,0,4,,5,,6,NaN with length: 12
    for (let i=0; i<falsy_array.length; ++i) {
        if (!falsy_array[i]) {
            falsy_array.splice(i,1);
        }
    }
    console.log(`after removing falsy values the array is:: ${falsy_array} with length: ${falsy_array.length}`);
    // basic_algorithm_scripting.html:492 after removing falsy values the array is:: 1,2,3,4,5,6 with length: 6
</pre>
<script>
$(document).ready(function(){
    console.log("ready for falsy values");
    let falsy_array = [1, false, 2, null, 3, 0, 4, "", 5, undefined, 6, NaN];

    console.log(`before removing falsy values the array is:: ${falsy_array} with length: ${falsy_array.length}`);
    // before removing falsy values the array is:: 1,false,2,,3,0,4,,5,,6,NaN with length: 12
    for (let i=0; i<falsy_array.length; ++i) {
        if (!falsy_array[i]) {
            falsy_array.splice(i,1);
        }
    }
    console.log(`after removing falsy values the array is:: ${falsy_array} with length: ${falsy_array.length}`);
    // basic_algorithm_scripting.html:492 after removing falsy values the array is:: 1,2,3,4,5,6 with length: 6
});
</script>

<hr /><hr />
<h3>search for index position of insertion</h3>
<script>
$(document).ready(function(){
    console.log("get index position");
    let [array_1,number] = [[1,2,3,4], 1.5]; // "1.5" should be inserted at index position "1"
    [array_1,number] = [[20,3,5], 19]; // "19" should be inserted at index position "2"
    [array_1,number] = [[10, 20, 30, 40, 50], 35]; // "35" should be inserted at index position "3"
    [array_1,number] = [[40, 60], 50]; // "50" should be inserted at index position "1"
    [array_1,number] = [[3, 10, 5], 3]; // "3" should be inserted at index position "1"
    [array_1,number] = [[5, 3, 20, 3], 5];// "5" should be inserted at index position "2"
    [array_1,number] = [[2, 20, 10], 19]; // "19" should be inserted at index position "2"
    [array_1,number] = [[2, 5, 10], 15]; // "15" should be inserted at index position "0"
    [array_1,number] = [[], 1]; // "1" should be inserted at index position "0"
    console.log(`before sorting array = ${array_1}`);
    for (let i=0; i<array_1.length; ++i) {
        for (j=i; j<array_1.length; ++j) {
            if (array_1[i]>array_1[j]) {
                let temp  = array_1[i];
                array_1[i] = array_1[j];
                array_1[j] = temp;
            }
        }
    }
    console.log(`after sorted array = ${array_1}`);
    let index_position = 0;
    for (let i=0; i<array_1.length; ++i) {
        if (number>=array_1[i] && number<=array_1[i+1]) {
            index_position = i+1;
            break;
        }
    }
    console.log(`"${number}" should be inserted at index position "${index_position}"`);
});
</script>

<hr /><hr />
<h3>Mutations</h3>
<ul>
    <li>["hello", "Hello"]:: expected <b>true</b> [output:: "Hello" is in "hello":: <b>true</b></li>
    <li>["hello", "hey"]:: expected <b>false</b> [output:: "y" is missing "hey" in "hello":: <b>false</b>]</li>
    <li>["Alien", "line"]:: expected <b>true</b> [output:: "line" is in "Alien":: <b>true</b>]</li>
    <li>["zyxwvutsrqponmlkjihgfedcba", "qrstu"]:: expected <b>true</b> [output:: "qrstu" is in "zyxwvutsrqponmlkjihgfedcba":: <b>true</b>]</li>
    <li>["Mary", "Army"]:: expected <b>true</b> [output:: "Army" is in "Mary":: <b>true</b>]</li>
    <li>["Mary", "Aarmy"]:: expected <b>true</b> [output:: "Aarmy" is in "Mary":: <b>true</b>]</li>
    <li>["floor", "for"]:: expected <b>true</b> [output:: "for" is in "floor":: <b>true</b>]</li>
    <li>["hello", "neo"]:: expected <b>false</b> [output:: "n" is missing "neo" in "hello":: <b>false</b>]</li>
    <li>["voodoo", "no"]:: expected <b>false</b> [output:: "n" is missing "no" in "voodoo":: <b>false</b>]</li>
    <li>["ate", "date"]:: expected <b>false</b> [output:: "d" is missing "date" in "ate":: <b>false</b>]</li>
    <li>["Tiger", "Zebra"]:: expected <b>false</b> [output:: "Z" is missing "Zebra" in "Tiger":: <b>false</b>]</li>
    <li>["Noel", "Ole"]:: expected <b>true</b> [output:: "Ole" is in "Noel":: <b>true</b>]</li>
</ul>
output:: <label class="mutations_output"></label>
<script>
$(document).ready(function(){
    let [array_1, array_2] = ["Noel", "Ole"];
    let [array_11, array_22] = [array_1, array_2];
    console.log(array_1,array_2);
    let missing_char = "";
    for (let i=0; i<array_2.length; ++i) {
        if (array_1.includes(array_2[i].toLowerCase())==false && array_1.includes(array_2[i].toUpperCase())==false) {
            missing_char = array_2[i];
            break;
        }
        // console.log(`${array_2[i].toUpperCase()} ${array_2[i].toLowerCase()} ${array_1.indexOf(array_2[i].toUpperCase()==-1)} ${array_1.indexOf(array_2[i].toLowerCase()==-1)}`);
    }
    if (!missing_char) {
        $(".mutations_output").html(`"${array_22}" is in "${array_11}":: true`);
    } else {
        $(".mutations_output").html(`"${missing_char}" is missing "${array_22}" in "${array_11}":: false`);
    }
});
</script>

<hr /><hr />
<h3>one dimensional to two dimensional</h3>
<ul>
    <li>["a", "b", "c", "d"], 2) should return [["a", "b"], ["c", "d"]] {output:: it becomes "[["a","b"],["c","d"]]"}</li>
    <li>[0, 1, 2, 3, 4, 5], 3) should return [[0, 1, 2], [3, 4, 5]] {output:: it becomes "[[0,1,2],[3,4,5]]"}</li>
    <li>[0, 1, 2, 3, 4, 5], 2) should return [[0, 1], [2, 3], [4, 5]] {output:: it becomes "[[0,1],[2,3],[4,5]]"}</li>
    <li>[0, 1, 2, 3, 4, 5], 4) should return [[0, 1, 2, 3], [4, 5]] {output:: it becomes "[[0,1,2,3],[4,5]]"}</li>
    <li>[0, 1, 2, 3, 4, 5, 6], 3) should return [[0, 1, 2], [3, 4, 5], [6]] {output:: it becomes "[[0,1,2],[3,4,5],[6]]"}</li>
    <li>[0, 1, 2, 3, 4, 5, 6, 7, 8], 4) should return [[0, 1, 2, 3], [4, 5, 6, 7], [8]] {output:: it becomes "[[0,1,2,3],[4,5,6,7],[8]]"}</li>
    <li>[0, 1, 2, 3, 4, 5, 6, 7, 8], 2) should return [[0, 1], [2, 3], [4, 5], [6, 7], [8]] {output:: it becomes "[[0,1],[2,3],[4,5],[6,7],[8]]"}</li>
</ul>
output:: <label class="oned_twod_output"></label>
<script>
$(document).ready(function(){
    console.log("one dimensional to two dimensional");

    let array_1 = ["a", "b", "c", "d"];
    array_1 = []; array_1 = [0, 1, 2, 3, 4, 5];
    array_1 = []; array_1 = [0, 1, 2, 3, 4, 5];
    array_1 = []; array_1 = [0, 1, 2, 3, 4, 5];
    array_1 = []; array_1 = [0, 1, 2, 3, 4, 5, 6];
    array_1 = []; array_1 = [0, 1, 2, 3, 4, 5, 6, 7, 8];
    array_1 = []; array_1 = [0, 1, 2, 3, 4, 5, 6, 7, 8];

    let sub_divisions = 2;
    sub_divisions = 3;
    sub_divisions = 2;
    sub_divisions = 4;
    sub_divisions = 3;
    sub_divisions = 4;
    sub_divisions = 2;

    const new_array_new = [];
    while(array_1.length) new_array_new.push(array_1.splice(0,sub_divisions));
    console.log(new_array_new);
    $(".oned_twod_output").html(` it becomes "${JSON.stringify(new_array_new)}"`);
 });
</script>

</div>





<style>
    body {
        font-family: Consolas, Monaco, "Courier New", monospace; font-size: 11px;
    }
    pre {
        white-space: pre-wrap;       /* Since CSS 2.1 */
        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        word-wrap: break-word;       /* Internet Explorer 5.5+ */
        background-color: #eee;
        padding: 15px;
        border-radius: 5px;
    }
</style>

<script type="text/javascript" src="jQuery_v3.6.0.js"></script>
<div style="font-family: Consolas, monospace; font-size: 11px;">

<h1>Object Oriented Programming</h1>
<hr /><hr />

<h3>Object</h3>
Objects are tangible things people can observe and interact with. 
These qualities, or properties, define what makes up an object. 
Note that similar objects share the same properties, but may have different values for those properties.

<script type="text/javascript">
$(document).ready(function(){
    console.log("a2rp: object oriented programming");
    let object_1 = {
        name: "Ashish Ranjan",
        date: "April 26, 2022"
    };
    console.log(object_1); // {name: 'Ashish Ranjan', date: 'April 26, 2022'}
});
</script>
<pre>
    let object_1 = {
        name: "Ashish Ranjan",
        date: "April 26, 2022"
    };
    console.log(object_1); // {name: 'Ashish Ranjan', date: 'April 26, 2022'}
</pre>

<hr /><hr />
<h3>access objects</h3>
<hr /><hr />
<script type="text/javascript">
$(document).ready(function(){
    console.log("access object properties");
    let object_1 = {
        name: "Ashish Ranjan",
        date: "April 26, 2022"
    };
    console.log(`name: ${object_1.name} and date: ${object_1.date}`); // name: Ashish Ranjan and date: April 26, 2022
});
</script>
<pre>
    let object_1 = {
        name: "Ashish Ranjan",
        date: "April 26, 2022"
    };
    console.log(`name: ${object_1.name} and date: ${object_1.date}`); // name: Ashish Ranjan and date: April 26, 2022
</pre>

<hr /><hr />
<h3>method of an object</h3>
<hr /><hr />
<script type="text/javascript">
$(document).ready(function(){
    let object_1 = {
        name: "Ashish Ranjan",
        date: "April 26, 2022",
        get_data: function() { return `function inside object: name: ${object_1.name} and date: ${object_1.date}`; },
    };
    console.log(`object_1.get_data():: ${object_1.get_data()}`); // object_1.get_data():: function inside object: name: Ashish Ranjan and date: April 26, 2022
});
</script>
<pre>
    let object_1 = {
        name: "Ashish Ranjan",
        date: "April 26, 2022",
        get_data: function() { return `function inside object: name: ${object_1.name} and date: ${object_1.date}`; },
    };
    console.log(`object_1.get_data():: ${object_1.get_data()}`); // object_1.get_data():: function inside object: name: Ashish Ranjan and date: April 26, 2022
</pre>

<hr /><hr />
<h3>this keyword</h3>
<hr /><hr />
<script type="text/javascript">
$(document).ready(function(){
    let object_1 = {
        first_name: "Ashish",
        last_name: "Ranjan",
        get_data: function() { return `first_name: ${this.first_name} and last_name: ${this.last_name}`; },
    };
    console.log(`object_1 returns from function: ${object_1.get_data}`); // object_1 returns from function: function() { return `first_name: ${this.first_name} and last_name: ${this.last_name}`; }
});
</script>
<pre>
    let object_1 = {
        first_name: "Ashish",
        last_name: "Ranjan",
        get_data: function() { return `first_name: ${this.first_name} and last_name: ${this.last_name}`; },
    };
    console.log(`object_1 returns from function: ${object_1.get_data}`); // object_1 returns from function: function() { return `first_name: ${this.first_name} and last_name: ${this.last_name}`; }
</pre>

<hr /><hr />
<h3>constructors</h3>
<hr /><hr />
Constructors are functions that create new objects. 
They define properties and behaviors that will belong to the new object. 
They are a blueprint for the creation of new objects.
<script>
$(()=>{
    function constructor_function() {
        this.first_name = "Ashish";
        this.last_name = "Ranjan";
    }
});
</script>
<pre>
    function constructor_function() {
        this.first_name = "Ashish";
        this.last_name = "Ranjan";
    }
</pre>

<hr /><hr />
<h3>create objects with constructors</h3>
<hr /><hr />
<script type="text/javascript">
$(()=>{
    console.log("create objects with constructors");

    function constructor_function() {
        this.name = "Ashish Ranjan";
        this.date = "April 26, 2022";
        this.get_data = ()=>{return `this.name: ${this.name} and thie.date: ${this.date}`};
    }
    let test_variable = new constructor_function();
    test_variable.name = "new name";
    console.log(`object values are: ${test_variable.get_data()}`); // object values are: this.name: new name and thie.date: April 26, 2022
});
</script>
<pre>
    function constructor_function() {
        this.name = "Ashish Ranjan";
        this.date = "April 26, 2022";
        this.get_data = ()=>{return `this.name: ${this.name} and thie.date: ${this.date}`};
    }
    let test_variable = new constructor_function();
    test_variable.name = "new name";
    console.log(`object values are: ${test_variable.get_data()}`); // object values are: this.name: new name and thie.date: April 26, 2022
</pre>

<hr /><hr />
<h3>constructors receive arguments</h3>
<hr /><hr />

<script type="text/javascript">
$(()=>{
    function constructor_arguments(first_name,last_name) {
        this.first_name = first_name;
        this.last_name = last_name;
    }
    let variable_1 = new constructor_arguments("Ashish","Ranjan");
    let variable_2 = new constructor_arguments("first_name","second_name");
    console.log(`variable 1 first name: ${variable_1.first_name} second name: ${variable_1.last_name}`); // variable 1 first name: Ashish second name: Ranjan
    console.log(`variable 2 first name: ${variable_2.first_name} second name: ${variable_2.last_name}`); // variable 2 first name: first_name second name: second_name
});
</script>
<pre>
    function constructor_arguments(first_name,last_name) {
        this.first_name = first_name;
        this.last_name = last_name;
    }
    let variable_1 = new constructor_arguments("Ashish","Ranjan");
    let variable_2 = new constructor_arguments("first_name","second_name");
    console.log(`variable 1 first name: ${variable_1.first_name} second name: ${variable_1.last_name}`); // variable 1 first name: Ashish second name: Ranjan
    console.log(`variable 2 first name: ${variable_2.first_name} second name: ${variable_2.last_name}`); // variable 2 first name: first_name second name: second_name
</pre>

<hr /><hr />
<h3>instanceof operator</h3>
<hr /><hr />
<script type="text/javascript">
$(()=>{
    let object_1 = (full_name,color) => {
        this.full_name = full_name;
        this.date = date;
    };
    let object_2 = (first_name,last_name) => {
        this.first_name = first_name;
        this.last_name = last_name;
    };
    let variable_1 = new object_1("Ashish Ranjan", "April 06, 2022");
    let variable_2 = new object_2("Ashish","Ranjan");
    console.log(`variable_1 instance of object_1:: ${variable_1 instanceof object1}`);
    console.log(`variable_2 instance of object_1:: ${variable_2 instanceof object1}`);
    console.log(`variable_1 instance of object_2:: ${variable_1 instanceof object2}`);
    console.log(`variable_2 instance of object_2:: ${variable_2 instanceof object2}`);
});
</script>


</div>