Palindrome Checker Javascript | Palindrome Checker Html Css Javascript

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

 <!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
Palindrome Checker Javascript | Palindrome Checker Html Css Javascript

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 Javascript | Palindrome Checker Html Css Javascript

Javascript code 

 //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
Palindrome Checker Javascript | Palindrome Checker Html Css Javascript


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 

Post a Comment

Previous Post Next Post