Open In App

Build a Palindrome Checker App using JavaScript

Last Updated : 02 Jan, 2025
Suggest changes
Share
Like Article
Like
Report

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

Palindrome
Build a Palindrome Checker App using JavaScript

Palindrome Checker App - HTML Structure

HTML
<html> <head></head> <body> <div class="container"> <h1>Palindrome Checker</h1> <p>Enter a word or phrase to check if it’s a palindrome.</p> <input type="text" id="input" placeholder="Type here..."> <button id="check">Check Palindrome</button> <div id="result"></div> </div> </body> </html> 

In this example

  • The <div> with class container organizes the UI components.
  • <h1> displays the title "Palindrome Checker."
  • <p> provides a brief instruction for the user.
  • <input> accepts user input.
  • <button> triggers the palindrome check.
  • <div> 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
<html> <head> <style>  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;  }  </style> </head> <body> <div class="container"> <h1>Palindrome Checker</h1> <p>Enter a word or phrase to check if it’s a palindrome.</p> <input type="text" id="input" placeholder="Type here..."> <button id="check">Check Palindrome</button> <div id="result"></div> </div> <script>  document.getElementById("check").addEventListener("click", function () {  const input = document.getElementById("input").value.trim();  const result = document.getElementById("result");  if (input) {  const norm = input.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();  const rev = norm.split("").reverse().join("");  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";  }  }); </script> </body> </html> 

Similar Reads