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 We will understand how to check whether a given value is a palindrome or not in JavaScript. A palindrome is a word, phrase, number, or any sequence that reads the same forward and backward. For instance, "madam" and "121" are palindromes.To perform this check we will use the following approaches:Tab 3 min read How to check the given string is palindrome using JavaScript ? A palindrome is a word, sentence, or even number that reads the same from the back and from the front. Therefore if we take the input, reverse the string and check if the reversed string and the original string are equal, it means the string is a palindrome, otherwise, it is not. Approach: When the 3 min read Add Minimum Characters at Front to Make String Palindrome in JavaScript The minimum characters to add at the front to make the string palindrome means the smallest count of characters required to prepend to the beginning of a given string. It ensures that the resultant string reads the same forwards and backward. This process creates a palindrome from the original strin 5 min read String in DSA Using JavaScript A string in JavaScript is a sequence of characters enclosed in single ('), double ("), or backticks (`). Strings in JavaScript are immutable, meaning their contents cannot be changed after creation. Any operation that modifies a string actually creates a new string.Example:JavaScriptlet s = "GfG"; c 2 min read How to check whether a passed string is palindrome or not in JavaScript? We are given a string, our task is to find string is palindrome or not. A palindrome is a series of numbers, strings, or letters that, when read from right to left and left to right, match each other exactly or produce the same series of characters. in simple words when number strings or characters 4 min read Longest Palindromic Subsequence in JavaScript A Longest Palindromic Subsequence in JavaScript refers to the longest sequence of characters within a string that reads the same backward and forward. It's a non-contiguous subsequence, and the goal is to find the maximum length of such subsequences in a given input string. Example:Input: str = “GEE 3 min read Like