The Code for RETRACT


                        
                        // Get the values from the page
                        // Get the string
                        // Controller Function
                        function getValues() {
                            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 the reversed string to the user
                        // View Function
                        function displayString(revstring) {
                            // write the message to the page
                            document.getElementById("msg").innerHTML = `Your string reversed is: ${revstring}`;
                            // show the alert box
                            document.getElementById("alert").classList.remove("invisible");
                        }
                    
                    

The Code for this application is structured into three sections; CONTROLLER, LOGIC, and VIEW

CONTROLLER: getValues();

In this block of the code the program is retrieving the strting that the user enters into the input box. Also, it is adding a class to the alert to set it to invisible. This will be removed when it is time to display the reversed string


LOGIC: reverseString();

In this function, the string will be reversed. I will be using a for loop() to take the string the user enters and cycle through each character. The characters will then be added to an array reversed and ready to be displayed.


VIEW: displayString()

With this block of code the "invisible" class is being removed from the alert and the Array is being passed in to be displayed to the user as the result.