"use strict";

                            // Controller function
                            // get the input string value
                            function getValue() {

                                // make sure alert msg is not initially visible
                                document.getElementById('alert').classList.add('invisible');

                                // get the user input string
                                let userStr = document.getElementById('userString').value;

                                // call the reverse function
                                let reverseStr = reverseString(userStr);

                                // pass the reversed string to the display function
                                displayString(reverseStr);

                            }

                            // logic function
                            // reverse the string value
                            function reverseString(userStr) {

                                // declare empty array to be populated
                                let reverseStr = [];

                                // reverse string with a decrementing for loop
                                for (let i = userStr.length - 1; i >= 0; i--) {
                                    // concatenate and populate the array with index values
                                    reverseStr += userStr[i];
                                    
                                }

                                // retrun the reversed string
                                return reverseStr;

                            }

                            // view function
                            // display the reversed string value back to the page
                            function displayString(reverseStr) {

                                // write to the page using a template literal
                                document.getElementById('msg').innerHTML = `${reverseStr}`;

                                // turn on inline alert success message
                                // (remove 'invisible' from the class listings) 
                                document.getElementById('alert').classList.remove('invisible');

                            }
                        
                    

JS Reverse

Using HTML, JavaScript, custom CSS & Bootstrap to design an application that captures user input and then executes code to reverse that input, displaying the reversed input.

getValue() function

Here we use javascript to set an inline alert message's css class to 'invisible' and to "Get" a user input field value in the HTML file by using document.getElementById to locate the html tags with id's of 'alert' and 'userString'.

reverseString() function

Then we pass the 'userString' array to a logic function that uses a decrementing for loop to move backwards through the index of the string array where each index item is cancatenated and then added to the empty reverseStr = [] array. Once the for loop is complete we return this reversed array back to the getValue() controller function.

displayString() function

From the Controller function we call the view function displayString() passing it the reversed array variable 'reverseStr'. Using getElementbyId and it's innerHTML property we locate the html tag with id of 'msg' and write the reversed string to the page using a template literal. Then we remove the inline 'alert' message's css 'invisible' class to display the reversed string in an inline alert success message.