Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

I have written a correct code , but after the test with alert for some reason it doesn’t let me through

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>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="app-container">

    <div class="content">
        <h1 class="header-text">Is it a Palindrome?</h1>

        <div class="input-container">
            <p class="input-header">Enter in text to check for a palindrome:</p>
            <div class="input-wrapper">
                <input type="text" id="text-input">
                <button id="check-btn">Check</button>
            </div>
            <p id="result" class="hidden"></p>
        </div>
        <div class="hint-container">
                <span>💡</span>
                <p>A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
        </div>
    </div>    


    </div>



    <script src="script.js"></script>
</body>
</html>

/* file: styles.css */
html,body{
    margin: 0
}

.app-container{
    background-color: #0a0a23;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.logo-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo{
    width: 5.5rem;
    height: 5.5rem;
}

.content{
    width: 25rem;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;

}

.header-text{
    text-align: center;
}

.input-container{
    background-color: white;
    color: black;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-shadow: 0 6px 6px #002ead;
}

.input-wrapper{
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;

}
#text-input{
    height: 1.5rem;
    width: 70%;
    display: flex;
    border: none;
    border-bottom: 2px solid #5a01a7;
    text-align: center;
    font-size: 1rem;
}

#check-btn{
    width: 4.5rem;
    border: none;
    padding: 10px;
    border-radius: 15px;
    background-color: #5a01a7;
    color: #fff;
    cursor: pointer;
}


.hint-container{
    display: flex;
    background-color: #00471b;
    border-radius: 1rem;
    font-size: 1.3rem;
    padding: 1rem;
    margin-top: 1rem;
}
.hint-container > span{
    padding-top: 1.25rem;
}

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

let currentValue = "";

textInput.oninput = function () {
  currentValue = textInput.value;
};

function isPalindrome(str) {
  const cleanedStr = str.replace(/[^A-Za-z0-9]/g, "").toLowerCase();
  const reversedStr = cleanedStr.split("").reverse().join("");
  return cleanedStr === reversedStr;

}

checkButton.onclick = function () {
  if (!currentValue) {
    alert("Please input a value");
  } else {
    const originalText = currentValue;
    if (isPalindrome(originalText)) {
      result.textContent = `${originalText} is a palindrome`;
    } else {
      result.textContent = `${originalText} 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/127.0.0.0 Safari/537.36 Edg/127.0.0.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Your code doesn’t pass because it’s not quite correct

This global variable isn’t needed. I would get rid of it to simplify your debugging.

3

Hi there!

You need to check if input didn’t have any value. currentValue is not checking the input value.

2 Likes
4

thank you so much
it works now

1 Like