The Code

function getValues() {

    // get the Blossom Value input
    let blossomValue = document.getElementById('blossomValue').value; // gets value as a string

    // get the Buds Value input
    let budsValue = document.getElementById('budsValue').value; // gets value as a string

    // get the Start Value input
    let startValue = document.getElementById('startValue').value; // gets value as a string

    // get the Stop Value input
    let stopValue = document.getElementById('stopValue').value; // gets value as a string

    // change all string inputs to numbers
    blossomValue = parseInt(blossomValue);
    budsValue = parseInt(budsValue);
    startValue = parseInt(startValue);
    stopValue = parseInt(stopValue);

    // check if inputs recieved are what is expected
    if ( Number.isInteger(blossomValue) && Number.isInteger(budsValue)
        && Number.isInteger(startValue) && Number.isInteger(stopValue)
        && startValue <= stopValue && startValue >= -9999
        && stopValue <= 9999 ) {

        // get generated values based on inputs
        let generatedValues = generateValues(blossomValue, budsValue, startValue, stopValue);

        displayValues(generatedValues);

    } else {
        // Something is wrong
        Swal.fire ({
            icon: 'error',
            backdrop: false,
            title: 'Oops!',
            text: 'Please enter valid integers, with a Stop Value less than \
            the Start Value. Start and Stop Values can only be between and \
            including -9,999 and 9,999.',
            confirmButtonColor: '#cd6a6a'
        });
    }
}

// generate values based on the input from user
function generateValues(blossomValue, budsValue, startValue, stopValue) {

    // declare variable to hold generated values
    let generatedValues = [];

    // generate values from stopValue to startValue
    for (let n = startValue; n <= stopValue; n++) {

        // check each value
        // if value is a multiple of blossomValue and budsValue
        if (n % blossomValue == 0 && n % budsValue == 0) {
            // add "BlossomBuds" to the array
            generatedValues.push('BlossomBuds');

        // if value is a multiple of blossomValue
        } else if ( n % blossomValue == 0) {
            // add "Blossom" to the array
            generatedValues.push('Blossom');

        // if value is a multiple of budsValue
        } else if ( n % budsValue == 0 ) {
            // add "Buds" into array
            generatedValues.push('Buds');

        } else {
            // value into array
            generatedValues.push(n);
        }
    }
    return generatedValues;
}

// display values back to user
function displayValues(generatedValues) {

    // declare variable to hold content to be displayed
    let blossomBudsHtml = '';

    // Add each generated value with html needed to make cols to blossomBudsHtml
    for (let i = 0; i < generatedValues.length; i++) {

        // declare variable for styling element as needed
        let styleClass = '';

        // if value is 'BlossomBuds' assign class 'blossom-buds'
        if ( generatedValues[i] == 'BlossomBuds') {
            styleClass = 'blossom-buds';
            generatedValues[i] = `<span>Buds</span><i class="bi bi-flower3"></i>`;

        // if value is 'Blossom' assign class 'blossom'
        } else if ( generatedValues[i] == 'Blossom' ) {
            styleClass = 'blossom';
            generatedValues[i] = `<i class="bi bi-flower3"></i>`;

            // if value is 'Buds' assign class 'buds'
        } else if ( generatedValues[i] == 'Buds' ) {
            styleClass = 'buds';

        // for everything else assign class 'number'
        } else {
            styleClass = 'number';
        }

        blossomBudsHtml += `<div class="col-1 mx-1 d-flex justify-content-center \
                            align-items-center ${styleClass}">${generatedValues[i]}</div>`;
    }
    // reassign contents of HTML to generatedValues with HTML accordingly
    document.getElementById('results').innerHTML = blossomBudsHtml;
}
JavaScript

TL;DR

In order to check for multiple cases where one of the cases is an instance where two of the other cases are true, that case needs to be checked first in an if-else statement.

Code Explanation

Blossom Buds was created with the following three functions.

getValues kicks everything off. When the "Blossom Buds!" button is pressed, it grabs the inputs from the user by accessing the DOM, and changes the data type of each input to integer. It also uses an if-else statement with boolean logic to check if the inputs are what is expected. If the inputs are good, it continues to execute generateValues and displayValues. If not, a sweetalert is displayed notifying the user something is wrong with the inputs.

generateValues uses a for loop to push values into an array based on the user input for the Start and Stop Values. An if-else statement inside the loop is used to determine the value that should be pushed to the array based on the user input for the Blossom and Bud Values. The statement checks first if a number is divisible by the "Blossom Value" and the "Buds Value". If the number is not divisible by both values then the if-else statement goes on to check each individually. If the "Buds Value" and "Blossom Value" were checked before checking both values at the same time, it would never get to check if both cases are true. This function returns the final array with generated values.

displayValues uses a for loop to string together the HTML needed to display the generated values back to the user. An if-else statement inside the loop is used to determine what CSS class should be added to each HTML string. Once the HTML block is created, with some DOM manipulation the HTML block onto the page for the user to see.

What I learned

  • Be clear about the purpose of the variable
  • If you use innerHTML to get the contents of an element and assign it to a variable, you will need to reassign it back to the DOM otherwise you're just replacing the string in the variable you retrieved with another string

Improvements

  • Use vanilla CSS with flex box instead of Bootstrap rows and cols for the results
  • Check to see if there is another way to display the blossoms bloooming on mobile where the user can see the blossoms blooming over and over again