Palindrome Checker Javascript | Palindrome Checker Html Css Javascript

Palindrome Checker Javascript | Palindrome Checker Html Css Javascript

Welcome🎉 to Code With Random blog. In this blog, we learn how we create Palindrome Checker Javascript. We use HTML, Css, and javascript for this Palindrome Checker Javascript. I hope you enjoy our blog so let’s start with a basic HTML structure for the Palindrome Checker Javascript.

HTML Code

Table of Contents

 <!DOCTYPE html>  
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Palindrome Checker</title>
<link rel="stylesheet" href="custom.css" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Grandstander:wght@100;200;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="text">
<h1>Palindrome Checker</h1>
<form>
<label for="input">Input String:</label>
<input type="text" id="input" name="input" autocomplete="off">
</form>
<h4>To check for Palindrome, click the button after giving input.</h4>
<button onclick="palindrome_check()">Click Here!</button>
<p id="prog"></p>
</div>
</body>
<script src="palindrome.js"></script>
</html>

There is all the HTML code for the Palindrome Checker Javascript. Now, you can see an output with Palindrome Checker Javascript then we write javascript for Palindrome Checker Javascript.

output

CSS code

 *{  
color: black;
text-align: center;
font-size: 20px;
margin: 0 0;
padding: 0;
font-family: 'Grandstander', cursive;
}
body{
background-color: #2c0542;
}
h1{
font-size: 2rem;
color: ;
margin-bottom: 20px;
}
form{
margin-bottom: 20px;
}
h4{
font-size: 1.3rem;
color: black;
margin-bottom: 10px;
}
button{
margin-bottom: 30px;
-webkit-text-stroke: 1px black;
border-radius: 8px;
padding: 5px;
width: 25%;
}
p{
font-size: 1.5rem;
color: black;
border: 3px solid lightblue;
min-height: 30px;
width: 100%;
background-color: white;
-webkit-text-stroke: 1px black;
}
.text{
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
height: auto;
width: 60%;
border: 2px solid white;
border-radius: 8px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: black;
-webkit-text-stroke: 1px black;
}

Css Updated output

 //Palindrome Checker  
function palindrome_check(){
var ishtra =document.getElementById("input").value;
var reg = /[W_]/g;
var smallstring = ishtra.toLowerCase().replace(reg, "");
var reversed = smallstring.split("").reverse().join("");
if (reversed === smallstring){
document.getElementById("prog").innerHTML =
" It is a palindrome. ";
}
else{
document.getElementById("prog").innerHTML =
" It is not a palindrome. ";
}
}

Final output


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Palindrome Checker Javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create Palindrome Checker Javascript using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 

Check out more…..

Leave a Reply