///INITIATION:

  //Program Entry points
  function getValues2() {
  let startValue = document.getElementById("startValue").value;
  let endValue = document.getElementById("endValue").value;

  //VALIDATION:
  startValue = parseInt(startValue);
  endValue = parseInt(endValue);

  //check to see if input is integer
  if (Number.isInteger(startValue) && Number.isInteger(endValue)) {
  //generate list of numbers
  let numbers = generateNumbers(startValue, endValue);
  displayNumbers(numbers);
  } else {
  Swal.fire({
  icon: "error",
  title: "oops",
  text: "only integers are allowed for JS Speedway"
  })
  }
  }
  //LOGIC:
  function generateNumbers(start, end) {
  let numbers = [];
  for (let index = start; index <= end; index++) {
    numbers.push(index);
  }
  return numbers;
}
//DISPLAY:
function displayNumbers(numbers) {
  let templateRows="" ;
  let className="even" ;
  for (let index=0; index < numbers.length; index++) {
      let number=numbers[index];
      if (number % 2===0) {
      className="even" ;
    } else {
    className="odd" ;
   }
   let row=`${number}`;
    templateRows += row;
    }
    document.getElementById("results").innerHTML = templateRows;
    }

The code is structured in three functions.

.JS Speedway

.JS Speedway is a simple program looping input integers and displaying them to the page. Even numbers are bolded.

Brief code overview:

• Initiation:
  • event listener (located in the bottom <script> tag) is triggered by a "click" on the "submit" button.
  
  
  • Inputs from the two user fields ("Start Value" and "End Value") are passed into the "Get Values" function.
  
  
• Validation:
  • Inputs are checked to make certain they are integers (numbers) and not strings.
  
  
  • If inputs are numbers treated as strings, the program parses them to integers.
  
  
  • If inputs are text, the system will alert the user, "Only integers are allowed for JS Speedway."
  
  
• Logic:

  Within the "Generate Numbers" function, the following processes occur:

  • the "numbers" array is created
  
  
  • the "for" loop passes the start value and increments the number by one.
  
  
  • the produced number is pushed to the "numbers" array.
  
  
  • Meanwhile, produced numbers are re-introduced into the loop until the incremented number is equal to the End Value.
  
  
  • the function returns the "numbers" array.
  
  

• Display:
  • Inside the "for" loop:
  
  
  • A boolean tests each number in the "numbers" array by dividing each number by 2 to determine whether the number is even.
  
  
  • Numbers testing "true" are bolded.
  
  
  • Numbers testing "false" are not bolded.
  
  
  • "Template Rows" variable injects the "Number" variable (from the "Display Numbers" function) into the template literal.
  
  
  • Finally, "Template Rows" are published to the HTML via the "results" class.