// Get values from the user. We need to get the yin and the yang value.
// Starts or controller function
function getValues() {

    // Get the user values from the page
    let yinValue = document.getElementById("yinValue").value;
    let yangValue = document.getElementById("yangValue").value;

    // We neet to validate our input
    // Parse into Integers
    yinValue = parseInt(yinValue);
    yangValue = parseInt(yangValue);

    // Check that the numbers are integers
    if(Number.isInteger(yinValue) && Number.isInteger(yangValue)) {

        // We call yinyang
        let yyArray = yinYang(yinValue, yangValue);

        //  Call displayData and write the values to the screen
        displayData(yyArray);

    } else {
        alert("You must enter integers");
    }
}

// Do Yin Yang
// Generate numbers from yinValue to the yangValue
// Logic Functions
function yinYang(yinValue, yangValue) {

    //init the return array
    let returnArray = [];

    // Loop from 1 to 100
    for (let index = 1; index <= 100; index++) {
        
        // Check to see if divisible by both (3 and 5)
        // Check to see if divisible by yin value (3)
        // Check to see if divisible by yang value (5)
        if(index % yinValue == 0 && index % yangValue == 0) {
            returnArray.push("YinYang");
        } else if (index % yinValue == 0){
            returnArray.push("Yin");
        } else if (index % yangValue == 0){
            returnArray.push("Yang");
        } else {
            returnArray.push(index);
        }
    }
    return returnArray;
}


// Display the numbers from start to end. Mark Yin, Yang and Yin Yang.
// Loop over the array and create a tablerow for each item.
function displayData(yyArray) {

    // Get the table body element from the page
    let tableBody = document.getElementById("results");

    // Get the template row
    let templateRow = document.getElementById("yyTemplate");

    // Clear table first
    tableBody.innerHTML = "";

    for (let index = 0; index < yyArray.length; index += 5) {
        
        let tableRow = document.importNode(templateRow.content, true)

        // Grab just the td and put them into an array
        let rowCols = tableRow.querySelectorAll("td");
        rowCols[0].classList.add(yyArray[index]);
        rowCols[0].textContent = yyArray[index];

        rowCols[1].classList.add(yyArray[index + 1]);
        rowCols[1].textContent = yyArray[index+1];

        rowCols[2].classList.add(yyArray[index + 2]);
        rowCols[2].textContent = yyArray[index+2];

        rowCols[3].classList.add(yyArray[index + 3]);
        rowCols[3].textContent = yyArray[index + 3];

        rowCols[4].classList.add(yyArray[index + 4]);
        rowCols[4].textContent = yyArray[index + 4];

        tableBody.appendChild(tableRow);
    }
}
                        
                    

This program accepts a starting number and an ending number from the user. It then checks the divisibility of the entered numbers. If the number is divisible by the first number, it prints Yin. If the number is divisible by the second number, it prints Yang. If the number is divisible by both numbers, then it prints YinYang. The Yin, Yang, and YinYang are colored in output using the css.

This program is done using the following functions:

getValues()

This function gets the values from the document object model. It then converts the values into integers. If they are not integers it alerts the user.

yinYang()

This function checks for divisbility. It uses a for loop to check the index value for divisbility by the values entered and appends the number if they are not. It appends "Yin" if the number is divisible by the first value. It appends "Yang" if the number is divisble by the second value. If the number is divisible by both values then it appends "YinYang".

displayData()

This function gets a premade template from the app.html document and loads the array of values returned from yinYang(). It then adds them to the table five per row and colors them using CSS selectors.