How to check the given string is palindrome using JavaScript ?
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:
- When the user clicks on the Submit button, we run a JavaScript function.
- We first convert the string to lowercase.
- Then we split the string into an array using the split() method so that it can be reversed using the reverse() method.
- We then join the array back to a string using the join() method.
- 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 DOMconst 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" buttonbtncheck.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:
Please Login to comment...