The Code

                    
                        // takes in and controlls the other functions
                        function getValues() {
                            let userString = document.getElementById('userString').value;
                        
                            let revString = reverseString(userString);
                        
                            displayString(revString);
                        
                        }
                        // model of data
                        function reverseString(input) {
                            // input ='apple' strArray = ['a' 'p' 'p' 'l' 'e']
                            let revString = '';
                        
                            for (let index = input.length - 1; index >= 0; index--) {
                        
                                let letter = input[index];
                        
                                revString = revString + letter;
                            }
                        
                            return revString;
                            }
                        
                        // view
                        function displayString(output) {
                            document.getElementById('results').textContent = output;
                        
                            let alertBox = document.getElementById('alert');
                        
                            alertBox.classList.remove('invisible');
                        }
                    
                
Walkthrough
  • The controller function takes in user input and directs it to the following functions
  • The logic function makes a model of our data. Here we are reversing a string (which is by default an array)
  • The array is formed by processing each item in the array through a decrementing for-loop
  • The letters are set to each index of the array (starting at index 0)
  • Our resulting string is incremented letter by letter and returned to the controller function
  • The resulting string is then passed through the view function, where we target our output area by its ID
  • Our output is going into an alert section, which is invisible until JS runs and removes the class 'invisible'