Inside-Out: The Code
//get the string from the page
//controller function
function getString(){
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 reversed string
//view function
function displayString(revString){
//write to page
document.getElementById("msg").innerHTML = `Your string reversed is: ${revString}`;
//show alert box
document.getElementById("alert").classList.remove("invisible");
}
getString()
This function simply gets the string with the .getElementById() method and sets it equal to the userString variable. It also passes the string to the reverseString() function and passes the reversed string to the displayString() function.
reverseString()
This function uses a for-loop to loop backwards through each letter of the string and pass it to the revString array.
displayString()
This function uses the .innerHTML to write "Your string reversed is: (the reversed string)". It also turns on the visibility of the result by removing the invisible option on the div's class of the result.