This is a simple JavaScript project that will detect Palindrome. This is a simple Palindrome Checker made by JavaScript. If you are wondering how to easily identify Palindrome then welcome to this article.
I know 90% of people know what Palindrome is, but there are many users who do not know what it is and what it is used for. Palindrome is actually a word, verse, sentence or a number that reads the same backward or forward.
Palindrome Checker in JavaScript
Now let's come to this design. This is a simple project with a display and an input box. When you input something in the input box, the result can be seen in the display. Watch its live demo to learn how it works.
Now maybe you are wondering how to make it. This JavaScript Palindrome Checker is very easy to make but for that you need to know some JavaScript.
HTML Code
The following html adds basic structure and information.
- An area has been created to view the results first. You can see if your input word is Palindrome.
- Then an input box is created in which you will input the word or number.
- There is a button at the end that will activate the project.
<!--Basic structure-->
<div class="container">
<!--result box-->
<p id="result"></p>
<!--input box -->
<input type="text" id="input-text" placeholder="Enter a word to check">
<!-- submit button -->
<button id="btn">Check</button>
</div>
CSS Code
Now we need to design some css. First the webpage was designed by some css.
- Then the basic structure of Palindrome Checker is designed. The box uses
min-width: 450pxand background-color: #ffffff. - Then the input box is designed. The size of the input box depends on the
padding: 13px 7px. - Here I have used the width of the button: 130px and the background color blue.
- At the end the display is designed. The size of the result box depends on the amount of content.
/*Basic design of webpage*/
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #1f85e0;
}
/*Basic structure of Palindrome Checker*/
.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);
}
.container *{
font-family: "DM Sans", sans-serif;
outline: none;
}
/*Design the input box*/
input{
width: 100%;
border: none;
border: 2px solid #d5d5d5;
padding: 13px 7px;
font-weight: 400;
}
input:focus{
border-bottom: 2px solid #b156fe;
}
/*Design of submit 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;
}
/*Design the result area*/
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);
}
JavaScript Code
The work of Palindrome Checker JavaScript design has been done but the real work is still left.
You will need to use some JavaScript to activate it. But there is no need for Beginners to worry. I have given all the necessary explanations.
- First the value of the input box is collected and stored in
'txt'. - Then some calculations check whether the input value is Palindrome.
- At the end
'textContent'has been arranged to show the result in the display.
document.getElementById("btn").addEventListener("click",function(){
//Input value has been collected
let txt = document.getElementById("input-text").value;
checkPalindrome(txt);
});
//I have given all the calculations below
function checkPalindrome(txt){
//'a-zA-Z0-9' will match all alphanumeric characters, i.e. lower case alphabet, upper case alphabet, and all numbers
//The "g" modifier specifies a global match.
let txt_new = txt.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
let len = txt_new.length;
//'len' Indicates the total number of characters present in it
let halfLen = Math.floor( len/2 );
let result =document.getElementById("result");
let i;
for( i = 0; i < halfLen; i++){
// !== is strict inequality operator
//strict inequality operator checks whether its two operands are not equal, returning a Boolean result.
if( txt_new[i] !== txt_new[len-1-i]){
result.textContent = "Sorry! Not a palindrome 😔";
return;
}
//textContent property sets or returns the text content of the specified node
result.textContent = "Yes! It's a palindrome 😍"
}
}
Hopefully you have no problem understanding the above JavaScript line.
Please comment on how you like this palindrome program in html. I have shared this JavaScript Palindrome Checker live preview link above.
Top comments (0)