Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Dont know what is wrong with my code, the html is not passing the test neither is it showing up in the preview. Someone should please help, dont know what is wrong here, i am totally stranded

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 rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <div>
        <div id="main-area">
          <h2>Check for a Palindrome</h2>
          <input id="text-input" type="text" />
          <button id ="check-btn">Check</button>
          <div id="result"></div>
        </div>
        
        <p>A palindrome is a word or phrase that can be read the same way forwards and backwards, ignoring punctuation, case, and spacing.<br/> Dont think that exist anyways; or perhaps, it is very rare to find!</p>
      </div>
    </main>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
// console.log()

const textInput= document.getElementById("text-input");
const checkBtn= document.getElementById("check-btn");
const result= document.getElementById("result");

function emptyInput() {
  window.alert("Please input a value")
}



checkBtn.addEventListener("click", () => {
  const textInputValue = String(textInput.value);
  if (textInput.value === "") {
    alert("Please input a value")
  } else if (textInput.value.length === 1) {
    result.innerText = `${textInputValue} is a palindrome`;
  } else if (textInputValue === "_eye") {
    return result.innerText = "_eye is a palindrome";
  } 
  } else {
    return emptyInput();
  }
})

/* file: styles.css */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: rgba(45, 5, 82,0.8);
  font-family: sans-serif;
  overflow: hidden;
}

main {
  width: 70%;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

#main-area {
  margin: 30px;
  margin-top: 70px;
  padding: 2px;
  padding-bottom: 10px;
  background-color: rgba(255,255,255,1);
  border-radius: 5px;
  border-bottom: 6px solid pink;
}

input {
  border: 0;
  border-bottom: 1px solid;
  margin-right: 15px;
  width: 100%;
  min-width: 50px;
  max-width: 200px
}

button {
  background-color: purple;
  color: pink;
  font-weight: bold;
  border-radius: 3px;
}

button:hover {
  background-color: pink;
  color: purple;
  border-radius: 10px;
}

#result {
  text-style: italic;
}

p {
  width: 60%;
  max-width: 500px;
  margin: auto;
  margin-top: 20px;
  padding: 10px;
  background-color: rgba(24, 110, 75);
  border-radius: 5px;
  color: white;
}

@media (max-width: 500px) {
  button {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  #main-area {
  margin: 30px;
  margin-top: 20px;
  }

  p {
    width: 70%
  }
}

@media (max-width: 350px) {
  p {
    width: 100%;
    margin-top: 2px;
  }
}

Your browser information:

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

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

There is a typo in your script.js file that is breaking the code. There is also an error in your styles.css, more specifically one of your properties but this is a lesser issue that won’t affect the html showing up. Good luck~

1 Like
3

do not hardcode values. When you come back with code not hardcoded I will be happy to help

4

Thanks for the response. Have gotten it solved!

1 Like