Tell us what’s happening:
Please what’s happening here.. my code seem not to run . Please what should I do next..
Your code so far
<!-- file: index.html -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Palindrome-Checker</title>
<h1>is it a palindrome?</h1>
<div class="checker-box">
<p>Enter text to check for a palindrome:</p>
<input type="text" id="text-input"><br>
<button id="check-btn">Check</button>
</div>
<p id="result"></p>
<div class="info">
<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>
/* file: script.js */
const checkBtn = document.getElementById("check-btn");
const result = document.getElementById("result");
function palindrome (str) {
const cleanedStr = str.toLowerCase().replace(/[^a-z0-9]/g,"");
const reversed = textInput.split("").reverse().join("");
}
checkBtn.addEventListener("click", () => {
const textInput = document.getElementById("text-input").value.trim();
if (textInput === "") {
alert("Please input a value");
return;
}
})
/* file: styles.css */
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: center;
background-color: #0d0b23;
}
h1 {
font-size: 2.5em;
margin-bottom: 20px;
color: white;
}
.checker-box {
background-color: #1a1a1a;
padding: 20px;
border-radius: 10px;
display: inline-block;
}
#text-input {
padding: 10px;
width: 300px;
margin-top: 10px;
margin-bottom: 10px;
font-size: 1em;
border: none;
border-bottom: 2px solid purple;
background-color: #333;
color: white;
}
#check-btn {
padding: 10px 20px;
background-color: purple;
color: white;
border: none;
font-size: 1em;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
#check-btn:hover {
background-color: darkviolet;
}
#result {
margin-top: 20px;
font-size: 18px;
min-height: 24px;
color: white;
}
.info {
background-color: #065f29;
padding: 15px;
margin-top: 30px;
border-radius: 10px;
color: white;
max-width: 500px;
margin-left: auto;
margin-right: auto;
font-style: italic;
text-align: left;
}
Your browser information:
User Agent is: Mozilla/5.0 (Linux; U; Android 12; en-ng; CPH2387 Build/SP1A.210812.016) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.98 Mobile Safari/537.36 PHX/16.8
Challenge Information:
Build a Palindrome Checker Project - Build a Palindrome Checker
Can you please say which tests are not passing for you.
Have you identified where the issue is from that and where it may be wrong?
My code doesn’t seem to run.. I updated the code which I corrected but it seems is not still running.. what’s the problem please
What is your code actually doing when checkBtn is clicked? If there is no input value, it triggers an alert but what does it do otherwise?
You also have some structural issues with your HTML code but that’s a separate issue. Your HTML document should have html, head and body elements but html and head have no closing tag and body is missing.
I have sorted that one . But my else statement is not running
Tell us what’s happening:
I did mine . But is still not running.. when I put a word the result keeps showing same even if it’s a Palindrome or not..
It will say it is a Palindrome..
When I change the condition it will say it is not a palindrome.. the else statement seems not to work on the code.. what the problem..
Your code so far
<!-- file: index.html -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Palindrome-Checker</title>
<h1>is it a palindrome?</h1>
<div class="checker-box">
<p>Enter text to check for a palindrome:</p>
<input type="text" id="text-input"><br>
<button id="check-btn">Check</button>
</div>
<p id="result"></p>
<div class="info">
<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>
/* file: script.js */
const checkBtn = document.getElementById("check-btn");
const textInput = document.getElementById("text-input")
const result = document.getElementById("result");
function palindrome (str) {
const cleanedStr = str.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
const reversedStr = textInput.split("").reverse().join("");
return cleanedStr === reversedStr;
}
checkBtn.addEventListener("click", () => {
const inputValue = textInput.value;
if (inputValue === "") {
alert("Please input a value");
return;
}
if (palindrome === inputValue) {
result.innerText = `${inputValue} is a palindrome`
}
else {
result.innerText = `${inputValue} is not a palindrome`
}
})
/* file: styles.css */
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: center;
background-color: #0d0b23;
}
h1 {
font-size: 2.5em;
margin-bottom: 20px;
color: white;
}
.checker-box {
background-color: #1a1a1a;
padding: 20px;
border-radius: 10px;
display: inline-block;
}
#text-input {
padding: 10px;
width: 300px;
margin-top: 10px;
margin-bottom: 10px;
font-size: 1em;
border: none;
border-bottom: 2px solid purple;
background-color: #333;
color: white;
}
#check-btn {
padding: 10px 20px;
background-color: purple;
color: white;
border: none;
font-size: 1em;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
#check-btn:hover {
background-color: darkviolet;
}
#result {
margin-top: 20px;
font-size: 18px;
min-height: 24px;
color: white;
}
.info {
background-color: #065f29;
padding: 15px;
margin-top: 30px;
border-radius: 10px;
color: white;
max-width: 500px;
margin-left: auto;
margin-right: auto;
font-style: italic;
text-align: left;
}
Your browser information:
User Agent is: Mozilla/5.0 (Linux; U; Android 12; en-ng; CPH2387 Build/SP1A.210812.016) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.98 Mobile Safari/537.36 PHX/16.8
Challenge Information:
Build a Palindrome Checker Project - Build a Palindrome Checker
Please do not create duplicate topics for the same issue. I will merge this with your existing topic.
Thank you.. I wasn’t trying to.. I wanted to continue with the previous post I have made.. I’m not with my PC at the moment because I’m having power issue.. so I tend to use my mobile phone to do it.. sorry for that
No worries, I’ve looked through your code.
You are not calling your palindrome function correctly inside the event listener.
To call the function, you need to include the parentheses and pass a string as an argument.
You don’t need to make any comparison here:
Your palindrome function (when it’s working correctly), should take inputValue as an argument and return true or false, so you just need to call the function inside the if condition parentheses.
The palindrome function itself is not quite working correctly though:
You are trying to compare a lower case cleanedStr with a reversedStr which is neither lower case nor has had non-alphanumeric characters removed.
Also worth noting that textInput is not a string, but an element. You’d need to access its value for it to be a string. However, you don’t need to access textInput directly here at all, as textInput.value is already passed to the function as str when you call the function in the checkBtn event listener.
In short, what you really need to do logically is compare cleanedStr with its reverse, to determine if it is a palindrome.
I hope that makes sense!
Thanks so much.. it makes total sense..
1 Like