Build a Palindrome Checker - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Hi, I’m not sure why but I can’t click on my button. I’ve had a look if its my span overlapping the button but I don’t think it is. Even when I hover over the button my cursor doesn’t come up with the little clicker icon so I’m really not sure.

Any help would be appreciated.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Palindrome Checker</title>
    <link href="styles.css" rel="stylesheet">
    <script src="script.js" defer></script>
</head>

<body>

    <div id="logo"></div>

    <h1>Is it a Palindrome?</h1>

    <div id="check-container" class="containers">

        <p id="check-container-prompt">Enter in text to check for a palindrome:</p>

        <input id="text-input">

        <button id="check-btn" type="button">Check</button>

        <span id="result"></span>

    </div>

    <div id="definition-container" class="containers">

        <p id="definition">💡 A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
        
        </div>

</body>

</html>


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

body {
  background-color: rgb(0, 0, 35);
  color: white;
}

#logo {
  margin: 0 auto;
  height: 80px;
  width: 180px;
  background-color: white;
}

h1 {
  text-align: center;
  margin: 20px 0;
}

.containers {
  margin: 0 auto;
  width: 350px;
  padding: 12px;
  min-height: 130px;
  border-radius: 20px;
}

#check-container {
  background-color: white;
  color: black;
  display: grid;
  grid-template-areas: 
  "top top"
  "second1 second2"
  "result result";
}

#check-container-prompt {
  grid-area: top;
  margin: 0 auto;
  margin-top: 10px;
}


#check-container button {
  grid-area: second2;
  height: 30px;
  width: 80px;
  margin: 0px auto 0 auto;
  border-radius: 12px;
  border: 0;
  background-color: purple;
  color: white;
}

#check-container input {
  grid-area: second1;
  height: 30px;
  width: 200px;
  margin: 0px auto 0 auto;
  border: 0;
  border-bottom: 2px solid purple;
  text-align: center;
  font-size: 20px;
}

#result {
  text-align: center;
  grid-area: result;
}

#definition-container {
  margin-top: 20px;
  background-color: rgb(0, 76, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; 
}


/* file: script.js */
let resultMsg = document.querySelector("#result");
let checkBtn = document.querySelector("#check-btn");
let textInput = document.querySelector("#text-input")

checkBtn.addEventListener("click", () => {
  if (textInput.value.trim() === "") {
    resultMsg.textContent = "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/139.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker - Build a Palindrome Checker
https://www.freecodecamp.org/learn/full-stack-developer/lab-palindrome-checker/build-a-palindrome-checker

2

If I delete everything in the CSS the button becomes clickable again.