//Get the string from the user input
                    //CONTROLLER
                    function getValue(){
                        //make alert invisible afrom the beginning
                        document.getElementById("alert").classList.add("invisible");
                    
                        let userString = document.getElementById("userString").value;
                    
                        //pass userString to reverseString
                        let reverse = reverseString(userString);
                    
                        //display reversed string
                        displayString(reverse);
                    }
                    
                    //Reverse the string
                    //LOGIC
                    function reverseString(userString){
                        let newString = [];
                        for(let i=userString.length-1; i>=0; i--){
                            newString += userString[i];
                        }
                        return newString;
                    }
                    
                    //Display reversed string to the user
                    //VIEW
                    function displayString(reverse){
                        //write message to the screen
                        document.getElementById("msg").innerHTML = `Your string reversed is: ${reverse}`;
                        
                        //show the alert box
                        document.getElementById("alert").classList.remove("invisible");
                        document.getElementById("alert").classList.add("visible");
                    }
                

The Code is structured in three functions.

getValue

getValue is a function that accesses the string entered by the user. This is achieved with DOM manipulation technique such as getElementById to directly retrieve the user input. The extracted string is passed is then passed to two other functions responsible for reversing the string and displaying the reversed string respectively.

reverseString

reverseString is a function that handles the logic aspect of the application (so they would say in the informatiom systems world, okay, back to our code).

This is where all the operations of reversing the string happen. Using a for loop to decrement from the last character of the string to the first character, all character are then added to another string (newString) to form a new reversed string. The reversed string is then returned.

displayString

dislayString function does exactly that, display the string but now reversed. This is achieved by innerHTML to send reversed string to an element with id of "msg".

Last two lines of code toggle the visibility of message box on the page.