The Code for SPINNER
//Get the string from the page
//controller function
function getValue () {
document.getElementById("alert").classList.add("invisible");
let userString = document.getElementById("userString").value;
let revString = reverseString(userString);
displayString(revString);
}
//Reverse the string
//logic function
function reverseString(userString) {
let revString = [];
//reverse a string using a for loop
for (let index = userString.length - 1; index >= 0; index--) {
revString += userString[index];
}
return revString;
}
//Display the reversed string to the user
//View Function
function displayString(revString) {
//write to the page
document.getElementById("msg").innerHTML = `Your string reversed is: ${revString}`;
//show the alert box
document.getElementById("alert").classList.remove("invisible");
}
The code is structured in three functions.
getValue
This is a controller function that gets the user's input from the DOM, processes the value, and then ensures the result is displayed back to the user as a reversed string.
reverseString
This is a logic function that is responsible for returning a reversed string. The user's input is passed into the function where each individual character of the string is copied into a string array using a for loop, starting with the last character first until the first character is reached. The function then returns a reversed string.
displayString
This function acts as a view function where the reversed string to be displayed is passed into the function. The function uses the innerHTML property to write the string to the HTML page and then shows the result by unhiding the alert box.