creocodigo
Check for palindrome using JavaScript

Check for palindrome using JavaScript

Shikhar Baniya's photo
Shikhar Baniya
·

3 min read

Hello Coders! Welcome to another JavaScript Blog. In this, we're going to see how to create a Palindrome Checker using JavaScript. A string is said to be palindrome if it reads the same backward as forward. For e.g. radar string is a palindrome because if we try to read it from backward, it is same as forward. One of the approach to check this is iterate through the string till middle of string and compare a character from back and forth.

Here's a preview -

screen-capture.gif

That being said, let us get started.

Step - 1: Like always, create 3 files - index.html, style.css and script.js.

Step - 2: Copy the below HTML code and paste it into your code editor.

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">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
  <title>Palindrome String</title>
</head>

<body>
  <div class="container">
    <div class="palindrome">
      <header>
        <h1>Check for Palindrome</h1>
        <p>A string is a palindrome if it is read the same from forward or backward.<br> <strong>Ex. dad, madam, refer,
            radar, etc.</strong> </p>
      </header>

      <div class="main">
        <div class="input-container">
          <input type="text" placeholder="Enter your word">
        </div>
        <div class="btn-container">
          <button>Check!</button>
        </div>
        <div class="output-text"></div>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

Step - 3: Below is the CSS code for styling.

CSS

*{
    font-family: 'Poppins', sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f6f7fc;
}
.container{
    width: 30%;
    height: 75%;
    display: flex;
    justify-content: center;
    margin-top: 10%;
    border-radius: 25px;
    background-image: linear-gradient(315deg, #5b6467 0%, #8b939a 74%);
    box-shadow: 2px 31px 35px -15px rgba(0,0,0,0.64);
    padding: 10px;
}
.palindrome{
    width: 500px;
    margin-top: 5%;
}
header h1{
    text-align: center;
    color: #fff;
}
.input-container{
    text-align: center;
    margin: 30px 0;
}
.btn-container{
    text-align: center;
}
header p{
    font-size: 0.9rem;
    color: #fff;
    margin: 15px 0;
    text-align: center;
}
input{
    width: 70%;
    border: none;
    background-color: #fff;
    padding: 15px;
    color: rgb(66, 66, 66);
    font-size: 1.1rem;
    border-radius: 10px;
}
input:focus{
    outline: none;
}
button{
    border: none;
    padding: 10px 25px;
    background-color: #fff;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}
button:hover{
    transform: scale(1.1);
}
.output-text{
 text-align: center;
 height: 100px;
 padding: 20px;
}
.output-text p{
    font-size: 2rem;
    display: block;
    color: #fff;
}

Step - 4: Below is the JavaScript code which is the most important part in this checker. In this, we take the input, reverse the string using reverse() and then when user clicks the button, event will call and check both the strings and if both are equal, Palindrome message will get displayed otherwise not.

JS

const btnCheck = document.querySelector("button");
const str = document.querySelector("input");

btnCheck.addEventListener("click", (e) => {
  e.preventDefault();

  const inputWord = str.value.toLocaleLowerCase();
  const string = inputWord.split("");

  const reArray = string.reverse();

  const joinArray = reArray.join("");

  if (inputWord == joinArray) {
    document.querySelector(".output-text").innerHTML = `<div>
        <p> ${inputWord} = ${joinArray} </p>
        <p style="font-size: 1rem;">It is palindrome.</p>
        </div>`;
        str.value = ""
  } else {
    document.querySelector(
      ".output-text"
    ).innerHTML = `<p style="font-size: 1rem;">It is not a palindrome.</p>`;
  }
});

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love.

JavaScriptValidationHTML5CSScheatsheet