<div>
  <label for="input" class="input-label">Input:</label>
  <input id="input" type='text' placeholder="Enter a palindrome text..." rows="5" />
  <label for="output" class="output-label">Output:</label>
  <pre id="output"></pre>
</div>
* {
  margin: 0;
  box-sizing: border-box;
}
div {
  border: 3px solid grey;
  margin: auto;
  padding: 2rem 1rem;
  background-color: #29282e;
  border-radius: 0.3rem;
}
pre {
  display: block;
  position: relative;
  top: 1rem;
  color: #97c389;
  overflow: auto;
  line-height: 1.5rem;
  background-color: #1b2b34;
  padding: 0.5rem;
  border: 2px solid #324149;
}
label {
  color: #fff;
  font-family: consolas;
  display: block;
}
.input-label {
  margin-bottom: 0.5rem;
}
.output-label {
  margin-top: 0.5rem;
}
input {
  width: 100%;
  padding: 0.5rem;
}

// function that checks whether a string argument is a palindrome or not.

function palindromeChecker(str) {
  const regex = /[a-zA-Z0-9]/g;
  str = str.toLowerCase();
  const arr = str.match(regex);
  str = arr.join("");
  let backwardStr = arr.reduceRight((str, char) => str + char);
  return str === backwardStr;
}

// output
const input = document.getElementById("input");
const output = document.getElementById("output");
input.addEventListener("input", () => {
  if (!input.value) {
    output.textContent = "";
  } else {
    const val = palindromeChecker(input.value).toString();
    output.textContent = "> " + val;
  }
});

// tests
// console.log(palindromeChecker("eye"), "=> true");
// console.log(palindromeChecker("_eye"), "=> true");
// console.log(palindromeChecker("race car"), "=> true");
// console.log(palindromeChecker("not a palindromeChecker"), "=> false");
// console.log(palindromeChecker("A man, a plan, a canal. Panama"), "=> true");
// console.log(palindromeChecker("never odd or even"), "=> true");
// console.log(palindromeChecker("nope"), "=> false");
// console.log(palindromeChecker("almostomla"), "=> false");
// console.log(palindromeChecker("My age is 0, 0 si ega ym."), "=> true");
// console.log(palindromeChecker("1 eye for of 1 eye."), "=> false");
// console.log(palindromeChecker("0_0 (: /- :) 0-0"), "=> true");
// console.log(palindromeChecker("five|_/|four"), "=> false");
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.