Build a Palindrome Checker App using JavaScript (original) (raw)

Last Updated : 02 Jan, 2025

A palindrome is a word, phrase, or sequence that reads the same backwards as forward, ignoring spaces, punctuation, and capitalization. know as the palindrome.

What We Are Going to Create

We will create a simple web application where users can input a word or phrase to check if it’s a palindrome. The application will feature:

• A clean and responsive design.
• A text input for the user to enter text.
• A button to trigger the palindrome check.
• A result section that displays whether the input is a palindrome.

Project Preview

Build a Palindrome Checker App using JavaScript

Palindrome Checker App - HTML Structure

HTML `

`

**In this example

• The
  with class container organizes the UI components.

• displays the title "Palindrome Checker."

• provides a brief instruction for the user.

• accepts user input.
• triggers the palindrome check.
• with id="result" displays the output.

Palindrome Checker App - CSS Styles

CSS `

body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; margin: 0; } .container { background-color: #ffffff; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); width: 90%; max-width: 400px; } h1 { font-size: 1.5em; color: #333; } p { font-size: 1em; color: #666; margin-bottom: 20px; } input { width: 100%; padding: 10px; font-size: 1em; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 10px; } button { width: 100%; padding: 10px; font-size: 1em; background-color: #007BFF; color: #fff; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0056b3; } #result { margin-top: 20px; font-size: 1.1em; }

`

**In this example

• The body is styled to center the application on the screen.
• .container defines the application layout with padding and a shadow for aesthetics.
• h1, p, input, and button are styled for clarity and usability.
• #result is styled to display the output prominently.

Palindrome Checker App - JavaScript Functionality

JavaScript ``

document.getElementById("check").addEventListener("click", function () { const input = document.getElementById("input").value.trim(); const result = document.getElementById("result");

if (input) {
    // Normalize the text
    const norm = input.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
    const rev = norm.split("").reverse().join("");

    // Check if it’s a palindrome
    if (norm === rev) {
        result.textContent = `"${input}" is a palindrome!`;
        result.style.color = "green";
    } else {
        result.textContent = `"${input}" is not a palindrome.`;
        result.style.color = "red";
    }
} else {
    result.textContent = "Please enter some text.";
    result.style.color = "orange";
}

});

``

**In this example

• The **addEventListener listens for a click on the button.
• **input fetches and trims user input.
• **norm removes non-alphanumeric characters and converts text to lowercase.
• **rev reverses the string for comparison.
• Conditional checks determine if the input is a palindrome and updates the **result.

Complete Code

HTML ``

``