JSFiddle - React, Tailwind, and code Playground

by irbaz

HTML

<div class="con">
        <div class="a">
            <br>
            <h4>TO CHECK PALINDROME</h4>
                <br>
            <input type="text" name="" id="check"placeholder="Enter here....">
            <button onclick="find()">CHECK</button>
            <p>RESULT:</p>
            <p id="res"></p>
        </div>
    </div>

CSS

body{
        background-color:cadetblue;
    }
    .con{
height: 170vh;
width: 80%;
border: 1px solid rgb(247, 241, 241);
text-align: center;
margin-left: 12%;
margin-top: 0%;
background-color: white;
box-shadow: 1px 1px 27px white;
/* background-color: black; */
    }
    button{
        height: 30px;
        width: 16%;
        background-color: black;
        border: 1px solid black;
        cursor: pointer;
        color: white;
    }
    input{
        height: 22px;
    }
    p{
        font-weight: bold;
    }
    a{
        color: black;
        text-decoration: none;
    }

JavaScript

function find(){
            let data = document.getElementById("check").value.toLowerCase();
            
            let palin = true;
            for (let i = 0; i < Math.floor(data.length / 2); i++) {
                if (data[i] !== data[data.length - 1 - i]) {
                    palin = false;
                    break;
                }
            }
            if (palin) {
                document.getElementById("res").innerHTML = "This is a palindrome.";
            } else {
                document.getElementById("res").innerHTML = "This is not a palindrome.";
            }
        }