Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Hi,

I have completed my project and it works as expected by I’m not passing tests, please help.

Your code so far

<!-- file: index.html -->
<!Doctype html>
<html lang = "en">
  <head>
    <meta name="viewport" content= "width=device-width, initial-scale=1.0">
    <meta charset= "utf-8">
    <title>Palindrome Checker</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
      <div id="logo" class="text">
      <h1>Simplify Problems</h1>
      <p>Check if your input is a Palindrome?</p>
      </div>
      <div id="user_input">
        <label id="input_label" for="text-input" class="text">Enter in text to check for a palindrome:<br></label>
        <div id="btn_inp">
          <input id="text-input" type="text"></input>
          <button id="check-btn" type="submit" >Check</button>
        </div>
        <p id="result"></p>
      </div>
      <div id="explanation" class="text">
        <p>A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
      </div>
    </main>
    <script src="script.js"></script>
  </body>

</html>

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

// Clean input text function with a parameter for input
const cleanInputText = (text) => {
  return text.trim().replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
};

checkBtn.addEventListener("click", () => {
  if (!input.value) {
    alert("Please input a value");
  } else {
    const cleanedText = cleanInputText(input.value).split("");
    const cleanedTextCopy= [...cleanedText]
    const reversedCleanedText = cleanedTextCopy.reverse().join("");

    if(cleanedText.join("")===reversedCleanedText){
      result.innerText =`"${input.value} is a palindrome"`
    }else{
      result.innerText = `"${input.value} is not a palindrome"`
    }

  }
});


/* file: styles.css */
:root{
  --background-color: #B7B7B7;
  --text-color: #2F3645;
  --button-color: #ffa62e;
  --container-color: #A5B68D;
  --logo-color: linear-gradient(
    -45deg,
    #ffa62e,
    #F9373B);
}

*,
*::before,
*::after{
  box-sizing: box-border;
}

body{
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: var(--background-color);

}

main{
  height: 100vh;
  width: 100%;
  max-width: 500px;
  min-width: 300px;
  max-height: 700px;
  min-height: 400px;
  padding: 20px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  

.text{
  color: var(--text-color);
  font-size: 1.5rem;
  text-align: center;
}

h1{
  background-image: var(--logo-color);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
    margin: 0 auto;
    font-size: 4rem;
}

#logo p{ 
  font-size: 2rem;
}

#user_input{
  background-color: var(--container-color);
  height: 25%;
  width: 100%;
  border-radius: 5px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 25px;
  padding: 5px;
}

#btn_inp{
  height: 2rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  
}

#text-input{
  height: 100%;
  width: 60%;
  border-radius: 3px;
  border: 0;
  border-bottom: 2px solid var(--button-color);
  font-size: 1.3rem;
}

#check-btn{
  background-color: var(--button-color);
  color: var(--text-color);
  height: 100%;
  width: 30%;
  font-size: 1.4rem;
  font-weight: 600;
  border-radius: 20px;
  border: 0;
}


#check-btn:hover{
  background: var(--logo-color);
  color: white;
  transform: scale(1.02);
  cursor: pointer;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) 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

Hi there and welcome to our community!

You don’t need to include additional quotation marks in your return string.
That is, you should return A is a palindrome, not "A is a palindrome", for instance.

1 Like
3

It’s a pleasure to learn with fCC, thanks for your help!

1 Like