By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
rocoderesrocoderes
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Notification Show More
Latest News
Responding to and Tracking Key Presses
How to Work With Responding to and Tracking Key Presses
JavaScript
Passing a JavaScript Value Between HTML Pages
Passing a JavaScript Value Between HTML Pages
JavaScript
Compare Objects in an Array
JavaScript Problem: Compare Objects in an Array
JavaScript
Switching Name Order Using Capturing Groups in Regular Expressions
Switching Name Order Using Capturing Groups in Regular Expressions
JavaScript
Shuffling an Array
JavaScript Problem: How to Perform Shuffling an Array
JavaScript
Aa
Aa
rocoderesrocoderes
Search
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Follow US
High Quality Design Resources for Free.
rocoderes > JavaScript > How to Make Palindrome Checker in HTML
JavaScript

How to Make Palindrome Checker in HTML

Rocoderes
Last updated: 2022/10/21 at 6:19 AM
Rocoderes
Share
10 Min Read
Palindrome Checker in HTML

In this article, we will make a palindrome checker in HTML, CSS & JavaScript. In this we will provide an area to get the input, basically an input field, then we add a button to get the result. This project’s logic will be added using JavaScript.

Contents
Pre-requisite to Make Palindrome Checker in HTML, CSS & JavaScriptCreating HTML SkeletonCustomizing And Styling Our ProjectAdding JS ConstantAdding Functionality to ButtonFull Source Code to Make Palindrome Checker in HTML, CSS & JavaScriptOutputYou may also like:

This is going to be a beginner-friendly project and basic project. So let’s make it step-by-step.

Demo

Pre-requisite to Make Palindrome Checker in HTML, CSS & JavaScript

  • Basic Knowledge of HTML.
  • Basic Knowledge of CSS.
  • Basic Knowledge of JavaScript.

Creating HTML Skeleton

For this project, we need to basically three files. First will be our index.html, in this we will add our elements, and you can simply say we will create the skeleton of the project using HTML file. Then for designing purpose we will be adding our style.css file, with this we will add some styles to our HTML, this is going to be purely based on you, like you can customize it any way. And lastly, our script.js file, this will be our main file because we will add functionality so that we can check where number or text is palindrome or not using the JavaScript file.

Now in HTML, we have added a wrapper <div>, in which we have added a header with some text. Then we have to add an input field to get the input text with spell check to false. Lastly, we need a button to get the result and a paragraph to print the result in it. So this is it for our HTML.

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

    <script src="script.js"></script>
    
  </body>
</html>
Palindrome Checker in HTML

Customizing And Styling Our Project

So after adding the basic elements which is actually perfect, but we need to add some CSS styling so that our project looks a little bit good. For that we just added some background color, added a font family, and did some customizations to our elements as well as we centered our project, added some border, color, transitions etc. to make the project interactive. CSS styling is purely depending on the developer to give more interactive look, so we won’t discuss much about it.

All source code will be provided below, so you can simply copy and paste it.

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #AA57CC;
}
::selection{
  color: #fff;
  background: rgb(170,87,204,0.8);
}
.wrapper{
  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;
}
.inputs{
  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;
}
.inputs button.active{
  opacity: 1;
  pointer-events: auto;
}
.info-txt{
  display: none;
  font-size: 19px;
  text-align: center;
  margin-bottom: 18px;
}
.info-txt span{
  color: #AA57CC;
}

@media (max-width: 520px) {
  .wrapper{
    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;
  }
  .info-txt{
    font-size: 18px;
  }
}
Palindrome Checker in HTML

Adding JS Constant

Now our project is looking beautiful, Now we need to add functionalities in this. So as we know JavaScript is powerful, so we will take help from JS. In JS file, we have added some constants in order to fetch required elements. We have used the document.querySelector() method to fetch the classes of elements to access those elements. We have fetched here input field, and button.

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

Adding Functionality to Button

