Palindrome Checker in HTML CSS & JavaScript

Build A Palindrome Checker in HTML CSS & JavaScript

Hey friends, today in this blog, you’ll learn how to create a Palindrome Checker in HTML CSS & JavaScript. In the earlier blog, I have shared how to Detect a User Pressed Key in JavaScript, and now it’s time to create a palindrome checker.

A palindrome is a word, phrase, or sentence that reads the same backward as forward, Eg. level, borrow or rob, 1234321. In my palindrome checker, users can enter text or numbers and check whether the entered value is palindrome or not by clicking on the check palindrome button.

If you want to see what this palindrome checker looks like and how does it work then you can watch a demo or full video tutorial of the Palindrome Checker.

Video Tutorial of Palindrome Checker in JavaScript

In the above video, you’ve seen the demo of Palindrome Checker and how I created it using HTML CSS & JavaScript. It is a beginner-friendly project, so I hope you’ve understood the codes even if you’re a beginner in JavaScript.

If you didn’t understand, let’s talk about the concepts behind creating this palindrome checker. At first, I got the user-entered value. Once, I got this value, I removed the spaces, special characters from it and stored this filtered value in the filterInput variable.

After this, I reversed the filtered value and stored this reversed value in the reversedInput variable. At last, I checked the filterInput and reversedInput. If they are the same, then the user-entered value is palindrome else it’s not.

If you liked this palindrome checker and want to get source codes or files, you can easily copy or download them from the bottom of this page.

You might like this:

Palindrome Checker in JavaScript [Source Codes]

To create this Palindrome Checker in JavaScript. First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files just paste the given codes into your file. You can also download the source code files of this palindrome checker from the below download button.

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Coding By CodingNepal - -->
<html lang="en" dir="ltr">
    <meta charset="utf-8">  
    <title>Palindrome Checker in JavaScript | CodingNepal</title>
    <link rel="stylesheet" href="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <div class="wrapper">
        <h1>Palindrome Checker</h1>
        <p>A palindrome is a word or phrase that reads the same backwards as forwards, e.g. level, refer.</p>
      <div class="inputs">
        <input type="text" spellcheck="false" placeholder="Enter text or number">
        <button>Check Palindrome</button>
      <p class="info-txt"></p>
    <script src="script.js"></script>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

/* Import Google Font - Poppins */
@import url('[email protected];500;600;700&display=swap');
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;

  display: flex;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #AA57CC;

  color: #fff;
  background: rgb(170,87,204,0.8);

  max-width: 500px;
  background: #fff;
  border-radius: 7px;
  padding: 20px 25px 15px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);

header h1
  font-size: 27px;
  font-weight: 500;

header p
  margin-top: 5px;
  font-size: 18px;
  color: #474747;

  margin: 20px 0 27px;

.inputs input
  width: 100%;
  height: 60px;
  outline: none;
  padding: 0 17px;
  font-size: 19px;
  border-radius: 5px;
  border: 1px solid #999;
  transition: 0.1s ease;

.inputs input::placeholder
  color: #999999;

.inputs input:focus
  box-shadow: 0 3px 6px rgba(0,0,0,0.13);

.inputs input:focus::placeholder
  color: #bebebe;

.inputs button
  width: 100%;
  height: 56px;
  border: none;
  opacity: 0.7;
  outline: none;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  margin-top: 20px;
  border-radius: 5px;
  pointer-events: none;
  background: #AA57CC;
  transition: opacity 0.15s ease;

  opacity: 1;
  pointer-events: auto;

  display: none;
  font-size: 19px;
  text-align: center;
  margin-bottom: 18px;

.info-txt span
  color: #AA57CC;

@media (max-width: 520px) 
    padding: 17px 20px 10px;
  header h1
    font-size: 25px;
  header p
    font-size: 16px;
  .inputs input
    height: 54px;
    font-size: 17px;
  .inputs button
    height: 50px;
    font-size: 16px;
    margin-top: 17px;
    font-size: 18px;

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

const txtInput = document.querySelector(".inputs input"),
checkBtn = document.querySelector(".inputs button"),
infoTxt = document.querySelector(".info-txt");
let filterInput;

checkBtn.addEventListener("click", () => 
    let reverseInput = filterInput.split("").reverse().join(""); = "block";
    if(filterInput != reverseInput) 
        return infoTxt.innerHTML = `No, <span>'$txtInput.value'</span> isn't a palindrome!`;
    infoTxt.innerHTML = `Yes, <span>'$txtInput.value'</span> is a palindrome!`;

txtInput.addEventListener("keyup", () => 
    filterInput = txtInput.value.toLowerCase().replace(/[^A-Z0-9]/ig, "");
        return checkBtn.classList.add("active"); = "none";

That’s all, now you’ve successfully created a Palindrome Checker in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problem, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.


Yhaa You have done it but next? if YOU Want to Get your Others

Join Our Telegram Channel

Join Our YouTube Channel

Related Posts

Leave a Reply

Your email address will not be published.