The Code

                    
                        // Entry Point aka controller
                        function getValues() 
                        {
                            let userString = document.getElementById('userString').value;
                        
                            let reversedString = reverseAString(userString);
                        
                            displayString(reversedString);
                        }

                        
                        // Logic Function
                        function reverseAString(userString)
                        {
                            // Reverse the string
                            let reversedString = '';

                            for (i = userString.length - 1; i >= 0; i--)
                            {
                                reversedString += userString[i];
                            }

                            return reversedString;
                        }




                        // View Function
                        function displayString(reversedString)
                        {
                            document.getElementById('results').textContent = reversedString;
                            document.getElementById('alert').classList.remove('invisible');
                        }
                    
                

The code is structured in three functions. Called functions will be detailed in their own sections. Click a headline() to scroll to that section of the code. And click the function name within the code to scroll to that write up section.

getValues()

---

First we start with the Entry Point Function. A function is a section of code that accomplishes one or more tasks and may return information from that task back to us. We pass it information to complete that task in the parentheses beside its name. Entry Point just means where our code begins for this app. It is attached to a button in the HTML to start when clicked. It contains three pieces of code.

let inputString = document.GetElementById(‘userString’).value;

This creates a storage spot, or "variable" called inputString and then asks our page or "document" to give us an HTML element by its name (GetElementById) of userString . This is how we get the word or sentence or "string" from our page, which is the information (.value) retrieved. The information now sits in our variable ready for use.

let reversedString = reverseAString(inputString);

This creates a new variable called reversedString and it holds the information we get back from our reverseAString function. We give the function the stored information we have in inputString and then receive the information from its accomplished task.

displayString(reversedString)

This is our last part of getValues() . We call upon another function, displayString(), and give it the information stored in our reversedString variable. Then, this function accomplishes its task, which displays the reversed string onto the page for the user.

That’s how getValues() works. Its task is to take in information from the user, deliver it, and ask other functions to accomplish their task. Let’s talk a little bit more about those other functions.

reverseAString()

---

The reverseAString() function has one task we need it to complete. We need this function to take the string given to us by our user and reverse it. First, we create a new variable called reversedString. We make this an empty box, ready for the string to be placed into it.

Then, our task begins. It starts with a for loop, or a way for us to reiterate a piece of code based on information and conditions supplied to it through its parentheses. Here’s how we set it up. We create a temporary storage box called i that looks at how long our user’s string is (userString.length) and subtract one from it and it stores that number.

Why do we subtract one? It seems strange, but the way that Javascript stores strings is different. Imagine the letters are like fancy chocolates in a box. When you purchase the box, the wrapper says how many there are in it. However, the box manufacturer would say it had one less space. For instance, the wrapper says twenty, you receive twenty pieces of chocolate, but the box manufacturer says there are nineteen spaces, because his count started at zero. userString.length is the wrapper, and Javascript’s special box for letters, is the box manufacturer. In Javascript that special box is called an array, and the way that we count the spaces in that special box is called indexing.

Because of the way the box of letters is counted we want to count backwards from its (length – 1) until we reach 0.

So, while the value of i is greater than or equal to zero, we want our code to run. After it runs, we subtract one from i.

The code we want to run is

reversedString += userString[i]

Let’s break that down. reversedString is our array. The += means we want to take what’s currently in reversedString and add the value of userString[i] to it. The [i] is how we grab the specific letter from its spot in the array. Since i was given the value of the total length of the string minus one, it starts at the last index in the array . That means then that the first index or (index 0) of reversedString's array takes in the the last letter of userString. It does this for every letter until i equals -1; this is when it no longer sees a spot in the array.

Having accomplished its task, reverseAString() gives back to us the new value of the reversedString variable.

displayString()

---

The final function necessary for our app to work is the displayString() function. This function's task is to display the reversed string onto the page and reveal a hidden area of the page to the user. It asks for the information of a reversedString when it is called. It has two parts.

document.GetElementById('results').textContent = reversedString;

This asks the page to give us the HTML element by the name of 'results', asks to access its .textContent and then puts into it the value of the reversedString.

document.GetElementById('alert').classList.Remove('invisible');

This is the grand finale. This piece of code asks the page for the element named alert, then asks to see its .classList or special categories can be used by the CSS styles. This bit of code then removes one of the classes named 'invisible' which makes this element appear on the page, with the reversed string, for our user!