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:
- AdBlock Checker in JavaScript
- Custom Right Click Context Menu
- Cookie Consent Box in JavaScript
- Create Custom Captcha in JavaScript
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 - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Palindrome Checker in JavaScript | CodingNepal</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>
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('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;
}
}
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("");
infoTxt.style.display = "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, "");
if(filterInput) {
return checkBtn.classList.add("active");
}
infoTxt.style.display = "none";
checkBtn.classList.remove("active");
});
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.
