Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I’ve set the id attribute of input, button and div to text-input, check-btn and result relatively but the “test runner” couldn’t detect ?

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"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="styles.css"/>
<title>palindrome-checker</title>
</head>
  <body>
    <main class="container">
      <div class="palindrome-div">
        <h1 id="title">Palindrome Checker</h1>
        <input id="text-input" type="text" placeholder="key-in your text to check here" required/>
        <button id="check-btn" type="submit">submit</button>
        <div id="result">Welcome to Palindrome Checker Page</div>
      </div>
    </main>
    <script src="script.js"></script>
  </body>
</html>


/* file: styles.css */
body {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/5/5f/Original_Doge_meme.jpg');
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  display: block;
  margin: 40px auto; 
  height: 25px;
  font-size: 50px;
}

input {
  display: block;
  margin: 10px auto; 
  width: 300px;   
  height: 30px;
}

button {
  display: block;
  margin: 10px auto;
  width: 100px;   
  height: 25px;  

}

#result {
  display: block;
  margin: 40px auto; 
  height: 25px;
  font-size: 20px

}


/* file: script.js */
const submitButton = document.getElementById("check-btn")
const userText = document.getElementById("text-input")
const output = document.getElementById("result")

submitButton.addEventListener("click", () => {

const checkWord = (userText) => {
  const rawWord = userText.replace(/[^A-Za-z0-9]/gi, "").toLowercase();
  if (rawWord === [...rawWord].reverse().join("")):
  output.innerHTML = `${userText} is a palindrome`;
}else{
  output.innerHTML = `${userText} is not a palindrome`;
}if (userText === ""){
  alert("Please input a value");
  return;
}
});
/*only Two outcome, 
"${userText} is a palindrome"
"${userText} is not a palindrome". 
reflecting in #result. */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36 Edg/125.0.0.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

Screenshot 2024-06-04 at 11.08.56 PM
Screenshot 2024-06-04 at 11.08.56 PM1913×658 179 KB

2

The issue isn’t in your HTML, it’s in your JavaScript file.

It should be .toLowerCase() with a capitalized “c”.

→ If you opened the console you would see this message:

TypeError: userText.replace(…).toLowercase is not a function

you should use curly braces {} instead of :

And your checkWord function hasn’t been called at all to execute the code inside.
Call it at the end with the value of your input: checkWord(userText.value)

because userText declared at the top as an element reference
so you need to get the text value of it.

with these modifications, you should pass.

But, you can move the condition with the alert message to be the first condition to check in order to exit the function and skip the process of checking for a palindrome in case the user didn’t enter any text.

1 Like
3

I’ve manage to pass the test with some amendment of code
Thank you for pointing out the faulty part of them.
I thought that it is possible to directly call the function with the .addEventListener.
Appreciate your help !

1 Like
4

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