//get the string from the user
function getString(){
    document.getElementById("alert").classList.add("invisible");
    let userString = document.getElementById("userString").value;
    let revString = reverseString(userString);
    displayString(revString);

}
//Reverse the string
function reverseString(userString){

    let rev = [];
    for(let i=userString.length-1;i>=0;i--){
        rev +=  userString[i];
    }
    return rev;
}

//Display the reversed string to the user
function displayString(revString){
    document.getElementById("msg").innerHTML=`Your reversed string is: ${revString}`;
    document.getElementById("alert").classList.remove("invisible");
}
                

The Code is structure in three function.

getString

The getString function will obtain the string from the user.

revereString

The reverseString function will take the user String from the getString function and will store into arrays. It will then reverse the string using a for loop and will return it.

displayString

The displayString function will take the reverse string from the reverseString function and then it will display it to the user.