The Code
//display a message to the user
function getValues(){
//declare the required variables
let startValue = 0;
let endValue = 100;
//get the numbers from the UI
startValue=document.getElementById("startValue").value;
endValue=document.getElementById("endValue").value;
//Validate our numbers
startValue = parseInt(startValue);
endValue = parseInt(endValue);
//check to see both values are numbers
if(Number.isInteger(startValue) && Number.isInteger(endValue)){
//both numbers are integers
//
let numbers = generateNumbers(startValue, endValue);
displayNumbers(numbers);
}else{
//one or more are not
Swal.fire("Please enter only integers 1, 2, 3, etc. NOT 1.5, 2/3, Cat");
}
}
//generate numbers from startValue to endValue
function generateNumbers(sValue, eValue){
//0,1,2,3, etc
let numbers = [];
//Loop over the numbers until we hit the end value
for (let index = sValue; index <= eValue; index++) {
//Add numbers to array
numbers.push(index);
}
return numbers;
}
//displays the numbers
function displayNumbers(numbers){
//0 first index value
//99 last index value
//length = 100
let endIndex = numbers.length;
let tableBody = document.getElementById("results");
//Clear out previous results
tableBody.innerHTML = "";
for (let index = 0; index < endIndex; index++) {
let tableRow = "";
//get the actual number
let number = numbers[index];
if(number % 2 == 0){
//the number is even
tableRow = `<tr><td class="evenDisplay">${number}</td></tr>`
} else{
//the number is odd
tableRow = `<tr><td>${number}</td></tr>`
}
tableBody.innerHTML += tableRow;
}
}
The Code is structured in three functions
GetValues
GetValues is the controller function. It pulls the user numbers from the UI and converts them to integers, if able. If the values cannot be parsed, an alert pops up to make sure only integer values are entered.
If both values entered are integers, the functions generateNumbers and displayBeji are run.
GenerateNumbers
GenerateNumbers is the logic function. It takes in the user values as start and end values. It initializes an empty array into a numbers variable.
A for loop runs that pushes each index value into the numbers array.
generateNumbers returns the numbers array.
DisplayBenji
A for loop looping through the numbers array initializes a number variable that stores the value of each numbers array element. It checks if the current element is even using an if-else statement.
If the value, evaluted using a modulus, is even, an evenDisplay class is added bolding and coloring the value printed. If the value is odd no class is added. At the end of the loop, a new tableRow is appended to the tableBody.