The Code
function getValues() {
let userMessage = document.getElementById('message').value;
// Process the input to remove non-alphanumeric characters and convert to lowercase
let processedMessage = userMessage.toLowerCase().replace(/[^a-z0-9]/gi, '');
// Check if the processed message is less than 2 characters
if (processedMessage.length < 2) {
Swal.fire({
icon: 'error',
backdrop: false,
title: 'Oops',
text: 'Please enter at least 2 alphanumeric characters to check for palindrome.'
});
return;
} else {
// Check if the processed message is a palindrome
let isPalindrome = checkForPalindrome(processedMessage);
// Reverse the original user message for display
let userMessageReversed = reverseString(userMessage);
// Create an object with the original and reversed messages and the palindrome result
let results = {
input: userMessage,
reversed: userMessageReversed,
isPalindrome: isPalindrome
};
// Display the results
displayResults(results);
}
}
function displayResults(results) {
let alert = document.getElementById('alert');
alert.classList.remove('invisible', 'alert-success', 'alert-danger');
if (results.isPalindrome == true) {
// Make the alert green for success
alert.classList.add('alert-success');
alert.querySelector('h4').innerHTML = 'Well Done! You entered a palindrome';
} else {
// Make the alert red for failure
alert.classList.add('alert-danger');
alert.querySelector('h4').innerHTML = 'Oh No! That is not a palindrome';
}
// Display the input and reversed messages in the alert body
alert.querySelector('p').innerHTML = `You entered: ${results.input}.
Your message reversed is: ${results.reversed}`;
}
function checkForPalindrome(input) {
// The input is already processed (lowercased and non-alphanumeric characters removed)
let reversed = reverseString(input);
// Check if the reversed string is the same as the input
let isPalindrome = reversed === input;
// Return a value indicating whether it is or is not a palindrome
return isPalindrome;
}
function reverseString(inputString) {
let result = '';
// Loop through the string from the end towards the beginning
for (let index = inputString.length - 1; index >= 0; index--) {
result += inputString[index];
}
return result;
}
The code is structured in 4 functions
getValues()
The getValues
function retrieves the user's input from a text box, processes it to remove non-alphanumeric characters, and converts it to lowercase.
It then checks if the processed input is a palindrome. If the input is too short, it displays an error message using Sweet Alert to prompt the user to enter more characters.
If the input is valid, it reverses the input string, determines if it is a palindrome, and then prepares the results for display.
displayResults()
The displayResults
function updates the HTML to indicate whether the user's input is a palindrome.
It modifies the alert's appearance based on the result, using a green alert for success and a red alert for failure.
The function also displays both the original and reversed input strings, formatting them in bold for emphasis.
This visual feedback helps the user quickly understand the result of their input.
checkForPalindrome()
The checkForPalindrome
function takes a processed string, removes any non-alphanumeric characters, and converts it to lowercase.
It then reverses this processed string and compares the reversed string to the original processed string.
If the two strings are identical, it returns a boolean value indicating that the input is a palindrome.
This function simplifies the main logic by isolating the palindrome check into a single, reusable component.
reverseString()
The reverseString
function reverses the input string by iterating from the end of the string to the beginning.
It constructs the reversed string character by character in a loop.
This function is essential for both displaying the reversed input to the user and checking for palindromes.
By handling the reversal separately, the code remains modular and easier to maintain.