// Add event listener for the Reverse button
document.getElementById("btnSubmit").addEventListener("click", getValue);

// Get string from the input field
// Controller function
function getValue() {
    document.getElementById("alert").classList.add("invisible");
    let userString = document.getElementById("userString").value;

    // check if less than 2 letters
    if (userString.length < 2) {
    alert("Please enter at least 2 characters");
    } else {

    // Pass the userString to the reverseString helper function
    let revString = reverseString(userString);

    // Pass the revString to the displayString helper function
    displayString(revString);
    }
}

// Revers the string
// Logic function
function reverseString(userString) {
    let revString = [];
    let resultObj = {};

    // Set the entered string to lower case and remove spaces and special characters
    userString = userString.toLowerCase();
    const regex = /[^a-z0-9]/gi;
    userString = userString.replace(regex, "");

    
    //  A for loop to iterate through the string from back to front
    //      and concatenate them into the revString variable
    for (let i = userString.length - 1; i >= 0; i--) {
        revString += userString[i];
    }
    
    // Compare the two strings to see if it is a palindrome
    if(revString === userString){
    resultObj.msg = `"<b>${userString}</b>" is a palindrome`;
    }else {
    resultObj.msg = `"<b>${userString}</b>" is not a palindrome`;
    }
    resultObj.rev = revString;
    return resultObj;
}

// Display the reversed string on the page
// View function
function displayString(resultObj) {
    document.getElementById("msgHeader").innerHTML = resultObj.msg;
    document.getElementById("msg").innerHTML = `Your phrase reversed is "<b>${resultObj.rev}</b>"`;
    document.getElementById("alert").classList.remove("invisible");

    let codeLink = document.getElementById("codeLink");
    codeLink.innerHTML = '<a href="code.html">See The Code</a>'
}                                        
                
            

This code is structured in three functions.

The first thing done was to add an event listener to the button so the code will fire when the button is pressed.

The next getValue function gets the value from the text input field, then it will call on a couple of "helper" functions explained below.

The first helper function is called reverseString. This function will first check to make sure at least two characters were entered. Then it will loop through the characters entered in the text field backwards from the last character to the first, and then concatenate them into a string. The original string entered and the reversed version are compared to each other. If they match, it is a palindrome. Finally it will pass on the results to the next displayString helper function.

The next helper function is called displayString. This will take the string passed to it from the reverseString helper function and then inject it into the web page for display.

In summary the getValue function gets the value from the text field, it calls the reverseString function to reverse the text and compare it to the original string to see if it is a palindrome, then it calls the displayString function to display the results on web page.

Please contact me if you have any questions and/or would like to discuss my skill set and qualifications.