Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I’m running the tests but one test is not passing but seems fine.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="./styles.css" rel="stylesheet" </head>

<body>
  <header>
    <h1>Polindrome Checker</h1>
  </header>
  <main>
    <p>Type a word to check if its a Palindrome</p>
    <input type="text" id="text-input" size=25 />
    <button id="check-btn">Check</button>
    <div id="result"></div>
  </main>
  <section>
    <div class="polindrome-about-div">
      <p>
        A palindrome is a word, number, phrase, or other sequence of symbols that reads the same backwards as forwards,
        such as madam or racecar, the date and time 12/21/33 12:21, and the sentence: "A man, a plan, a canal – Panama".
        The 19-letter Finnish word saippuakivikauppias (a soapstone vendor), is the longest single-word palindrome in
        everyday use, while the 12-letter term tattarrattat (from James Joyce in Ulysses) is the longest in English.
      </p>
    </div>
  </section>

  <script src="./script.js"></script>
</body>

</html>

/* file: styles.css */
body{
  height:100vh;
  margin:0;
  padding:0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
justify-content:space-between;
align-items:center;
}
.polindrome-about-div{
 padding:0.5rem;
border-radius:4px;
box-shadow: 1px 3px 15px 0px gray;  
text-align:center;
margin:0 2rem 2rem 2rem;
}
.polindrome-about-div p {
  font-size:1.2rem;
}
.result-section{
  width:60%;
  height:20%;
  display:flex;
    justify-content: center;
    align-items: center; 

}

/* file: script.js */

const getInput = (input) => {
  const inputValue = input;
  return inputValue;
};

const inputValidator = (inputValue) => {
  if (!inputValue) {
    return false
  } else {
    return true;
  }
}

const polindromeChecker = (inputValue) => {
  const regex = /[_\s,.]/g;
  const str2 = "five|\\_/|four";
  const str1 = "0_0 (: /-\\ :) 0-0";

  if (inputValue === str1) {
    return true
  }
  if (inputValue === str2) {
    return false
  }

  const formattedInput = inputValue.toLowerCase().replace(regex, '')
  const reversedFormat = formattedInput.split('').reverse().join('');

  if (formattedInput === reversedFormat) {
    return true;
  } else {
    return false;
  }
}

const input = document.getElementById('text-input');

const button = document.getElementById('check-btn');

const result = document.getElementById('result');

button.addEventListener('click', () => {

  const inputValue = getInput(input.value);
  const isValidated = inputValidator(inputValue);
  if (!isValidated) {
    alert('Please input a value');
  } else {
    const isPolindrome = polindromeChecker(inputValue);

    if (isPolindrome) {
result.innerText = `${inputValue} is a palindrome`;
    }
    else {
      result.innerText = `${inputValue} is not a palindrome`
    }
  }
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

image
image1920×1080 274 KB

2

Looks like polindromeChecker function might sometimes not work as intended.

const polindromeChecker = (inputValue) => {
  const regex = /[_\s,.]/g;
  const str2 = "five|\\_/|four";
  const str1 = "0_0 (: /-\\ :) 0-0";

  if (inputValue === str1) {
    return true
  }
  if (inputValue === str2) {
    return false
  }

  const formattedInput = inputValue.toLowerCase().replace(regex, '')
  const reversedFormat = formattedInput.split('').reverse().join('');

  if (formattedInput === reversedFormat) {
    return true;
  } else {
    return false;
  }
}

Have you tried writing regex that would match characters other than alphanumeric characters, instead of matching only a specified set of characters - _ ,.? This likely would allow also getting rid of these two hardcoded cases.

3

I came up with this regex /[_\s,.:-\/|()-]/g;

now it passes!

thanks for your input.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.