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 .
I really don’t know how to handle this.
Your code so far
<!-- file: index.html -->
<! DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<title>Palindrome Checker</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<h1>Palindrome Checker</h1>
<h2>Welcome to my Palindrome Checker</h2>
<p>Here you can check your text for palindromness. Just input it in a window below to get the text checked.</p>
<input for="text" id="text-input" />
<div id="result"></div>
<button id="check-btn" type="button">Check</button>
<script src="script.js">
</script>
</body>
</html>
it doesn’t look like you are considering the underscore here
also, I suggest looking at your regex with https://regex101.com/ and fixing it, you have lots of spaces, and unescaped characters that need to be escaped, and you should have everything in a character class with a g flag
This is my current code. I checked it with regex101. There appears to be no mistakes but now freecodecamp shows errors.
I really don’t know how to make it not only ignore _ but also put it before eye. Also it doesn’t recognise sentences that contain palindromes as palindromes.
I’ve decide to rewrite the code as I can’t make the result show , and _. Also I can’t figure out how to make _eye be considered a palindrome. And a sentence.
Yes. But it should have the underscore in the result. And i don’t know how to do it.
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.
input.value is still the original string, so you can use that. While you have the cleaned string as inputValue and you use that to test if it’s a palindrome
I tried to change my code. Can you take a look at it ?
const checkButton = document.getElementById("check-btn");
const result = document.getElementById("result");
const input = document.getElementById("text-input");
const inputValue = input.value.trim();
function check() {
if (inputValue === "") {
alert("Please input a value");
} else {
break;
}
}
checkButton.addEventListener("click", check);
function palindrome() {
inputValue.replace(/! @ # & ( ) – [ { } ] : ; ', ? \/\\ _ | *` ~ $ ^ + = < > [\s] “/g).toLowerCase;
const inputValueReversed = inputValue.split("").reverse().join("");
if (inputValueReversed === inputValue) {
result.innerText = `${input.value} is a palindrome`;
} else if (inputValueReversed !== inputValue) {
result.innerText = `${input.value} is not a palindrome`
}
}
checkButton.addEventListener("click", palindrome);
My alert’s now going off whenever I press check even though I have a condition. And my palindrome function doesn’t execute else if in my function. I tried with else and it wasn’t working as well.
Do you think i should’ve created separate functions for each task I have?
this matches only a string that contains all of those characters in that order. You need to use a character class that matches one single character that can be any of those, this is your main issue now, everything else is pretty fine, you need to have a regex that works
I see. But I do need it both to work when i press check button. Is there a way to fix it? Maybe make it a text input event listener? Would that work? But it did say the user has to actually press the check button with empty input.
