//Get the user input from the page
function getValues() {
    //Get the alert box
    document.getElementById("alert").classList.add("invisible");
    document.getElementById("alert1").classList.add("invisible");

    //Get the input from the page
    let userString = document.getElementById("userString").value;
    let race = checkString(userString);

    //Display the displayString function
    displayString(race, userString);
}

//Check if the input is a palindrome 
function checkString(userString) {
    //Set blank array so we can loop through the user input string
    let race = [];
    
    //Loop through the array and reverse string
    for (let index = userString.length - 1; index >= 0; index--) {
        
        race += userString[index];
    }
    return race;
}

//Display whether it is a palindrome or not
function displayString(race, userString) {
    let palindrome = false;

    //if the user input is == race array set palindrome == true
    if (userString == race) {
            palindrome = true;
        } else {
            palindrome = false;
        }
    
    if (palindrome == true ) {
    //turn on the successful alert box
    document.getElementById("alert").classList.remove("invisible");
    } else {
    //turn on the failure alert box
    document.getElementById("alert1").classList.remove("invisible");
    }

    //write the msg to the page
    document.getElementById("msg").innerHTML = `Your string is ${race}`;
}

                
                

Function getValues

The first thing in this function that I did was that I had to set both of the alert boxes to invisible. This was because I needed them to be invisible until called. Secondly, I set the userString equal to the users input from the text box. I also needed to set the race variable equal to the checkString(userString) function. Lastly, I called the displayString(race, userString) function.

Function checkString

The first thing in this function that I did was that I had to create an empty array to loop through which I named race. Next, I created a for loop to loop through the array. I set the index = userString.length - 1 then if the index >= 0 then index--. Then I set race += to userString[index]. Lastly, I had to return race.

Function displayString

When creating this function I had to set parameters of race and userString so that I could use both of those inside that function.The first thing inside of this function that I did was that I had to do was create a variable called palindrome and set it to false. Then, I created an if statement with a condition of if the userString is == to race then the palindrome variable is actually true else it is false. I then needed to create a condition on whether the palindrome was true or false because I need to call the correct alert box. So I created an if statement with a condition of if palindrome == true then I remove the invisible from the success alert box. If palindrome == false then I removed the invisible from the failure alert box. Lastly, I used a template literal to output the users string if it is a palindrome.