In this article you will learn how to check palindrome using html css and javascript.
This is basically a simple JavaScript project that can easily identify any word that is a Palindrome. That is in one word this is a javascript palindrome checker which I made by javascript.
Palindromes are fascinating sequences of characters that read the same backward as forward. In the realm of programming, checking whether a given string is a palindrome is a common and interesting task.
How To Check for Palindromes in JavaScript
In JavaScript, a palindrome refers to a sequence of characters, typically a word, phrase, number, or other sequences of characters, that reads the same forward as backward.
For example:
- The word “level” is a palindrome because it reads the same forward and backward.
See the Pen Untitled by Growthpanda (@Growthpanda) on CodePen.
As you can see in the demo above I first created a box to create the project (palindrome in javascript using for loop).
Inside that box is an input field that I created with HTML’s input function. Then there is a button which will check if the word you input is a palindrome or not. I designed here using simple CSS. You can modify the CSS as you need when you use it in your project.
HTML Code for Palindrome Checker
First I created the basic structure of this Palindrome Checker using html. Here basically I have used input function in HTML. Used the active button and used a paragraph tag to display the results.
<div class="container">
<input type="text" id="input-text" placeholder="Enter a word to check">
<button id="btn">Check</button>
<p id="result"></p>
</div>CSS Code for Palindrome Checker
Now time to design this project (How to Determine if a String is a Palindrome). For this I used some CSS. You can ignore these css if you want.
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #b156fe;
}
.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);
}
.container *{
font-family: "DM Sans", sans-serif;
outline: none;
font-size: 16px;
}
input{
width: 60%;
border: none;
border-bottom: 2px solid #d5d5d5;
padding: 10px 5px;
font-weight: 400;
}
input:focus{
border-bottom: 2px solid #b156fe;
}
button{
width: 25%;
float: right;
padding: 10px 20px;
background-color: #b156fe;
border: none;
border-radius: 3px;
color: #ffffff;
font-weight: 400;
}
p{
margin-top: 30px;
text-align: center;
color: #b156fe;
font-weight: 500;
}Palindrome Checker JavaScript Code
Now check for Palindrome in JavaScript using the following JavaScript. These codes will activate this project.
// Event listener attached to a button with the id "btn"
document.getElementById("btn").addEventListener("click", function () {
// Get the value of the text input with the id "input-text"
let txt = document.getElementById("input-text").value;
// Call the checkPalindrome function with the input text
checkPalindrome(txt);
});
// Function to check if a given text is a palindrome
function checkPalindrome(txt) {
// Remove non-alphanumeric characters and convert to lowercase
let txt_new = txt.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
// Get the length of the modified text
let len = txt_new.length;
// Calculate the half-length of the text
let halfLen = Math.floor(len / 2);
// Get the result element by id
let result = document.getElementById("result");
// Loop through the first half of the text
for (let i = 0; i < halfLen; i++) {
// Check if the characters from the beginning and end match
if (txt_new[i] !== txt_new[len - 1 - i]) {
// If a mismatch is found, set the result text and return from the function
result.textContent = "Nope! Not a palindrome";
return;
}
// If no mismatch is found, set the result text to indicate it's a palindrome
result.textContent = "Yes! It's a palindrome";
}
}
Checking for palindromes in JavaScript can be achieved using different methods, each with its own advantages. I have created this project using a for loop.
Hopefully from this article you have learned how to create a palindrome checker using HTML, CSS and JavaScript. If you want the source code then you can use the download button below.
Determining if a string is a palindrome in JavaScript involves checking whether the string reads the same forward as backward. Here’s a step-by-step guide to creating a JavaScript function to determine if a string is a palindrome:
// Function to check if a given string is a palindrome
function isPalindrome(str) {
// Remove non-alphanumeric characters and convert to lowercase
let cleanedStr = str.replace(/[^a-zA-Z0-9]/g, ”).toLowerCase();
// Compare characters from the beginning and end of the cleaned string
for (let i = 0; i < Math.floor(cleanedStr.length / 2); i++) {
if (cleanedStr[i] !== cleanedStr[cleanedStr.length – 1 – i]) {
return false; // If a mismatch is found, it’s not a palindrome
}
}
return true; // If the loop completes without finding mismatches, it’s a palindrome
}
// Example usage:
const testString = “A man, a plan, a canal, Panama!”;
console.log(isPalindrome(testString)); // Output: true
Another approach involves reversing the string and comparing it with the original. If the reversed string is the same as the original, the input is a palindrome.
function isPalindromeReverse(str) {
str = str.toLowerCase().replace(/[^a-z0-9]/g, ”);
const reversedStr = str.split(”).reverse().join(”);
return str === reversedStr;
}
// Example usage
const testString = “A man, a plan, a canal, Panama!”;
console.log(isPalindromeReverse(testString)); // Output: true
One of the simplest approaches to check for a palindrome is to compare characters from both ends of the string iteratively. This method involves creating two pointers – one starting from the beginning and the other from the end of the string – and comparing the characters at these positions.
function isPalindrome(str) {
str = str.toLowerCase().replace(/[^a-z0-9]/g, ”); // Convert to lowercase and remove non-alphanumeric characters
let left = 0;
let right = str.length – 1;
while (left < right) {
if (str[left] !== str[right]) {
return false;
}
left++;
right–;
}
return true;
}
// Example usage
const testString = “A man, a plan, a canal, Panama!”;
console.log(isPalindrome(testString)); // Output: true