Now we will add an event listener for click event on the button. In this, we have added a variable in which we have assigned the reverse value of input field using let reverseInput = userInput.split("").reverse().join("");. Then we are checking condition where input field’s value is equal to reverse value, if yes then we will print the positive result otherwise negative result.

After that, we need to wipe out the result if the input field gets cleared after the result of previous value. For that, we are adding another event listener to listen keyup event. In this, we will erase the value like inputted value along with special character using this line of code userInput = txtInput.value.toLowerCase().replace(/[^A-Z0-9]/ig, "");. Then we will check if userInput still has some value then we will just add active class which has some CSS, otherwise will display none and remove active class to back to normal.

checkBtn.addEventListener("click", () => {
    let reverseInput = userInput.split("").reverse().join("");
    infoTxt.style.display = "block";
    if(userInput != 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", () => {
    userInput = txtInput.value.toLowerCase().replace(/[^A-Z0-9]/ig, "");
    if(userInput) {
        return checkBtn.classList.add("active");
    }
    infoTxt.style.display = "none";
    checkBtn.classList.remove("active");
});
Palindrome Checker in HTML

Full Source Code to Make Palindrome Checker in HTML, CSS & JavaScript

index.html

<!DOCTYPE html>

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

    <script src="script.js"></script>
    
  </body>
</html>

style.css

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #AA57CC;
}
::selection{
  color: #fff;
  background: rgb(170,87,204,0.8);
}
.wrapper{
  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;
}
.inputs{
  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;
}
.inputs button.active{
  opacity: 1;
  pointer-events: auto;
}
.info-txt{
  display: none;
  font-size: 19px;
  text-align: center;
  margin-bottom: 18px;
}
.info-txt span{
  color: #AA57CC;
}

@media (max-width: 520px) {
  .wrapper{
    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;
  }
  .info-txt{
    font-size: 18px;
  }
}

script.js

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

checkBtn.addEventListener("click", () => {
    let reverseInput = userInput.split("").reverse().join("");
    infoTxt.style.display = "block";
    if(userInput != 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", () => {
    userInput = txtInput.value.toLowerCase().replace(/[^A-Z0-9]/ig, "");
    if(userInput) {
        return checkBtn.classList.add("active");
    }
    infoTxt.style.display = "none";
    checkBtn.classList.remove("active");
});

Output

Palindrome Checker in HTML
Demo
Download Code

Check out awesome video reference here:

You may also like:

  • How To Build a Quiz App With HTML CSS and JavaScript
  • How To Make Slide Puzzle Game in HTML CSS and JavaScript
  • How To Make Space War Game Using HTML, CSS & JavaScript

Related

Subscribe to Our Newsletter

Subscribe to our newsletter to get our newest articles instantly!

TAGGED: CSS, javascript, Palindrome Checker in HTML
Share this Article
Facebook Twitter Email Print
What do you think?
Love1
Sad0
Happy0
Sleepy0
Angry0
Dead0
Wink0
Posted by Rocoderes
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
Previous Article JavaScript Set Intersection JavaScript Set intersection With Two Different Ways
Next Article Word Scramble Game How To Create Word Scramble Game in HTML
Leave a comment Leave a comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

- Advertisement -

You Might Also Like

Responding to and Tracking Key Presses

How to Work With Responding to and Tracking Key Presses

February 5, 2023
Passing a JavaScript Value Between HTML Pages

Passing a JavaScript Value Between HTML Pages

February 3, 2023
Compare Objects in an Array

JavaScript Problem: Compare Objects in an Array

January 30, 2023
Switching Name Order Using Capturing Groups in Regular Expressions

Switching Name Order Using Capturing Groups in Regular Expressions

January 29, 2023
rocoderesrocoderes
Follow US

Copyright © 2022 All Right Reserved By Rocoderes

  • Home
  • About us
  • Contact us
  • Disclaimer
Join Us!

Subscribe to our newsletter and never miss our latest news, podcasts etc.

Zero spam, Unsubscribe at any time.
Welcome Back!

Sign in to your account

Lost your password?