Build a Palindrome Checker App using JavaScript Last Updated : 02 Jan, 2025 Comments Improve Suggest changes 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 CreateWe 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 PreviewBuild a Palindrome Checker App using JavaScriptPalindrome 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 exampleThe <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 exampleThe 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 exampleThe 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> Comment More infoAdvertise with us Next Article Build a Palindrome Checker App using JavaScript T tanmxcwi Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Projects Similar Reads Palindrome Checker App Using React Js In this article, we will walk you through the process of creating a Palindrome Checker App using React.js. A palindrome refers to a word, phrase, or sequence of characters that reads the same both forwards and backward, disregarding spaces, punctuation, and capitalization. Preview ImagePrerequisit 3 min read Build a Spy Number Checker using HTML CSS and JavaScript In the realm of mathematics, Spy Numbers, also known as secretive numbers or cryptic numbers, possess a unique property. A spy number is defined as a number whose sum of digits is equal to the product of its digits. In this article, we will explore how to build a Spy Number Checker using HTML, CSS, 3 min read Check Whether a Year is a Palindrome Year using JavaScript A palindrome year is a year that remains the same when its digits are reversed. For example, 2002 is a palindrome year because it reads the same backward checks whether as forward. In this problem, we're tasked with checking whether a given year is a palindrome year.Table of ContentUsing string mani 2 min read Build a Anagram Checker App Using ReactJS In this article, we will create an Anagram Checker App using React. Anagrams are words or phrases that can be formed by reÂarranging the letters of anotheÂr word or phrase, using each letteÂr exactly once. This app will enable users to enter two words or phraseÂs and determine if they are anagrams 4 min read Palindrome in JavaScript A palindrome is a word, phrase, number, or other sequence of characters that reads the same forward and backward (ignoring spaces, punctuation, and capitalization). For example, words like "madam" and "racecar" are palindromes. How to Check if a String is a Palindrome in JavaScript?To check if a str 4 min read Like