The Code for BeepBoop
function getValues() {
let firstValue = document.getElementById("firstValue").value;
let secondValue = document.getElementById("secondValue").value;
firstValue = parseInt(firstValue);
secondValue = parseInt(secondValue);
if (Number.isInteger(firstValue) && Number.isInteger(secondValue)) {
let numbers = [firstValue, secondValue];
return numbers;
}
}
function generateTable() {
let multiples = getValues();
let tableResult = document.getElementById("results")
let tableString = ""
let className = "noMultiple"
let beepBoopString = "beep"
for (index = 1; index <= 100; index++) {
if (index % multiples[0] == 0 && index % multiples[1] != 0) {
className = "firstMultiple";
beepBoopString = "beep";
} else if (index % multiples[1] == 0 && index % multiples[0] != 0) {
className = "secondMultiple";
beepBoopString = "boop";
} else if (index % multiples[1] == 0 && index % multiples[0] == 0) {
className = "bothMultiple";
beepBoopString = "beepboop";
} else {
className = "noMultiple";
beepBoopString = `${index}`;
}
tableString += `<tr><td class="${className}">${beepBoopString}</td></tr>`;
}
tableResult.innerHTML = tableString;
}
The Code is structed in two functions.
getValues()
getValues() retrieves the two multiples to be used when determining which part of the output should be replaced with strings. These values are returned a an array.
generateTable()
generateTable() calls getValues() and uses this array to determine which values from 0 to 100 are multiples of the input values. A table is dynamically generated where these multiples are replaced with "beep," "boop," or "beepboop" depending on whether the value is a multiple of one or both numbers.