Header Ads Widget

Palindrome checker in JavaScript

My codding spot May 27, 2023

In this post, you will learn to make a palindrome checker using JavaScript in two ways: with built-in methods and with for loop.

What is a palindrome?

A word, mini sentence, number, or word sequence that can be read similarly at both sides forward and backward that word, sentence, and number is called a palindrome.

For example, Radar, Madam, 1331.

What is a palindrome checker?

A palindrome checker is a tool that checks whether the entered string is palindrome or not.

Functionality 

This tool takes input from the user then reverses the input string and matches it with entered string if both are similar then the returned message is “string is a palindrome”. If not matched then returned message is “string is not a palindrome”.

Palindrome checker using JavaScript built-in methods 

An output image of palindrome checker (by built-in methods)
Palindrome checker using built-in methods 


Skills required:-

Basic HTML and CSS skills.

First, define structure by using HTML. Here h1 tag is taken for heading. One input field with text type and button for display result and two labels and two paragraph tags for displaying inputted and reverse strings are taken. 

To center div transform property is used with position property. The box-shadow property is applied to the div element. Other CSS basic properties like padding, margin, font, height, and width are applied for a better look.

In JavaScript, one function is defined which is called on a button using the 'onClick' event. DOM method fetches input then toLowerCase() method converts the input string to lowercase to prevent case sensitivity. After that replaceAll() method removes all whitespace from the string and split() separates all characters in the string. Then reverse() method reverses all these characters and the last join() method merges all these characters into a string. The if else if conditions check for an empty value, compare for input and reverse string.

Code:-

HTML 

<!DOCTYPE html>
<html>
<head>
<title>Palindrome checker with built-in methods</title>
<link rel="stylesheet"  href="palidromecheck.css">
<script src="palindrome.js"></script>
</head>
<body>
<div class="container">
<h1>Palindrome Checker</h1>
<label for="inputval">Enter any word or number::</label>
<input type="text" id="txt"><br>
<button type="button" onClick="palindrome()">Check</button><br>
<label>Input string is:-</label>
<p id="inputxt"></p>
<label>Reverse string is:-</label>
<p id="revs"></p>
<h2 id="res"></h2>
</div>
</body>
</html>

CSS 

/* CSS Document */
body
{
background-color:#000119;
}
*
{
font-family:"Courier New", Courier, monospace;
box-sizing:border-box;
}
.container
{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
height:auto;
max-width:350px;
background-color:#ffffff;
border:3px outset #dedfee;
border-radius:20px;
box-shadow:5px 5px 50px #c1c1c1;
text-align:center;
padding:10px;

}
h1
{
color:#dedfee;
text-align:center;
background-color:#000119;
border:1px groove #dedfee;
}
label
{
color:#003399;
font-size:14pt;
font-weight:bold;
}
input
{
height:25px;
width:100%;
outline:none;
border:2px inset #009933;
padding:5px;
font-size:14pt;
color:#333333;
font-weight:bold;
}
button
{
height:30px;
width:50%;
margin:10px;
font-size:16pt;
font-weight:bold;
background-color:#ffd833;
color:#e3001a;
border:none;
}
p
{
color:#009933;
font-size:13pt;
font-weight:bold;
}
h2
{
color:#e3001a;
}

JavaScript 

function palindrome()
{
let str=document.getElementById("txt").value;
//converts uppercase to lowercase
let casesens=str.toLowerCase();
//Removes whitespace
let text=casesens.replaceAll(/\s/g,'');
//splits entered string in single character
let splt=text.split("");
//reverse split characters
let revrs=splt.reverse();
//merge all characters to string
let merg=revrs.join("");
document.getElementById("inputxt").innerHTML=text;
document.getElementById("revs").innerHTML=merg;
if(str=="")
{
document.getElementById("res").innerHTML="Enter string";
}
else if(text==merg)
{
document.getElementById("res").innerHTML="Entered string is palindrome";
}
else
{
document.getElementById("res").innerHTML="Entered string is not palindrome";
}
}

Output:-


Palindrome checker with for loop 

An output image of palindrome checker using for loop
Palindrome checker using for loop 


Skills required:-

Basic HTML and CSS skills.
for loop, toUpperCase(),replaceAll() with regular expression.

The HTML structure is similar to the above with some minor changes.

The text-shadow and box-shadow properties applied shadow to the text and container respectively. Pseudo-class :focus focuses on the button. 

The for loop runs backward from the last index value to the first index value and stores the reverse string in the array index. The length property is used to count string characters. 


Code:-

HTML 

<!DOCTYPE html>
<html>
<head>
<title>palindrome checker using for loop</title>
<link rel="stylesheet" href="palindrmforloop.css">
<script src="palindromeforloop.js></script>
</head>
<body>
<div class="container">
<h1>PALINDROME CHECKER</h1>
<input type="text" name="txtinpt" id="str" placeholder="Input string">
<button type="button" id="btn" onClick="checkpalindrm()">The string is</button>
<p class="res">Entered string:-</p>
<p id="display"></p>
<p class="res">Reverse string:-</p>
<p id="rev"></p>
</div>
</body>
</html>

CSS 

/* CSS Document */
*
{
box-sizing:border-box;
font-family:"Times New Roman", Times, serif;
}
.container
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
height:auto;
max-width:500px;
background-color:#33010f;
box-shadow:7px 7px 15px #333333;
}
h1
{
color:#fbb57b;
padding:10px;
text-align:center;
text-shadow:3px 3px 5px #fbb570;
}
input
{
padding:5px;
margin-left:10%;
font-size:16px;
width:80%;
border-bottom:3px groove #cecece;
border-top:none;
border-left:none;
border-right:none;
border-radius:20px;
outline:none;
color:#05796b;
font-weight:bold;
}
button
{
margin-top:15px;
margin-left:20px;
margin-bottom:15px;
height:auto;
width:90%;
font-size:14pt;
font-weight:bold;
text-align:center;
border-radius:20px;
background-color:transparent;
border:2px solid #05796b;
color:#f57059;
}
button:focus
{
background-color:#05796b;
box-shadow:3px 3px 10px #057960;
}
.res
{
color:#cecece;
font-size:14pt;
text-align:center;
margin:3px;
}
#display
{
color:#f57059;
}
#rev
{
color:#FFFFFF;
}
#display,#rev
{
text-align:center;
}

JavaScript 

function checkpalindrm()
{
let inputxt=document.getElementById("str").value.replaceAll(/\s/g,"");
let caseconvrt=inputxt.toUpperCase();
document.getElementById("display").innerHTML=caseconvrt;
// specify revrstr varibale null to prevent undefined error
let revrstr="";
for(let i=inputxt.length-1;i>=0;i--)
{
revrstr+=caseconvrt[i];
}
document.getElementById("rev").innerHTML=revrstr;
if(inputxt=="")
{
document.getElementById("btn").innerHTML="Enter string";
}
else if(caseconvrt==revrstr)
{
document.getElementById("btn").innerHTML="Entered string is palindrome";
}
else
{
document.getElementById("btn").innerHTML="Entered string is not palindrome";
}
}

Output:-


Summary

In this post, you learned about checking string is palindrome or not.

Setting the height property to auto-add responsiveness and the max-width property prevents the width of the container to expand width to the specified width.


Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments