Build a Palindrome Checker Project - Build a Palindrome Checker

Tell us what’s happening:

unsure why when i run the tests it fails and gives me X’s but if i manually test all examples work

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>Is it a Palindrome?</title>
    <link rel="stylesheet" href="styles.css" />
    <script
      src="https://kit.fontawesome.com/eaa0901734.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div id="container">
      <header>
        <h1>Palindrome Checker</h1>
        <p id="description">
          <i class="far fa-lightbulb"></i>
          A word or sentence that's spelled the same way both
          forward and backward, ignoring punctuation, case, and spacing is otherwise known as a Palindrome.
        </p>
      </header>
      <div id="inputs">
        <input
          id="text-input"
          type="text"
          value=""
          placeholder="Type in a word or phrase."
        />
        <button id="check-btn">Check Text</button>
        <p id="result">
          Did you know, "A Santa at Nasa" is a palindrome?
        </p>
      </div>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #acbe;
}
#container {
  background-color: rgb(226, 226, 226);
  max-width: 500px;
  padding: 20px 25px 15px;
  border-radius: 7px;
}
header h1 {
  font-size: 21px;
  font-weight: 500;
}
header p {
  margin-top: 5px;
  font-size: 18px;
  color: gray;
}
#inputs {
  margin: 20px 0 27px;
}
#inputs input {
  width: 100%;
  height: 60px;
  outline: none;
  font-size: 19px;
  padding: 0 17px;
  border-radius: 5px;
  border: 1px solid gray;
}
#inputs input:focus {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
#inputs button {
  width: 100%;
  opacity: 1;
  height: 60px;
  outline: none;
  margin-top: 20px;
  font-size: 17px;
  color: white;
  background-color: #acbe;
  border-radius: 5px;
  border: none;
}
#inputs button:hover {
  box-shadow: inset 3px 3px 3px rgb(45, 148, 96);
}
#result {
  font-size: 19px;
  text-align: center;
  margin-bottom: 18px;
}


/* file: script.js */
const txtInput = document.querySelector("#text-input");
const checkBtn = document.querySelector("#check-btn");
const result = document.querySelector("#result");
let lowRegStr;
// not checking these values e.g /,.()*& //
let nc = /[\W_]/g;

// listen for key inputs into the input field // 
txtInput.addEventListener("keyup", () => {
// set input to lowercase and replace any non alphabetical values with empty str values //
  lowRegStr = txtInput.value.toLowerCase().replace(nc, "");

});

checkBtn.addEventListener("click", () => {
// if input is not empty run check //
  if (txtInput.value != "") { 

// reverse the input //
    let reverseStr = lowRegStr.split("").reverse().join("");

    if (reverseStr === lowRegStr) {
      result.innerHTML = `${txtInput.value} is a palindrome`;
      // matched //
    } else {
      result.innerHTML = `${txtInput.value} is not a palindrome`;
      // not matched //
    }

  } else {
    // no input then alert //
    alert("Please input a value")
  }
});

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

I think the key up event may be an issue for the tests. (Or so I heard)

Ideally you don’t want to process the input until the actual check button is pressed.

it’s funny i was just thinking maybe the way it tests isn’t how you would actually use it and came to a conclusions maybe its the keyup that’s flagging it.

now to figure out what to replace it with :smiley:

nevermind just move that one line of code down into the click event and bam all ticked… smh i overcomplicated it

1 Like