The Code
function getValues() {
let startValue = document.getElementById("startValue").value;
let endValue = document.getElementById("endValue").value;
let startNumber = parseInt(startValue);
let endNumber = parseInt(endValue);
let numberArray = generateNumbers(startNumber, endNumber);
displayNumbers(numberArray);
}
function generateNumbers(start, end) {
let basketOfNumbers = [];
//loop!
for (let number = start; number <= end; number++) {
basketOfNumbers.push(number);
}
return basketOfNumbers;
}
function displayNumbers(numbers) {
let results = "";
for (let index = 0; index < numbers.length; index = index + 1) {
let currentNumber = numbers[index];
if (currentNumber % 2 == 0) {
results += `<tr><td class="evenNumber">${currentNumber}</td></tr>`;
} else {
results += `<tr><td>${currentNumber}</td></tr>`;
}
}
let tableBody = document.getElementById("results");
tableBody.innerHTML = results;
}
Explanation:
getValues function is the entry point, AKA the controller function of the js file. Its purpose is to get the start and end values from the inputs. parseInt for both start and end values is an important step as it changes the numbers from number text to an actual numeric value for Javascript to interpret.
generateNumbers function generates the range of numbers to display, though it does not actually display the values yet. It is considered the logic of the function and incorporates a 'For' Javascript loop. The loop identifies the start and end value by indicating this in the parameters (), and runs based on the algorithm (let number = start; number <= end; number++) It will start at the first number, and end when the last number is less than or equal to the second number entered by the user. The number will increase based on the logic number++. Fun fact! number++ is short for 'number = number + 1'.
displayNumbers function places the generated numbers on the page. This function also includes the if/else statement to bold the even numbers. It states if the remainder (%) when divided by 2 is 0, it is considered an even number and will bold the numbers on the page. Else, when there is a remainder other than 0, it will display the numbers without the bold. The red color change was done through CSS using class="evenNumber".