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;
}
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
innerHTMLto 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