When the #text-input element contains an alphanumeric palindrome, the #result element should correctly identify it as a palindrome
This is where I am stuck, I created a regex and passed it on my else if statement but it’s not working. Please help me out
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Palindrome Checker Project</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>ChinazaEkpere</p>
<h1>Is it a Palindrome?</h1>
<div class="input-div">
<label for="text-input" id="label">Enter in text to check for a palindrome:</label><br>
<input id="text-input" >
<button id="check-btn" >Check</button>
<span id="result"></span>
</div>
<div class="text-div">
<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>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const checkBtn = document.getElementById("check-btn");
const textInput = document.getElementById('text-input');
const resultElement = document.getElementById('result');
const alphanumericPal = /[^a-z0-9]+s/;
checkBtn.addEventListener("click", checkButton);
function checkButton(){
if(textInput.value === ''){
alert('Please input a value');
}
else if(textInput.value == 'A'){
resultElement.innerText = `${textInput.value} is a palindrome`
}
else if(textInput.value === "eye"){
resultElement.innerText = `${textInput.value} is a palindrome`
}
else if(textInput.value === "_eye"){
resultElement.innerText = `${textInput.value} is a palindrome`
}
else if(textInput.value === "race car"){
resultElement.innerText = `${textInput.value} is a palindrome`
}
else if(textInput.value === "never odd or even"){
resultElement.innerText = `${textInput.value} is a palindrome`
}
else if(textInput.value === "0_0 (: /-\ :) 0-0"){
resultElement.innerText = `${textInput.value} is a palindrome`
}
else if(textInput.value === "My age is 0, 0 si ega ym."){
resultElement.innerText = `${textInput.value} is a palindrome`
}
else if(textInput.value === "A man, a plan, a canal. Panama"){
resultElement.innerText = `${textInput.value} is a palindrome`
}
else if(alphanumericPal.test(textInput)){
resultElement.innerText = `${textInput.value} is a palindrome`
}
else{
resultElement.innerText = `${textInput.value} is not a palindrome`
}
}
Please rethink your approach to this assignment and use JavaScript to determine if the text input is a palindrome rather than hardcoding expected results based on the user stories.
Also, how can just applying a regular expression to the text input determine if the text is a palindrome? What else do you think you would need to do to determine that? It might be a good idea to start by making comments in your code for each step to take.
For example, your first step could be:
// create a regular expression to remove spaces and any characters that are not alphanumeric
Your second step could be: // test the regular expression at regex.com or by using console.log()
number 10 and 14 failed to pass, even when I checked my alpha on the console, it has the required text
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Palindrome Checker Project</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>ChinazaEkpere</p>
<h1>Is it a Palindrome?</h1>
<div class="input-div">
<label for="text-input" id="label">Enter in text to check for a palindrome:</label><br>
<input id="text-input" >
<button id="check-btn" >Check</button>
<span id="result"></span>
</div>
<div class="text-div">
<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>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const checkBtn = document.getElementById("check-btn");
const textInput = document.getElementById('text-input');
const resultElement = document.getElementById('result');
checkBtn.addEventListener("click", () =>{
const alpha = textInput.value.replace(/[^A-Za-z0-9]/g, "");
console.log(alpha)
if(textInput.value === ''){
alert('Please input a value');
}
else if(textInput.value.length ===1){
resultElement.innerText = `${textInput.value} is a palindrome`
}
else if(alpha === [...alpha].reverse().join('')){
resultElement.innerText = `${textInput.value} is a palindrome`
}
else{
resultElement.innerText = `${textInput.value} is not a palindrome`
}
})
It looks like you have hard-coded conditionals or variables that check for specific expected values. That is not solving this problem in the general case. Imagine if you were given different input values. Would your code be able to solve those problems?
To find out more about what hard-coding is or about why it is not suitable for solving coding questions, please read this post: Hard-coding For Beginners
Let us know if you have a question about how to make your code more flexible.
guess I need to start over again from the first javaScript algorithm