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.