Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to check the given string is palindrome using JavaScript ?

  • Last Updated : 07 Oct, 2021

A palindrome is a word, sentence, or even number that reads the same from the back and from the front. Therefore if we take the input, reverse the string and check if the reversed string and the original string are equal, it means the string is a palindrome, otherwise, it is not.

Approach:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  1. When the user clicks on the Submit button, we run a JavaScript function.
  2. We first convert the string to lowercase.
  3. Then we split the string into an array using the split() method so that it can be reversed using the reverse() method.
  4. We then join the array back to a string using the join() method.
  5. Lastly, we check that the input string and the reversed string are equal or not. We will update the output accordingly.

Example:

index.html






<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            background-color: grey;
        }
  
        .container {
            background-color: #00ffff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 60vh;
            width: 80vw;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 25px;
            box-shadow: 2px 31px 35px -15px
                        rgba(0, 0, 0, 0.1);
            padding: 10px;
        }
  
        .pallindrome {
            width: 500px;
        }
  
        .input-container {
            text-align: center;
            margin: 30px 0;
  
        }
  
        .btn-container {
            text-align: center;
        }
  
        input {
            width: 70%;
            border: none;
            padding: 15px;
            font-size: 1.1rem;
            border-radius: 10px;
        }
    </style>
  
  
</head>
  
<body>
    <div class="container">
        <div class="pallindrome">
            <header>
                <h1>Palindrome checking using
                    CSS and JavaScript</h1>
            </header>
            <div class="main">
                <div class="input-container">
  
                    <!-- Place to input the string -->
                    <input type="text" placeholder="Enter...">
                </div>
                <div class="btn-container">
  
                    <!-- Button that will activate the check  -->
                    <button>Check</button>
                </div>
                <div>
                    <b>Input String: </b>
                    <span class="input-string"></span>
                    <br>
                    <b>Reversed String: </b>
                    <span class="reversed-string"></span>
                    <p class="output-text"></p>
  
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
  
</html>

script.js




// Getting the elements from DOM
const btncheck = document.querySelector("button");
const str = document.querySelector("input");
const inputString = document.querySelector(".input-string");
const reverseString = document.querySelector(".reversed-string");
const outputText = document.querySelector(".output-text");
  
// Adding event listener when the
// user clicks on the "Check" button
btncheck.addEventListener("click", (e) => {
    e.preventDefault();
  
    // Converting the input string to smallcase
    const input = str.value.toLocaleLowerCase();
  
    // Split the string into an array
    const string = input.split("");
  
    // Reversing the array
    const rearray = string.reverse();
  
    // Join the array back to a string
    const reversedString = rearray.join("");
  
    inputString.textContent = input;
    reverseString.textContent = reversedString;
  
    // Checking the input string and
    // reversed string if they are the same
    if (input == reversedString) {
        outputText.textContent = 
          "The input string is a pallindrome!";
    } else {
        outputText.textContent = 
          "The input string is not a pallindrome";
    }
  
    // Reset the input value
    str.value = "";
});

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!