The Code for BOLD
// get the values from the Page
// starts/controller function
function getValues() {
// get values from the page
let startValue = document.getElementById("startValue").value;
let endValue = document.getElementById("endValue").value;
// validate the input
// parse into Integers
startValue = parseInt(startValue);
endValue = parseInt(endValue);
if (Number.isInteger(startValue) && Number.isInteger(endValue)) {
// call generateNumbers
let numbers = generateNumbers(startValue, endValue);
// call displayNumbers
displayNumbers(numbers);
} else {
alert("You must enter integers.");
}
}
// generate numbers from startValue to the endValue
// logic function(s)
function generateNumbers(startValue, endValue) {
let numbers = [];
// get all numbers from start to end
for (let index = startValue; index <= endValue; index++) {
// this will execute in a loop until index = endValue
numbers.push(index);
}
return numbers;
}
// display the numbers and mark the even numbers bold
// display/view function
function displayNumbers(numbers) {
let templateRows = "";
for (let index = 0; index < numbers.length; index++) {
let className = "";
let number = numbers[index];
if (number % 2 === 0) {
className = "even";
} else {
className = "odd";
}
templateRows += `<tr><td class="${className}" >${number}</td></tr>
}
document.getElementById("results").innerHTML = templateRows;
}
The code is structured into three functions.
getValues
The getValues function is responsible for getting the values from the page and validating that the values are integers. If the values are integers the other two functions will be called. This function gets called when the button is clicked.
generateNumbers
The generateNumbers function is responsible for determining all of the numbers needed and returning the numbers as an array.
displayNumbers
The displayNumbers function is responsible for going through each number in the array, determining if the number is even or odd, and then inserting a table row with the number and the appropriate class name.