Open In App

How to check the given string is palindrome using JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:

  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;
        }
  
        .palindrome {
            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="palindrome">
            <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 palindrome!";
    } else {
        outputText.textContent = 
          "The input string is not a palindrome";
    }
  
    // Reset the input value
    str.value = "";
});


Output:



Last Updated : 22 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads