The Code for Hopskip Hundred
function getValues() {
let startValue = document.getElementById("startValue").value;
let endValue = document.getElementById("endValue").value;
startValue = parseInt(startValue);
endValue = parseInt(endValue);
if (Number.isInteger(startValue) && Number.isInteger(endValue)) {
let numbers = generateNumbers(startValue, endValue);
return numbers;
}
}
function generateNumbers(start, end) {
let numbers = [];
for (let index = start; index <= end; index++) {
numbers.push(index);
}
return numbers;
}
function generateTable() {
let numbers = getValues();
let tableResult = document.getElementById("results")
let tableString = ""
let className = "even"
for (index = numbers[0]; index <= numbers[numbers.length - 1]; index++) {
if (index % 2 == 0) {
className = "even";
} else {
className = "odd";
}
templateRows += `<tr><td class="${className}">${number}</td></tr>
}
tableResult.innerHTML = tableString;
}
The Code is structed in three functions.
getValues()
getValues() retrieves the start and end values for the Hopskip table as entered.
generateNumbers()
generateNumbers() creates an array of all integers between the start and end values (inclusive) for display in the table.
generateTable()
generateTable() dynamically writes HTML to display the range of values specified. The table is styled using Bootstrap 5.