DEV Community

loading...
Cover image for Palindrome checker using Html,Css,Js

Palindrome checker using Html,Css,Js

umapreethidev profile image Umapreethi Santhanakrishnan ・2 min read

Sixth day of my challenge.

Palindrome checker:

A palindrome is a word, number, phrase, or other sequence of characters which reads the same backward as forward, such as madam or racecar or the number 10801.

Steps:

Type - 1:

  • Get the input value using DOM methods.
  • Convert the string to lowercase.
  • Create a empty variable to store the reverse string.
  • Using for loop, store the values to the variable.
  • Check the reverse string and input value are equal using if condition.
    • If both are equal, then display It is a Palindrome
    • If both are not equal, then display It is not a Palindrome
const inputVal = document.getElementById("inputVal").value;
const input = inputVal.toLowerCase();
console.log(input);
let reverseVal = "";
for (let i= input.length-1; i>=0; i--) {
     reverseVal += input[i];
 }
console.log(reverseVal);

//Condition to check the palindrome
  if (reverseVal == input) {
    result.innerHTML = "It is a Palindrome!!!";
  } else {
    result.innerHTML = "It is  not a Palindrome";
  }
Enter fullscreen mode Exit fullscreen mode

Type - 2:

  • Follow first two steps from type-1.
  • Split the inputValue using split().
  • Then, reverse the inputValue using reverse() function.
  • Then join the inputValue using join() function.
  • Finally follow the last step as in Type-1(check the palindrome using if condition).
function palChecker(event) {
  event.preventDefault();

  const inputVal = document.getElementById("inputVal").value;
  const input = inputVal.toLowerCase();
  console.log(input);

  const split = input.split("");
  let reverse = split.reverse();
  let revWord = reverse.join("");
  const result = document.getElementById("result");

  //Condition to check the palindrome
  if (revWord == input) {
    result.innerHTML = "It is a Palindrome!!!";
  } else {
    result.innerHTML = "It is  not a Palindrome";
  }
}
Enter fullscreen mode Exit fullscreen mode

References:

Discussion (0)

pic
Editor guide