Palindrome Checker
Make world's simplest browser-based utility for checking if text is a palindrome. Load your text in the input form on the left and it'll instantly get tested for its palindromeness. Powerful and fast. Load plain text – check for a palindrome.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Check Pallindrome</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Poppins:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="box">
<div class="top">
<h1>Pallindrome</h1>
<p>Pallindrome is a word, phrase, or sequence that reads the same backwards as forwards</p>
</div>
<div class="middle">
<input type="text" name="" id="inputvalue">
</div>
<div class="bottom">
<button id="submit">Check Pallindrome</button>
<div class="remarks"><p id="remarks">Check Any Sentence Or Word</p></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body{
background-color:#181E2C;
}
.container{
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container .box{
width:400px;
background-color:white;
display: flex;
flex-direction:column;
align-items: center;
text-align: center;
padding-top:3%;
border-radius:12px;
}
.container .box .top h1{
font-family:montserrat;
color:#335FAB;
}
.container .box .top p{
font-family:Poppins;
}
.container .box .middle{
height:100px;
display: flex;
justify-content: center;
align-items: center;
}
.container .box .middle input{
height:45px;
border:2px solid #181E2C;
width:350px;
padding-left:2%;
font-size:1.5rem;
font-family:Poppins;
}
.container .box .bottom{
margin-top:5%;
}
.container .box .bottom button{
height:55px;
width:355px;
background-color:#181E2C;
font-family:Poppins;
color:white;
font-size:1.2rem;
font-weight:bolder;
cursor:pointer;
border:none;
}
.container .box .bottom button:hover{
background-color:#335FAB;
transition-duration:0.3s;
}
.container .box .bottom .remarks{
font-family:Poppins;
max-height:200px;
display: flex;
justify-content: center;
align-items: center;
padding:2%;
font-size:1.2rem;
}
.container .box .bottom .remarks span{
color:#335FAB;
}
Javascript
let button = document.getElementById('submit');
let inputvalue = document.getElementById('inputvalue');
let remarks = document.getElementById('remarks');
button.addEventListener('click',()=>{
if(inputvalue.value==""){
remarks.innerHTML =`Please Enter Some '<span>Words</span>'`;
}else{
let reversedvalue = inputvalue.value.split('').reverse().join().replace(/[,.\s?]/g,'').toUpperCase();
let originalvalue = inputvalue.value.replace(/[,.\s?]/g,'').toUpperCase();
if(reversedvalue==originalvalue){
remarks.innerHTML=`'<span>${inputvalue.value}</span>' is a Pallindrome`;
}else{
remarks.innerHTML=`'<span>${inputvalue.value}</span>' is not a Pallindrome`;
}
}
})