Build a Palindrome Checker Project - Build a Palindrome Checker

JavaScript
1

Tell us what’s happening:

Hello im on step 9 but its all getting very repetitive with the repeat else if statemnets, is there a better way to do this thats more efficient? Please let me know which methods and explain as much as you can :)))

These are the instructions:

    1. You should have an input element with an id of "text-input".

  • Passed:2. You should have a button element with an id of "check-btn".

  • Passed:3. You should have a div, span, or p element with an id of result.

  • Passed:4. When you click on the #check-btn element without entering a value into the #text-input element, an alert should appear with the text "Please input a value".

  • Passed:5. When the #text-input element only contains the letter A and the #check-btn element is clicked, the #result element should contain the text "A is a palindrome".

  • Passed:6. When the #text-input element contains the text eye and the #check-btn element is clicked, the #result element should contain the text "eye is a palindrome".

  • Passed:7. When the #text-input element contains the text _eye and the #check-btn element is clicked, the #result element should contain the text "_eye is a palindrome".

  • Passed:8. When the #text-input element contains the text race car and the #check-btn element is clicked, the #result element should contain the text "race car is a palindrome".

  • Failed:9. When the #text-input element contains the text not a palindrome and the #check-btn element is clicked, the #result element should contain the text "not a palindrome is not a palindrome".

  • Passed:10. When the #text-input element contains the text A man, a plan, a canal. Panama and the #check-btn element is clicked, the #result element should contain the text "A man, a plan, a canal. Panama is a palindrome".

  • Failed:11. When the #text-input element contains the text never odd or even and the #check-btn element is clicked, the #result element should contain the text "never odd or even is a palindrome".

  • Failed:12. When the #text-input element contains the text nope and the #check-btn element is clicked, the #result element should contain the text "nope is not a palindrome".

  • Failed:13. When the #text-input element contains the text almostomla and the #check-btn element is clicked, the #result element should contain the text "almostomla is not a palindrome".

  • Failed:14. When the #text-input element contains the text My age is 0, 0 si ega ym. and the #check-btn element is clicked, the #result element should contain the text "My age is 0, 0 si ega ym. is a palindrome".

  • Failed:15. When the #text-input element contains the text 1 eye for of 1 eye. and the #check-btn element is clicked, the #result element should contain the text "1 eye for of 1 eye. is not a palindrome".

  • Failed:16. When the #text-input element contains the text 0_0 (: /-\ :) 0-0 and the #check-btn element is clicked, the #result element should contain the text "0_0 (: /-\ :) 0-0 is a palindrome".

  • Failed:17. When the #text-input element contains the text five|\_/|four and the #check-btn element is clicked, the #result element should contain the text "five|\_/|four is not a palindrome".

  • Failed:18. When the #text-input element contains an alphanumeric palindrome, the #result element should correctly identify it as a palindrome.

  • Failed:19. When the #text-input element contains a random sequence of alphanumeric characters that is not a palindrome, the #result element should say it is not a palindrome.

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>
</head>
<body>
    <input id="text-input" type="text" placeholder="Enter text here">
    <button onclick="display()" id="check-btn">Check</button>
    <p id="result"></p>

    <script>
        function display() {
            var txtinput = document.getElementById("text-input").value;
            if (txtinput.trim() === "") {
                alert("Please input a value");
            } else if (txtinput.trim() === "A") {
                document.getElementById("result").textContent = "A is a palindrome";
            } else if (txtinput.trim() === "eye") {
                document.getElementById("result").textContent = "eye is a palindrome";
            } else if (txtinput.trim() === "_eye") {
                document.getElementById("result").textContent = "_eye is a palindrome";
            } else if (txtinput.trim() === "race car") {
                    document.getElementById("result").textContent = "race car is a palindrome";
            } else if (txtinput.trim() === "A man, a plan, a canal. Panama") {
                document.getElementById("result").textContent = "A man, a plan, a canal. Panama is a palindrome";
            }

        }
             
    </script>
</body>
</html>





/* file: script.js */


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

1- convert all characters in the string to lowercase, removing spaces.
2 - create an inverted copy of the string.
3 - compare the copy with the original string,

3

should i create a function to do those 3 things you listed?

4

You can create a function for this, and it can be used for any input text, not just what is in the example.

1 Like
5

ah i see thank you so much for your help :)))

6

Please note that the index.html file was provided for you and required no changes. Your JavaScript code should be written in the script.js file.

1 Like