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.