Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

my codes works fine. it does everything that is need to be done. but it does not pass the test.

and i’m facing one issue that is after clicking the check and getting the answer. my pervious ans stays right there and the next one goes below it.

can’t seem to figure it out. help would be appreciated

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>

<head>
  <title>Palindrome Checker</title>
  <link rel="stylesheet" href="styles.css">
</head>

<main class="container">
  <h1>Is it a Palindrome?</h1>
  <div class="palindrome-container">
    <label>Enter text to check for a palindrome: </label>
    <input class="palindrome-input" id="text-input" type="text">
    <button id="check-btn">Check</button>
    <div class="result-container hidden" id="result"></div>
  </div>

  <div class="palindrome-defintion">A <em>palindrome</em> is a word or sentence that's spelled the same way both forward and
    backward, ignoring punctuation, case, and spacing.</div>
  <script src="script.js"></script>
  <main>

</html>

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

console.log(checkBtn);
console.log(textInput);
console.log(resultElement);

function checkBtnFunction(input) {
  const userInput = input;

  if (input === '') {
    alert("Please input a value");
  }

  const updatedUserInput = input.replace(/[^A-Za-z0-9]/ig, '')
  console.log(updatedUserInput);

  const lowerUpdatedUserInput = updatedUserInput.toLowerCase();
  console.log(lowerUpdatedUserInput);

  const palindrome = [...lowerUpdatedUserInput].reverse().join("");
  console.log(palindrome);

  const result = `${userInput} ${lowerUpdatedUserInput === palindrome ? "is" : "is not"} a palindrome`
  console.log(result);

  const pElement = document.createElement("p");
  pElement.innerText = result;
  pElement.className = "user-input"
  resultElement.appendChild(pElement);
  resultElement.classList.remove("hidden");
}


checkBtn.addEventListener("click", () => {
  checkBtnFunction(textInput.value);
  textInput.value = '';
});

checkBtn.addEventListener("keydown", key => {
  if(key.key === 'Enter'){
    checkBtnFunction(textInput.value);
    textInput.value = '';
  }
})

/* file: styles.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
  --color1: #1A3636;
  --color2: #40534C;
  --color3: #677D6A;
  --color4: #D6BD98;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: var(--color1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1{
  font-size: 3.3rem;
  font-weight: bold;
  color: var(--color4);
  padding: 10px 0px;
  margin-bottom: 25px;
}

.palindrome-container{
  width: 500px;
  height: 200px;
  background-color: var(--color3);
  border: 3px solid var(--color2);
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

label{
  font-size: 1.5rem;
  color: var(--color1);
}

.palindrome-input{
  width: 300px;
  height: 40px;
  text-align: center;
  font-size: 1.5rem;
  margin: 10px;
  background-color: var(--color3);
  border: none;
  border-bottom: 3px solid var(--color4);
}

#check-btn{
  width: 100px;
  height: 40px;
  background-color: var(--color4);
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  color: var(--color2);
  cursor: pointer;
}

/*result css left*/
.result-container{
  width: 400px;
  height: 50px;
  background-color: var(--color4);
  border-radius: 15px;
  color: var(--color1);
}

.hidden{
  display: none;
}

.user-input{
  margin-top: 10px;
  text-align: center;
  font-size: 1.4rem;
}


.palindrome-defintion{
  width: 500px;
  height: 180px;
  background-color: var(--color4);
  border-radius: 15px;
  font-size: 1.8rem;
  text-align: center;
  color: var(--color1);
  margin-top: 30px;
  padding: 20px;
}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

It would be very helpful if you say which tests are failing and what debugging you’ve tried.

3

it only passes the first 4 tests and i tried all the sentences nd check if they give the required output as palindrome or not. it gives the right outputs for all of them.

4

i tried using try and catch to find any errors but there seems to be none??
so what is the problem?

5

This is your issue. You should directly modify the element with the id of result instead of adding subelements to it.

6

oh my gosh yesss. it did work. thank you for your help. :smile:

1 Like