Blossom Buds: A Fizz Buzz Challenge

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.

CHECK OUT THE APP >> HERE <<!

 

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 blooming on mobile where the user can see the blossoms blooming over and over again