The Code for REWIND


                        function getValue() {
                            document.getElementById("alert").classList.add("invisible");
                            let userString = document.getElementById("userString").value;
                            let reversedString = reverseString(userString);
                            displayString(reversedString);
                        }
                        
                        function reverseString(userString) {
                            let reversedString = "";
                            for (let i = userString.length - 1; i >= 0; i--) {
                                reversedString += userString[i];
                            }
                            return reversedString;
                        }
                        
                        function displayString(reversedString) {
                            document.getElementById("message").innerHTML = `Your string reveresed is: ${reversedString}`;
                            document.getElementById("alert").classList.remove("invisible");
                        }
                    
                    

The Code is structured in three function.

getValue()

This function ensures the display element of the page is hidden by inserting the value of invisible into its class attribute. It then declares a variable to hold the user’s input and retrieves the value from the DOM. It then declares a variable with the value of the previous variable passed to the reverseString function. Finally, it passes that variable to the displayString function to display the message.

reverseString()

This function declares an empty string which will hold the reversed values of the string passed to the function. A for loop begins at the last index of the passed user value and appends it to the value of the reversedString variable and then returns this string.

displayString()

This function receives the passed value manipulated by the prior function and enters a string literal containing the value of the passed string into the document. It then removes the invisible value from the class attribute of the display element which causes the message to be visible.