The Code

Entry Point

function getValues() {
  // get an input element for startNumber and grab its value.
  let startNumber = document.getElementById('startNumber').value;

  // Do the same for endNumber
  let endNumber = document.getElementById('endNumber').value;

  // HTML strings need the data type converted to integers.
  // This is the constructor
  startNumber = Number(startNumber)
  endNumber = Number(endNumber)

  // Validate if the input values are numbers before continuing or run
  // error message.
  if (isNaN(startNumber) || isNaN(endNumber)) {
    // display an error message
    swal.fire({
      icon:'error',
      title: 'Oops!',
      backdrop: false,
      text: `Please enter a valid number for Unthink to work properly.`
    });
  } else {
    // run the function, passing the numbers, itll make an array
    // and itll pass back an array.
    let generatedNumbers = generateValues(startNumber, endNumber);
    displayValues(generatedNumbers);
  }
}
JavaScript

Generate the list of numbers

// generate a list of numbers between those 2 values
function generateValues(start, end) {
    let numbers = [];

    for (let i = start; i <= end; i = i + 1) {
        numbers.push(i);
    }

    return numbers;
}
JavaScript

Display on the UI

// display in results table
function displayValues(numberArray) {

    // placeholder for storing numberArray = [0,1,2,3,....]
    let tableHtml = '';

    for (let index = 0; index < numberArray.length; index = index + 1) {

        let number = numberArray[index];
        let className = '';

        // if number is even
        if (number % 2 == 0) {
            // write class 'even'
            className = 'even';
        } else {
            // write class 'odd'
            className = 'odd';
        }

        tableHtml += `${number}`;
    }

    // grab an HTML Element by ID and store in a let to prepare to change property
    let tbody = document.getElementById('results');
    // Change property of HTML element
    tbody.innerHTML = tableHtml;
}
JavaScript

Functions used:

getValues()
generateValues()
displayValues()

Logic used:

Entry Point - getValues()

The getValues function grabs the value from the input when the user pushes the button. These values are then changed from strings to integers, validated, then if valid are sent to generateValues to be turned into an array of numbers between the two values.

Create all the needed Number - generateValues()

The generateValues takes in the parameters from getValues and creates an array of ints of all the numbers between the two values passed as a parameter and then returns the new array to getValues to be then passed to displayValues.

Display Table on UI - displayValues()

The displayValues takes in the parameters from getValues and creates a string variable that is used to create an HTML table. That string is then used to display on the UI by writting to the InnerHTML property on the page.