Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.
I’m not sure why this isn’t passing the test am I missing something? please help.

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>
    <h1>Palindrome Checker</h1>

    <div id="result" class="checker">
        <input id="text-input">
        <button id="check-btn" type="submit">Check</button>
        <div id="result-div"></div>
        
    </div>

    <div id="explanation">
        <h2>What is a palindrome?</h2>
        <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.</p>
    </div>
    <script src="script.js"></script>
</body>
</html>


/* file: styles.css */



/* file: script.js */
/* gets the HTML elements to be used in the JS script */
const textInput = document.getElementById("text-input"); 
const checkBtn = document.getElementById("check-btn");
const resultDiv = document.getElementById("result");     

/*a function to check if the user has submitted an empty input */
const checkPalindrome = (input) => {
  if (input === "") {
    alert("Please input a value");
    return;
  } 
  const originalInput = input;

/* sanitize the input so non alphanumerics are disregarded */
  let sanitizeInput = input.replace(/[^A-Za-z0-9]/gi, '').toLowerCase(); 
      /*splits the sanitized data into a array*/
  let inputString = sanitizeInput.split(' '); 
      /*creates the input but reverses it */
  let reversedInputString = [...inputString].reverse(); 
      /*  the result text to be displayed later */

      /*this uses a ternary operator (true case : false case)*/
  let resultText = `${originalInput} ${inputString.join("") === reversedInputString.join("") ? "is" : "is not"} a palindrome.`;




  const resultPElement = document.createElement(`p`);
  resultPElement.className = "result-text";
  resultPElement.innerHTML = resultText; 
  /*creates a p element to be added*/
  resultDiv.appendChild(resultPElement);
  /*adds the p element into the resultDiv */
};

checkBtn?.addEventListener('click', () => {
  checkPalindrome(textInput?.value); 

  /*makes the submit button reactive so that the inputed word can be checked */
});

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

you have two issues that I have found:
you split on spaces, but you removed spaces already. You want to split on empty string.

also, everytime I try a different input I get a new sentence. there should be only one element that has the result solution, that changes every time the button is pressed.

1 Like
4

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