//Get string value from the user
              function getValue() {
                document.getElementById('alert').classList.add('invisible')
                document
                  .getElementById('alert')
                  .classList.remove('alert-success' && 'alert-danger')
              
                //get user string from the page
                let userString = document.getElementById('userString').value
              
                //check for a palindrome
                let returnObj = checkForPalindrome(userString)
              
                //display message to the screen
                displayString(returnObj)
              }
              
              //Generate backwards string and check for palindrome
              function checkForPalindrome(userString) {
                userString = userString.toLowerCase()
                //remove spaces and special characters
                let regex = /[^a-z0-9]/gi
                userString = userString.replace(regex, '')
              
                let revString = []
                let returnObj = {}
              
                for (let index = userString.length - 1; index >= 0; index--) {
                  revString += userString[index]
                }
              
                if (revString == userString) {
                  document.getElementById('alert').classList.add('alert-success')
                  returnObj.msg = `Well done! You entered a palindrome!`
                } else {
                  document.getElementById('alert').classList.add('alert-danger')
                  returnObj.msg = 'Sorry! You did not enter a palindrome!'
                }
              
                returnObj.reversed = revString
              
                return returnObj
              }
              
              //Display backwards string with checks
              function displayString(returnObj) {
                document.getElementById('alertHeader').innerHTML = returnObj.msg
                document.getElementById(
                  'userMessage'
                ).innerHTML = `Your phrase reversed is: ${returnObj.reversed}`
              
                document.getElementById('alert').classList.remove('invisible')
              }
              
            

The code is structured in three functions.

Get Value

My first function getValue is my starter/controller function. I initially add an invisible class to hide any previous results and remove any alert styling from the same results HTML getting it ready for the next input. The users entered string/value is then retrieved from the page and put into my checkForPalindrome function as a parameter, with the result of that used in my displayString function to finally be displayed to the user.

Check For Palindrome

I first have to make sure to simplify the users input, as palindromes are not concerned with any capitals, special characters, or spaces; these have to be removed. Lower casing the letters are dealt with by the JS function toLowerCase, and the spaces and special characters dealt with by using regex. I then define a new empty array and empty object with my string/value ready to be reversed. A decrementing for loop is used to reverse the string and add it to revString array upon each iteration, using the revString data to then check against the userString, which should match if the user entered a palindrome; this is done in an if else statement. I then dynamically create a user message depending on the result of that check (added to returnObj), while also adding styling. Finally, the revString is added to returnObj and returnObj is returned to getValues above.

Display String

My returnObj is taken in as a parameter and I am able to add both the dynamically created user message and the result of reversing the users string to be displayed to the user. This finishes the apps functionality.