The Code

                
// Controller
function getValues() {
    // get the user's input
    // decide what to do with it 
    let userInput = document.getElementById('message').value;
    let reversedInput = reverseString(userInput);

    displayString(reversedInput)
}

// Business logic
function reverseString(message){
    // take string, return it in reverse
    let reversedMessage = '';
    // todo: reverse the string
    // reversedMessage = message.split('').reverse().join('');
    for (let index = message.length - 1; index >= 0; index = index - 1){
        reversedMessage = reversedMessage + message[index];
    }

    return reversedMessage;
}

// View
function displayString(reverseMessage){
    // show string on page
    document.getElementById('msg').textContent = reverseMessage;
    document.getElementById('alert').classList.remove('d-none');
}
                
            

the code is structed in three functions

• getValues
• reverseString
• displayString

getValues gets the user input and then then gives it the reverseString Function as a parameter.reverseString first initializes reverseMessage variable to an empty string that will store the reversed string. It then loops through each character in the inputed string starting at the end and moving to the first character and adds the character to reversedMessage as it loops and then returns the reversedMessage when it has looped through the message. displayString then recieves the reversedMessage and adds it back into the html to show the user their inputted string in reverse. It also removes the class d-none to unhide where the message would be shown.