How to Check Palindrome using JavaScript

Introduction

A palindrome is a word, phrase, number, or other sequence of characters that reads the same forward as backward. In this blog post, we’ll explore the implementation of a Palindrome Checker using HTML, CSS, and JavaScript. Understanding how to check for palindromes is a fundamental skill in programming and can be applied in various contexts.

HTML Structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Palindrome Checker</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="check-container">
      <input
        type="text"
        id="input-text"
        placeholder="Enter a word to check"
        class="input-field"
      />
      <button id="check-button" class="check-button">Check</button>
      <p id="result" class="result-message"></p>
    </div>
  </body>
</html>

HTML

Explanation:

.check-container: A container for the Palindrome Checker.
<input type="text" id="input-text" placeholder="Enter a word to check" class="input-field" />: An input field for users to enter the word to be checked.
<button id="check-button" class="check-button">Check</button>: A button triggering the palindrome check.
<p id="result" class="result-message"></p>: A paragraph element to display the result message.

CSS Styling

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  font-family: "Rubik", sans-serif;
  background-color: #1e1c27;
}
.check-container {
  width: 35%;
  min-width: 450px;
  background-color: #ffffff;
  padding: 50px 30px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  border-radius: 8px;
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.18);
}
.check-container * {
  outline: none;
  font-size: 16px;
}
.input-field {
  width: 60%;
  border: none;
  border-bottom: 2px solid #d5d5d5;
  padding: 10px 5px;
  font-weight: 400;
}
.input-field:focus {
  border-bottom: 2px solid #b156fe;
}
.check-button {
  width: 25%;
  float: right;
  padding: 10px 20px;
  background-color: #b156fe;
  border: none;
  border-radius: 3px;
  color: #ffffff;
  font-weight: 400;
}
.result-message {
  margin-top: 30px;
  text-align: center;
  color: #b156fe;
  font-weight: 500;
}

CSS

Explanation:

body: Styles the overall appearance of the document.
.check-container: Styles the main container for the Palindrome Checker.
.input-field: Styles the input field for entering words.
.input-field:focus: Styles the input field when it is in focus.
.check-button: Styles the button triggering the palindrome check.
.result-message: Styles the paragraph for displaying the result message.

JavaScript Logic

document
  .getElementById("check-button")
  .addEventListener("click", function () {
    let inputText = document.getElementById("input-text").value;
    checkPalindrome(inputText);
  });

function checkPalindrome(inputText) {
  let cleanedText = inputText.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
  let length = cleanedText.length;
  let halfLength = Math.floor(length / 2);
  let resultElement = document.getElementById("result");
  let i;
  for (i = 0; i < halfLength; i++) {
    if (cleanedText[i] !== cleanedText[length - 1 - i]) {
      resultElement.textContent = "Nope! Not a palindrome";
      return;
    }
    resultElement.textContent = "Yes! It's a palindrome";
  }
}

JavaScript

Explanation:

document.getElementById("check-button").addEventListener("click", function () { ... }): Adds a click event listener to the check button, triggering the palindrome check when clicked.
checkPalindrome(inputText): The main function for checking whether the entered word is a palindrome.
cleanedText = inputText.replace(/[^a-zA-Z0-9]/g, "").toLowerCase(): Removes non-alphanumeric characters and converts the text to lowercase for consistent comparison.
for (i = 0; i < halfLength; i++) { ... }: Iterates through the first half of the cleaned text.
if (cleanedText[i] !== cleanedText[length - 1 - i]) { ... }: Checks if the characters from the beginning and end do not match, indicating a non-palindrome.
resultElement.textContent = "Nope! Not a palindrome": Displays a message if the input is not a palindrome.
resultElement.textContent = "Yes! It's a palindrome": Displays a message if the input is a palindrome.

Understanding Palindromes

Palindrome Check Function

javascriptCopy code

function checkPalindrome(inputText) { let cleanedText = inputText.replace(/[^a-zA-Z0-9]/g, "").toLowerCase(); let length = cleanedText.length; let halfLength = Math.floor(length / 2); let resultElement = document.getElementById("result"); let i; for (i = 0; i < halfLength; i++) { if (cleanedText[i] !== cleanedText[length - 1 - i]) { resultElement.textContent = "Nope! Not a palindrome"; return; } resultElement.textContent = "Yes! It's a palindrome"; } }

Explanation:

cleanedText = inputText.replace(/[^a-zA-Z0-9]/g, "").toLowerCase(): Cleans the input by removing non-alphanumeric characters and converting to lowercase.
for (i = 0; i < halfLength; i++) { ... }: Iterates through the first half of the cleaned text.
if (cleanedText[i] !== cleanedText[length - 1 - i]) { ... }: Checks if the characters from the beginning and end do not match, indicating a non-palindrome.
resultElement.textContent = "Nope! Not a palindrome": Displays a message if the input is not a palindrome.
resultElement.textContent = "Yes! It's a palindrome": Displays a message if the input is a palindrome.

Conclusion

In this blog post, we’ve uncovered the inner workings of a Palindrome Checker implemented using HTML, CSS, and JavaScript. Palindromes, while a simple concept, showcase the power of logical thinking and string manipulation in programming.

Feel free to use and modify this code in your projects. Understanding palindrome checking is not only fun but also provides a solid foundation for more complex string manipulation tasks in programming.

Happy coding!