Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

PLs help. Most of the tests were checked except for the needing an element with an id of “text-input” , which I have and the alert(“Please input a value”), which I also have but its marked X. Is there anything wrong with my code?

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>Palindrome Checker</title>
    <link rel="stylesheet" href="styles.css"></link>
    </head>

    <body>
     <main class='container'>
        <h1>Palindrome Checker</h1>
        <div class="palindrome-div">
          <label for="text-input" id="text-input">Input text to check for a palindrome: </label>
          <input id="text-input" value="" type="text">
          <button class="palindrome-btn" id="check-btn">Check</button>
          <div class='result hidden' id="result"></div>
          </div>
          </main>
        <script src="script.js"></script>
        </body>
        </html>

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

body {
  font-family: Monospace, Verdana, sans-serif;
  background-color:#778899;
  
}

h1{
  text-align:center;
  padding:20px 0;
}
.container{
  background-color: #708090;
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

.palindrome-div{
  width:500px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background-color:#A9A9A9;
  border-radius:20px;
  min-height: 100px;
}

label{
  margin-bottom:10px;
}

#text-input{
  text-align:center;
  border:0;
  height: 30px;
  margin-bottom: 5px;
  border-radius: 20px;
}

#result{
  overflow-y:auto;
  min-height:50px;
 
}

.hidden{
  display:none;
}


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

checkBtn.addEventListener("click", () => {
    const newInput = palInput.value.toLowerCase().replace(/[^a-z0-9]/g,"")

    if(palInput===''){
        alert("Please input a value")
    } else if (palInput.value.length ===1){
        result.innerText = `${palInput.value} is a palindrome`
    } else if (newInput === [...newInput].reverse().join("")){
        result.innerText = `${palInput.value} is a palindrome`
    } else {
        result.innerText = `${palInput.value} is not a palindrome`
    }
});

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

In a HTML document, an element must have a unique id.

You used text-input as id for both label and input elements.

1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.