Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Hi
I’ve completed the required functions to check for palindromes, but the project won’t pass me. It only approved the first 4 objectives, I can’t figure out what to code to check the rest, please help me

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" />
    <link href="./styles.css" rel="stylesheet" />
    <title>Palindrome Checker</title>
  </head>
  <body>
    <main class="container">
      <img />
      <h1>Do you know what a palindrome is?</h1>
      <div class="definition">
        <p>A <span>palindrome</span> is a word or phrase that reads the same backwards as forwards.</p>
      </div>
      <div class="checker">
        <p>Want to see if you know any palindrome words or phrases? <br>
        Use our Palindrome Checker to test yourself.</p>
        <div class="text-input" ><label for="text-input">Enter your text below to find out:</label>
        <input id="text-input" type="text"/></div>
        <button class="check-btn" id="check-btn" type="check">Submit</button>
        <div class="results" id="result"></div>
      </div>
    </main>
    <script src="./script.js"></script>
  </body>
</html>

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

function cleanString(input) {
    const cleaned = input.toLowerCase().replace(/[^a-z0-9]/g, '');  
    return cleaned;  
}  

function reverseString(str) {  
    return str.split("").reverse().join("");  
}  

function checkPalindrome() {  
    const input = stringInput.value;  
    const cleanedInput = cleanString(input); 
    const reversedInput = reverseString(cleanedInput); 

    if (input.length === 0) {  
        alert("Please input a value");  
    } else {  
        if (cleanedInput === reversedInput) {  
            result.innerText = `"${input}" is a palindrome`;  
        } else {  
            result.innerText = `"${input}" is not a palindrome`;  
        }  
    }  
}  

  
checkButton.addEventListener("click", checkPalindrome);  



/* file: styles.css */
body {
  font-family: Avant-Garde;
  background-color: #AA336A ;
  color: #C9A9A6;
  margin: 0;
  padding: 0;
}
h1 {
  width: 100%;
  height: 50vh;
  margin: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Avant-Garde;
}
img {
  width: 100% ;
  display: flex;
  align-items: center;
  justify-content: center;
}
.definition {
  font-family: Papyrus;
  background-color: #953553 ;
  color: #F88379;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  border: 2.5px dotted #FFB6C1;
  border-radius: 20px;
  
}
span {
  font-family: Avant-Garde;
  color: #C9A9A6;
}
.checker > p {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  padding: 10px;
}
label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  padding: 10px;
}
input {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  background-color: #AA336A;
  border-width: 0 0 5px 0;
  border-color: #811331;
  border-radius: 20px;
}
button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  background-color: #AA336A;
  border: 5px solid #811331 ;
  border-radius: 50px;
  font-weight: bold;
  color: #C9A9A6;
  font-size: 25px;
  font-family: Perpetua;
}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Welcome to the forum @christina.tladi7

Try removing the quote marks from the result output.
image

Happy coding

1 Like
3

thank you @Teller it worked

1 Like