How to Create a Palindrome Checker in JavaScript

How to Create a Palindrome Checker in JavaScript

Palindrome Checker in JavaScript

If you want to make a javascript palindrome checker tool then this article will help you. This type of palindrome checker is very easy to make. If you know basic JavaScript you can easily create it.

You may be wondering what a palindrome is?

A palindrome is a number, phrase, or word that reads the same backward as forward. That is, if a word or number is read from the front, it will look as if it is read from the back. Such as Madam, Racecar, Level, 12321, etc.

Palindrome Checker JavaScript

The project that has been created here can easily identify this palindrome. This is a javascript palindrome checker that will help you understand whether any word or number is a palindrome.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

If you do not understand what I am saying then watch the demo below. This demo will help you to know how this palindrome checker javascript works.

Related Post:

1. Check Password Strength in JavaScript

2. Word Counter in JavaScript

3. Days Between Two Dates

4. Character Counter using JavaScript

5. Loan Calculator using JavaScript

6. Weather App using JavaScript

Hopefully, you have learned how this palindrome program works from the preview above. This project has been created in a very simple way. 

There is an input box here. You can input a word or number in that box. Then there is a button. When you click on the button you can see if it is a palindrome. There is a display in which information can be seen.

Build A Palindrome Checker using JavaScript

If you want to create this Palindrome Checker then you need to know HTML, CSS, and javascript. Its elements are created by HTML and designed by CSS. Then, this Palindrome Checker is activated by JavaScript.

Step 1: Basic structure of Palindrome Checker

A box has been created on the webpage using the following code. Here the box’s min-width is 450px and the background color is white.

<div class=”container”>
</div>
*,
*:before,
*:after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  background-color: #1f85e0;
}
.container{
  width: 35%;
  min-width: 450px;
  background-color: #ffffff;
  padding: 50px 35px;
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 20px 25px rgba(0,0,0,0.18);
}
Basic structure of Palindrome Checker

Step 2: Create a result viewing display

Then a result box is created. Whether it is a word Palindrome can be seen in this box. Box size depends on padding: 30px.

 <p id=”result”></p>
p{
  text-align: center;
  color: #073b8c;
  font-weight: 500;
  padding: 30px;
  margin-bottom: 40px;
  font-size: 22px;
  box-shadow: 0 0 20px rgba(0,139,253,0.25);
}
Create a result viewing display

Step 3: Character input box

Now an input box has been created. In this input box, you can input words or numbers.

<input type=”text” id=”input-text” placeholder=”Enter a word to check”>
input{
  width: 100%;
  border: none;
  border: 2px solid #d5d5d5;
  padding: 13px 7px;
  font-weight: 400;
}
input:focus{
  border-bottom: 2px solid #b156fe;
}
Character input box

Step 4: Create a button

Now a button has been created. That button will activate this project. Button width: 130px and background blue used.

<button id=”btn”>Check</button>
button{
  width: 130px;
  padding: 11px;
  background-color: #185bad;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  font-weight: 400;
  margin-top: 30px;
  font-size: 17px;
}
Create a button

Step 5: Activate Palindrome Checker using JavaScript

Now this palindrome checker javascript has been activated. For this, I have used JavaScript.

document.getElementById(“btn”).addEventListener(“click”,function(){
  let txt = document.getElementById(“input-text”).value;
  checkPalindrome(txt);
});
function checkPalindrome(txt){
  let txt_new = txt.replace(/[^a-zA-Z0-9]/g, ”).toLowerCase();
  let len = txt_new.length;
  let halfLen = Math.floor( len/2 );
  let result =document.getElementById(“result”);
  let i;
  for( i = 0; i < halfLen; i++){
      if( txt_new[i] !== txt_new[len-1-i]){
          result.textContent = “Sorry! Not a palindrome 😔”;
          return;
      }
      result.textContent = “Yes! It’s a palindrome 😍”
  }
}
Palindrome Checker using JavaScript
Palindrome Checker JavaScript

Javascript Palindrome Checker [Source Code]

If you want to copy the source code you can use the code section below. There are many who will find these codes helpful for non-programmers.

Here I have put all the code together. Copy the following code and add it to your HTML file.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

Hopefully, you have been able to create a javascript palindrome checker using these codes. If there is any problem then you can use the button below. 

If you have difficulty understanding this tutorial, please comment. Please comment on how this Palindrome Checker in JavaScript works.