Build a Palindrome Checker Project - Build a Palindrome Checker

Hey everyone. I’m currently working on this project. I coded the given project using vscode considering the requirements. All functionality works when testing with Live Server. When I run the same code on freecodecamp, I cannot pass any of the steps except the first three. Any help would be appreciated.

<!-- 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>Project</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" id="logo" >
    <p id="isPalindrome">Is it a Palindrome?</p>
    <div class="container">
        <label for="text-input">
            Enter in text to check for a palindrome:
        </label>
        <input id="text-input"></input>
        <button id="check-btn">Check</button>
        <div id="result">
            
        </div>
    </div>
    <div class="container info_container">
        <p>💡A <i>palindrome</i> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.</p>
    </div>
    <script src="scripts.js"></script>
</body>
</html>
/* file: styles.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

label {
    color:#000;
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 18px;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #121230;
    height: 100%;
    margin: 0;
}

#logo {
    position: absolute;
    height: 30vh;
    width: 20vh;
}

#isPalindrome {
    margin: 0 0 1.25em 0;
    font-size: 3.125em;
    color: #fff;
}

.container {
    position: relative;
    background-color: #fff;
    height: 30vh;
    width: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.25em;
}

#result {
    position: absolute;
    bottom: 0;
    margin-bottom: 3vh;
    font-size: 1.25em;
}

.info_container {
    color: #fff;
    background-color: #063806;
    position: relative;
    top: 10vh;
    text-align: center;
    font-size: 15px;
    margin: 0; /* Remove default margin */
    padding: 0;
    line-height: 3;
}

.info_container p {
    padding: 0;
    margin: 0;
}

#text-input {
    width: 35vh;
    height: 5vh;
    border: none;
    border-bottom: 2px solid #5a01a7;
    font-size: 1.5em;
    text-align: center;
    color: #838080;
}

#check-btn {
    width: 17vh;
    height: 5vh;
    border-radius: 1.25em;
    background-color: #5a01a7;
    color: #fff;
    border: none;
    cursor: pointer;
}

#text-input, #check-btn {
    margin: 0 1.25em 0 1.25em;
}
/* file: script.js */
const text_input = document.getElementById('text-input');
const check_btn = document.getElementById('check-btn');
const res_p = document.getElementById('result');

const isPalindrome = (x) => {
    const lowercaseWord = x.toLowerCase();
    const reversedWord = lowercaseWord.split('').reverse().join('');
    return lowercaseWord === reversedWord;
}


check_btn.addEventListener('click', () => { 
    if (text_input.value.trim() === '') {
        alert('Please input a value');
    } else if (isPalindrome(text_input.value)){
        res_p.innerHTML = (`${text_input.value} is a palindrome.`);
    } else {
        res_p.innerHTML = (`${text_input.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/121.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

1 Like

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

I’m having the same problem

just a simple mistake when liking the JS file to the HTMl code it is script.js not scripts.js , this will make your code worka nd pass most of the tests