The Code for Hundo
// get the values from the Page
function getValues() {
let startValue = document.getElementById('startValue').value;
let endValue = document.getElementById('endValue').value;
//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 a number')
}
}
// generate numbers from the start value to the end value
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 and mark even numbers bold
function displayNumbers (numbers) {
let className = "even"
let templateRows = "";
for (let i = 0; i < numbers.length; i++) {
let number = numbers[i];
if(number % 2 == 0) {
className = "even"
} else {
className = "odd";
}
// This does render correctly with Prism see the source
templateRows += `<tr><td class="${className}" >${number}</td></tr>`
}
document.getElementById("results").innerHTML = templateRows;
}
The Code is structered in three functions.
getValues
getValues accepts(gets) the user input from the page. It utilizes getElementById to pull the vallues from the page. It passes those values to the generateNumbers function. The fuction generateNumbers returns an array of values and passes that array to the displayNumbers function.
generateNumbers
generateNumbers takes in two parameters startValue and endValue. We create a variable (numbers) that holds an array. A for loop is to generate all of the numbers between startValue and endValue.
displayNumbers
displaynumbers takes in one parameter numbers. The variable numbers is an array that holds values between startValue and endValue.
We create a variable (className) that holds the name of a CSS class that we will use to bold the numbers. We create a variable templateRows that will hold the html we will write to the page.
A for loop is used to check all of the numbers to see if they are even or odd. The remainder operator (%) is used to see if the number is divisable by two. If it returns zero than it's even. if not (else) it's odd.
The correct className is injected into the html row for display. Each interation of the lop adds to the templateRows variable. At the end of the loop resulting HTML rows are written to the page.