Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

My button element is unresponsive. I’ve looked at other posts and watched tutorials. I’m not sure why it won’t throw an alert when nothing is entered and the button is clicked.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <met charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Palindrome Checker</title>
      <link rel="stylesheet" href="styles.css">
      </head>
      <body>
        <div class="container">
          <h1>Palindrome Checker</h1>
          <input type="text" id="text-input" placeholder="Enter text here">
          <button id="check-btn">Check</button>
          </div>
          <div id="result"></div>
          <script src="scripts.js"></script>
          </body>
          </html>     

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

checkBtn.addEventListener('click', () => {
  if (textInput.value === '') {
    alert("Please input a value")
  } 
});

/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.container {
  text-align: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input[type="text"] {
  width: 80%;
  padding: 10px;
  margin: 10px 0;
  border-radius: 4px;
  border: 1px solid #ccc;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #007BFF;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

#result {
  margin-top: 20px;
  font-size: 18px;
  color: #333;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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

There’s a typo in script file name.

1 Like
3

Thank you so much! Of course it was as simple as an extra ‘s’ at the end of script.