Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Hi, my code was working as prescribed, I’ve got all checks. Then I started working on my css and …puff everything went off, only the first 4 checked remained. What happened=

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Palindrome checker</title>
  </head>
  <body>
    <h1>Palindrome Checker</h1>
    <main>
      <div class='container'>
        <input id="text-input" placeholder='Enter a word or a phrase'required>
        <button id="check-btn">Check</button>
      </div>
        <div id="result"></div>
    </main>
    <script src="script.js"></script>
  </body>
</html>


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

function cleanInput(str) {
  const regex = /[\s()\/,_.-]/g;
  return str.replace(regex, '');
}

checkBtn.addEventListener('click', () => {
  if (textInput.value === '') {
    return alert ('Please input a value');
  } 

  const cleanedInput = cleanInput(textInput.value).toLowerCase();
  
  const reverse = cleanedInput.split('').reverse().join('');
  
  if (reverse === cleanedInput) {
    
    result.innerText = `"${textInput.value}" is a palindrome!`;
  } else {
    result.innerText = `"${textInput.value}" is  not a palindrome!`;
  }
});



/* file: styles.css */
body {
  background-color: #213116;
}

main {
  background-color: orange;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 2px 2px 3px #95CA81;
}

h1 {
  text-align: center;
  text-shadow: 2px 2px 4px;
  color: #95CA81;
}

.container {
  margin: auto;
  display: block;
}

#text-input {
  margin: 0 auto 10px;
  font-size: 1.2rem;
  display: block;
  width: 90%;
  border-radius: 5px;
}

#check-btn {
  padding: 10px 10px;
  margin: auto;
  border-radius: 10px;
  display: block;
  background-color: #3C2A1A;
  color: #95CA81;
  text-shadow: 2px 1px 3px black;
  box-shadow: 2px 2px 3px;
}

#result {
  font-size: 1.2rem;
  text-align: center;
  margin-top: 5px;
  background-color: #3C2A1A;
  color: #95CA81;
  border-radius: 10px;
}

@media screen and (min-width: 400px) {
  .container {
  display: flex;
  justify-content: center;
  }

  #text-input {
   margin: auto;
  }
}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Hi there and welcome to our community!

Your only issue is here:

You shouldn’t have quote marks around ${textInput.value}.

1 Like
3

Hi and thank you very much, that was driving me crazy, because despite that the code was working !

1 Like