The Code for Race to 100
//get the values from the page
//program starts here, controller function
function getValues(){
//get values from the page
let startValue = document.getElementById("startValue").value;
let endValue = document.getElementById("endValue").value;
//parse into Integers
startValue = parseInt(startValue);
endValue = parseInt(endValue);
//check that inputs are integers
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 start value to the end value
//logic function
function generateNumbers(startValue, endValue){
let numbers = [];
//get all numbers from start to end
for(let i = startValue; i <= endValue; i++){
numbers.push(i);
}
return numbers;
}
//display the numbers, mark even numbers in bold
//display or view function
function displayNumbers(numbers){
let templateRows = "";
for (let index = 0; index < numbers.length; index++) {
let className = "even";
let number = numbers[index];
if (number % 2 == 0) {
className = "even";
} else {
className = "odd";
}
//This does not render correctly with Prism
//See the Source code
templateRows += `${number} `;
}
document.getElementById("results").innerHTML = templateRows;
}
The Code is structured in three functions.
Get Values
Get Values is a function that retrieves the numbers from the user input and checks that they are integers.
If the input is not an integer set, the function produces an error message. If the input is an integer set,
the function will call the Generate Numbers and Display Numbers functions.
Generate Numbers
Generate Numbers is a function that adds each of the values between the input values to an array. The returned array
contains all values between the input values, inclusive of the initial start and end values.
Display Numbers
Display Numbers is the logic function. It runs a for loop that contains boolean logic to check if each
number is even or odd. It uses template literals to pass these values back to the HTML table.