The Code
// step 1: get the start and end numbers from the user (the input field)
function getValues() {
// get the inputs by their ID
let startValue = document.getElementById('startValue').value;
let endValue = document.getElementById('endValue').value;
// Convert the start and end values to numbers
startValue = parseInt(startValue);
endValue = parseInt(endValue);
// chek if the numbers are valid numbers
if (isNaN(startValue) || isNaN(endValue)) {
// tell the user to enter a valid number using sweet alert
Swal.fire({
icon: 'error',
title: 'Oops! Invalid number.',
text: 'Please enter a valid number for both start and end values.',
backdrop: false
});
} else if (startValue >= endValue) {
// tell the user it's wrong
Swal.fire({
icon: 'error',
title: 'Uh oh!',
text: 'Please enter a valid number for both start and end values.',
backdrop: false,
});
} else {
let values = generateNumbers(startValue, endValue);
displayNumbers(values);
}
}
// step 2: get all the numbers in the range
function generateNumbers(start, end) {
let numbers = [];
for (let number = start; number <= end; number += 1) {
numbers.push(number);
}
return numbers;
}
// step 3: put those numbers on the page
function displayNumbers(values) {
// - put the HTML on the page on the element with the result id
let resultsTable = document.getElementById('result');
// clear the innerHTML
resultsTable.innerHTML = '';
// for each number in values:
for (let i = 0; i < values.length; i++) {
// - create some html with the number
let number = values[i]
let html = '<tr><td>';
// - determine whether it should be bold
if (number % 2 == 0) {
html += '<b>' + number + '</b>';
} else {
html += number;
}
html += '</td></tr>';
resultsTable.innerHTML += html;
}
}
Let's talk about the code that produces the performer challenge result.
The code is divided into three steps that define the problem to be solved. We are programmers so our role is to try to dissect a problem and try to provide a solution that works. What should we solve? What approach will allow us to get there?
What we need to do is write a program that displays the numbers from 0 to 100 and display the even numbers in BOLD.
As far as I am concerned, I focused on three steps which will allow me to provide a solution.
- get the start and end numbers from the input field
- get all the numbers in the range
- put those numbers on the page
Functions and loop in action
getValues()
The getValues function receives in particular two values,
the starting value and the arriving value (startValue & endValue) and to receive these two values we use our famous getElementById,
from the document interface that represents any web page loaded in the browser, which returns an object reference to the identified element.
Knowing that the "input" field always returns characters better known in our field as "String",
we must convert these values into numeric values, and to do this, we use the JavaScript build-in function parseInt.
In this same function we must also validate these values, we would definitely not want a user to type anything into the fields, for this we use our input validation skill with an if statement and for the beauty of it we have the help of sweet alert in order to display a beautiful alert message.
generateNumbers()
The generateNumbers function is very simple, it takes two values as parameters,
a starting value and an arriving value, we iterate using the two values in a for loop,
then we add the result of the iteration in a list which was initially empty using the build in
javascript push function. And finally we use the "return" statement in the generateNumbers
function to indicate the value that the function should return when it is called or executed,
in this case our list of number.
displayNumbers()
The displayNumber function as its name suggests takes an array of values as its parameter, and
display these numbers in an HTML table. At first, we retrieves the HTML element with the id 'result',
and next we clear all existing HTML content within the results table. Right after that,
we use a for loop to iterate through each number in the 'values' array. We initialize a variable 'number'
with the current value from the array, and starts building an HTML string with an opening table row
(<tr>) and table cell (<td>) by creating an 'html' variable.
Now it is time to check whether the current number is even (number % 2 == 0).
If the remainder is 0 while emptying the number by 2, it is an even number,
then the number is enclosed in <b> tags to make it bold. If the number is not,
the number remains the same. And, as good programmers we do not forget to close
the html tags for the table cell (</td>) and table row (</tr>).
Finally append the generated HTML for the current number to the existing content of the results table.