HomeJavascriptPalindrome Checker App Javascript

Palindrome Checker App Javascript

Hello friends. In today’s tutorial I will teach you how to create ‘Is it a palindrome?’. All you need is HTML, CSS, and Javascript to create this project. This a beginner-friendly project. If you are looking for more complicated projects you can check out the playlist here.

Video Tutorial

Do take a look at my YouTube channel. Whether you are looking to start a new career or just looking to enhance your existing skill set, we have got you covered. Subscribe now and take your first step toward becoming a professional web developer!

Project Folder Structure:

Before we start coding we take a look at the project folder structure. We start by creating a folder called – ”Is it a palindrome?”. Inside this folder, we have 3 files. These files are – ‘index.html’, style.css, and script.js.

HTML:

We begin with the HTML code. Copy the code below and paste it into your HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Is It A Palindrome?</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h2 class="app-title">Is It A Palindrome?</h2>
      <div class="input-wrapper">
        <input type="text" id="input-text" placeholder="Enter a word" />
        <button id="btn">Check</button>
      </div>
      <p id="result"></p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS:

Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #4571f5;
}
.container {
  width: 90%;
  max-width: 31.25em;
  background-color: #ffffff;
  padding: 4em 3em;
  border-radius: 0.5em;
  box-shadow: 0 2em 3.5em rgba(0, 9, 50, 0.3);
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.app-title {
  color: #172039;
  font-size: 1.6em;
}
.input-wrapper {
  display: grid;
  grid-template-columns: 9fr 3fr;
  gap: 1em;
  margin: 2em 0 1em 0;
}
input {
  border: none;
  border-bottom: 2px solid #e2e4ef;
  color: #172039;
  padding: 1em 0;
  font-weight: 400;
  font-size: 1em;
}
input:focus {
  border-bottom: 2px solid #4571f5;
}
button {
  font-size: 1em;
  padding: 1em 0.5em;
  background-color: #4571f5;
  border: none;
  color: #ffffff;
  border-radius: 0.5em;
  cursor: pointer;
}
p {
  text-align: center;
  color: #ffffff;
  font-weight: 400;
  padding: 1em 0;
  border-radius: 0.5em;
  transition: 0.5s;
}
p span {
  font-weight: 500;
  font-style: italic;
}
.success {
  background-color: #01bd5f;
  animation: pop 0.4s;
}
.error {
  background-color: #f52a3b;
  animation: pop 0.4s;
}
@keyframes pop {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

Javascript:

Finally, we add functionality using Javascript. Once again copy the code below and paste it into your script file.

We begin by creating initial references. When the user clicks submit we first check if the input is empty. We stop the code if the input is empty else, we remove any non-alphanumeric characters from the word and also convert all the letters to lowercase. Further, we reverse the word by splitting it into an array, reversing the array, and joining the letters back. If the reversed word and current word are the same we display that the given word is a Palindrome else, not a palindrome. Finally, we add classes to our message to match the color based on the message.

//Select relevant DOM elements
const button = document.querySelector("#btn");
const inputText = document.querySelector("#input-text");
const result = document.querySelector("#result");

//Add event listener to the button
button.addEventListener("click", () => {
  //Get the input text value and trim any whitespaces
  const text = inputText.value.trim();

  //Check if the input is empty
  if (text.length == 0) {
    //Show an alert if the input is empty
    alert("Input cannot be empty");
    return; //Exit the function if the input is empty
  }

  //Remove any non-alphanumeric characters and convert to lowercase
  const cleanText = text.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();

  //Check if the cleaned text is a palindrome by comparing the original and reversed strings
  const isPalindrome = cleanText === cleanText.split("").reverse("").join("");

  //Create a message based on whether the input is a palindrome or not
  const message = isPalindrome
    ? `<span>Yes.</span>It's a palindrome!`
    : `<span>Nope.</span>Not a palindrome!`;

  //Unpdate the result element with the message
  result.innerHTML = message;
  result.classList.remove("error", "success");
  setTimeout(() => {
    result.classList.add(isPalindrome ? "success" : "error");
  }, 10);
});

That’s all for this tutorial. If you have any queries you can post them below. Also if you have suggestions or feedback do let me know. You can download the source code easily by clicking on the ‘Download Code’ button below.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

4 × four =

Most Popular