The Code
function getValues() {
let userString = document.getElementById('userString').value;
let revString = reverseString(userString);
displayString(revString);
}
function reverseString(input) {
let revString = '';
for(let index = input.length - 1; index >= 0; index = index - 1) {
let character = input[index];
revString = revString + character;
}
return revString;
}
function displayString(output) {
document.getElementById('results').textContent = output;
let alertBox = document.getElementById('alert');
alertBox.classList.remove('invisible');
} )
}
The Code is structured using 3 funtions.
getValues
This function collects the input string, assigns it to the userString variable, and then calls the reverseString function with userString as an argument. It finally passes the result to the displayString function for rendering on the page.
reverseString
This function reverses the characters in the input string and returns the reversed string. It uses a decrementing for loop to iterate through the characters in reverse order and builds the revString variable character by character.
displayString
This function takes the result (which is the reversed string) and updates an HTML element with the id 'results' to display it by removing the alert box class 'invisible' class from it and making it visible.