Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Hello,
I am trying to create the palindrome checker (or rather, I believe I have completed the assignment), however all unit tests except of the first three are failing. Can someone help me figure out where I went wrong? Thank you very much!

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">
    <script src="script.js"></script>
</head>
<body>
    <h1>Palindrome checker</h1>
    <label for="text-input">Enter a string: </label>
    <input type="text" id="text-input"><br>
    <button id="check-btn">Check</button>
    <div id="result"></div>
    <script src="script.js"></script>
</body>
</html>


/* file: styles.css */
body {
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
    margin-top: 2%;
    color: #007bff;
}

form {
    width: 70%;
    margin: 0 auto;
    background-color: #fff;
    padding: 2%;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.07), 0 0 2px rgba(0, 0, 0, 0.07);
}

label {
    display: block;
    margin-bottom: 1%;
}

input[type="text"],
input[type="submit"] {
    width: 100%;
    padding: 1%;
    margin-bottom: 2%;
    border-radius: 4px;
    border: 1px solid #ddd;
}

input[type="submit"] {
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
}

#result {
    text-align: center;
    margin-top: 2%;
    color: #007bff;
}


/* file: script.js */
function isPalindrome(str) {
    let lowerStr = str.toLowerCase().replace(/[^a-z0-9]/g, '');
    return lowerStr === lowerStr.split('').reverse().join('');
}

function handleClickEvent() {
    const inputValue = document.getElementById('text-input').value;
    const result = isPalindrome(inputValue);

    if (inputValue === '') {
        alert("Please input a value");
    } else {
        document.getElementById('result').innerText = `${inputValue} ${result ? 'is' : 'is not'} a palindrome`;
    }
}

document.getElementById('check-btn').addEventListener('click', handleClickEvent);

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:125.0) Gecko/20100101 Firefox/125.0

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

Hi there and welcome to our community!

Your issue is that you have this in your document head:

It loads script.js before the HTML document has parsed, meaning that it throws an undefined error when it tries to addEventListener() to an element which doesn’t yet exist.

As you have also put the above script tag at the bottom of your HTML doc, your code should work perfectly if you simply remove the script tag from the head.

3

Oh of course. :slight_smile: thank you very much!

1 Like