Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I am having trouble finding the bug in my code. It passes tests 1-4 but fails the rest. I have not been able to find any specific solution on the forum or online that resolves this issue.

The code seems to work correctly within the preview and console when manually entering inputs, correctly determining the state of the palindrome and displaying the results as per the test requirements, but fails to pass the run tests. I have added console logs that show the correct data logging as it tests

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.0">
    <title>Palindrome Checker</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
      <div class="main-container">
        <div class="hero-container">
          <h1 class="title">Will it Palindrome ?</h1>
        </div>
        <div class="definition-container">
          <h3 class="definition-detail">pal·in·drome</h3>
          <p class="definition-detail">/ˈpalənˌdrōm/</p>
          <p class="definition-detail noun">noun</p>
          <p class="definition-body">a word, phrase, or sequence that reads the same backward as forward, e.g., <span>madam</span> or <span>nurses run</span>.</p>
        </div>
        <div class="palindrome-container">
          <label for="text-input">Enter your text to check if it is a Palindrone:</label>
          <div class="input-container">
            <input id="text-input" class="input-text" type="text"  />
            <button id="check-btn" class="input-btn">Check</button>
          </div>
          <div id="result" class="result-container">
          </div>
        </div>
      </div>
      <script src="script.js"></script>
    </div>  
  </main>
</html>

/* file: script.js */
const checkButton = document.getElementById('check-btn');
const textInput =  document.getElementById('text-input');
const result = document.getElementById('result');

const checkInput = () => {
  if (textInput.value === '') {
    return alert("Please input a value");
  }

    const cleanInput = textInput.value.replace(/[^A-Za-z0-9]/gi, '').toLowerCase();
    const reverseInput = cleanInput.split('').reverse().join('');
console.log(cleanInput === reverseInput);
  
    if (cleanInput === reverseInput) {
        result.innerText = `${textInput.value} is a palindrome`;
console.log(`${textInput.value}   ${cleanInput}   ${result.innerHTML}`);
   
    } else {
        result.innerText = `${textInput.value} is not a palindrome`;
console.log(`${textInput.value}   ${cleanInput}   ${result.innerHTML}`);
    }

textInput.value = '';

}

// click event listener
checkButton.addEventListener('click', checkInput);


/* file: styles.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: Georgia, serif;
  font-size: 10px;
  line-height: 1.5rem;
}

main {

}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 75%;
  height: 80vh;
  margin: 0 auto;
  margin-top: 10vh;
  background-color: #d8dde6;
  border-radius: 10px;
  overflow: hidden;
}

.hero-container {
  display: flex;
  justify-content: center;
  width: 75%;
  height: auto;
  margin-top: 10%;
}

.title {
  font-size: 4.5rem;
  line-height: 4.5rem;
  letter-spacing: .2rem;
  padding: 2rem 0rem;
}

.definition-container {
  width: 75%;
  height: auto;
  margin-top: 10%;
}

.definition-detail {
  font-size: 2.5rem;
  line-height: 2rem;
  padding-top: 2rem;
  padding-left: 5%;
}

.noun {
  padding-bottom: 3rem;
}

.definition-body {
  font-size: 2.1rem;
  text-indent: -2rem;
  padding: 0 10% 2rem 15%;
}

.definition-body span {
  font-weight: bold;
  font-style: italic;
}

.palindrome-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 75%;
  height: auto;
  margin-top: 10%;
  overflow: hidden;
}

label {
  font-size: 2.25rem;
  padding-bottom: 2rem;
}

.input-container {
  width: 75%;
  display: flex;
  align-items: center;
}

.input-text {
  width: 80%;
  font-size: 2rem;
  padding: .75rem;
  border: 0;
  border-radius: 10px;
  border-bottom: 2px solid #000;
  background-color: ;
}

.input-btn {
  font-size: 2rem;
  padding: 1rem 3rem;
  background-color: #fca521;
  border:0;
  border-bottom: 2px solid #000;
  border-radius: 10px;
  margin-left: 2rem;
}

.input-btn:hover {
  background-color: #fc9621;
}

.result-container {
  padding-top: 5rem;
}

.hide {
  display: none;
}

.result-container {
  font-size: 2.5rem;
  font-weight: bold;
}

@media (max-width: 750px) {
  .input-container {
    flex-direction: column;
  }
  .input-text {
    width: 100%;

  }
  .input-btn {
    margin-left: 0;
    margin-top: 2rem;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1.1 Safari/605.1.15

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Welcome to the forum @745pvbp659

Your code passes.
Reset the step and try again. If that doesn’t work, refresh the page, disable dark mode, disable ad blockers. Or, use another browser.
If the above steps do not work, you may need to restart the computer.

You could try removing the css.

Happy coding