Palindrome Checker Any Word or Sentences

Palindrome Checker Any Word or Sentences

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`;
        }
    }
})

Did you find this article valuable?

Support Dipesh Murmu by becoming a sponsor. Any amount is appreciated!