Code:
‹div id="result">
<input id-"text-input" placeholder-"Write your text here"> <button id="check-btn"><b>Find out</b>
</button> </div>
How do I separate the result into it’s own element please?
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
what do you want to obtain? I don’t understand from your description
your input has wrong syntax, you need = to give a value to attributes
Tell us what’s happening:
I’m really confused about why this isn’t working please can someone help, I’m a complete beginner so please use simple language
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">
<link rel="stylesheet" href="styles.css">
<title>Palindrome checker</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap')
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Kode+Mono:wght@400..700&family=Lobster&display=swap')
</style>
</head>
<body>
<main>
<h1 class="title">Is it a palindrome?</h1>
<h2 class="subtitle">Palindrome checker</h2>
</main>
‹div id="result">
<input id="text-input" placeholder="Write your text here"> <button id="check-btn"><b>Find out</b>
</button> </div>
id="check-btn"><b>Find out</b>
</button>
</div>
<div id="palindrome-def">
<p id="definition">
<span role="img" aria-label="light-bulb">💡</span> A <dfn><u>palindrome</u></dfn> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
</div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
body{
background: #347fc4ff;
width: 510px;
display:block;
margin-top: 10%;
margin-left: auto;
margin-right: auto;
}
main{
max-height: auto;
max-width: auto;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 4%;
}
.subtitle, #check-btn, #text-input, #palindrome-def{
font-family: "Kode Mono", monospace;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
text-align: center;
}
.title{
font-family: "Lobster", sans-serif;
font-weight: 700;
font-style: normal;
border: solid #5d536bff;
border-radius: 10px;
padding: 7px;
text-align: center;
color: white;
}
#check-btn, #text-input{
border-radius: 5px;
}
#text-input, #check-btn{
font-size: 17px;
max-height: 30%;
max-width: 80%;
height: 80px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
margin-top: 3%;
margin-left: 2%;
margin-right: 3%;
border: transparent;
}
#check-btn{
background: #7d6b91ff;
}
#check-btn:active{
background: white;
}
#text-input{
margin-left: 3%;
border-bottom: solid #272838ff;
background: transparent;
border-radius: 2px;
}
#text-input:focus{
background: white;
}
#result{
max-height: auto;
max-width: auto; border-radius: 15px;
height: 20%;
width: 80%;
background: #989fceff;
margin-left: 7%;
margin-right: 7%;
justify-content: center;
align-items: center;
}
#palindrome-def{
background: #272838ff;
color: white;
font-size: 15px;
max-height: auto;
max-width: auto; border-radius: 15px;
width: 80%;
margin-left: 7%;
margin-right: 7%;
margin-top: 7%;
justify-content: center;
align-items: center;
}
#definition{
padding-top: 4px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 4px; justify-content: center;
align-items: center;
text-align: center;}
/* file: script.js */
document.addEventListener("DOMContentLoaded", function() {
const userInput = document.getElementById("text-input");
const palindromeButton = document.getElementById("check-btn");
const resultDiv = document.getElementById("result");
const checkPalindrome = () => {
const valueText = userInput.value.trim();
const regEx = /[^A-Za-z0-9]/gi;
const newText = valueText.toLowerCase().replace(regEx, "");
const reverseText = newText.split('').reverse().join('');
if (valueText.length === 0) {
return alert("Please input a value");
}
const resultText = newText === reverseText ? `<p>${valueText} is a palindrome</p>` : `<p>${valueText} is not a palindrome</p>`;
resultDiv.innerHTML = resultText;
}
palindromeButton.addEventListener('click', checkPalindrome);
});
Your browser information:
User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 16_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1
Challenge Information:
Build a Palindrome Checker Project - Build a Palindrome Checker
1 Like
Your code and regex appears to be straightforward and clean, but the test doesn’t just want your regex to check for palindromes with alphanumeric characters. The test also requires checking for palindromes that include symbols. Therefore, you need to modify your regex to accommodate both scenarios in the tests. I think you can handle this 
.
1 Like
you have the wrong angulart bracket here, you need to use <, not the one you have there
also you need to allow for multiple palidromes to be checked one after the other, so don’t have the input and the button disappear
1 Like
Hello @eve.b.joan !
It must be said that for a beginner, as you state above, this is a valiant effort for a significant challenge.
I always try to understand what is not “working” when I see a question like this, by creating a codepen
[quote=“eve.b.joan, post:1, topic:684511”] with the question poster’s code. Feel free to use it as you wish, edit it, delete it, etc.
The HTML you have written is close to what you are aiming for it seems, but there are some basic syntax issues (e.g. - the first line of the snippet below the opening symbol (“<”) of the “result div” is different, in style at least, to the closing symbol (“>”). Any coder concerned with the quality of one’s work will strive for consistency in the appearance of their code, so it’s best to fix those anomalies.
‹div id="result">
<input id="text-input" placeholder="Write your text here"> <button id="check-btn"><b>Find out</b>
</button> </div>
id="check-btn"><b>Find out</b>
</button>
</div>
A more serious error concerns the second button element which seems to have taken a turn or two in a tumble drier - I think you might want to tidy all of the HTML code up.
It would be a good idea to avoid any styling until all of the code is working the way you want it to initially. Get all of your basic HTML elements in place, then get your javascript code working and then style it.
The javascript code is working to the extend that it can differentiate between strings that are palindromes and those that are not - I checked this using console.log() with various values throughout the code. In my humble opinion, this could be done with one event listener on the button - the user will enter a string, then click the button to see whether they have entered a palindrome.
I hope this helps. Happy coding.
1 Like
Tell us what’s happening:
Hi all, I posted my code here and got some helpful friendly people who suggested adjustments to make it work however I’m an extreme beginner so when trying to implement them it’s still not working please can anyone explain really specifically how to fix mine?
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">
<link rel="stylesheet" href="styles.css">
<title>Palindrome checker</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap')
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Kode+Mono:wght@400..700&family=Lobster&display=swap')
</style>
</head>
<body>
<main>
<h1 class="title">Is it a palindrome?</h1>
<h2 class="subtitle">Palindrome checker</h2>
</main>
‹div id="result"<
<input id="text-input" placeholder="Write your text here"> <button id="check-btn"><b>Find out</b>
<div>
<div id="palindrome-def">
<p id="definition">
<span role="img" aria-label="light-bulb">💡</span> A <dfn><u>palindrome</u></dfn> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
</div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
body{
background: #347fc4ff;
width: 510px;
display:block;
margin-top: 10%;
margin-left: auto;
margin-right: auto;
}
main{
max-height: auto;
max-width: auto;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 4%;
}
.subtitle, #check-btn, #text-input, #palindrome-def{
font-family: "Kode Mono", monospace;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
text-align: center;
}
.title{
font-family: "Lobster", sans-serif;
font-weight: 700;
font-style: normal;
border: solid #5d536bff;
border-radius: 10px;
padding: 7px;
text-align: center;
color: white;
}
#check-btn, #text-input{
border-radius: 5px;
}
#text-input, #check-btn{
font-size: 17px;
max-height: 30%;
max-width: 80%;
height: 80px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
margin-top: 3%;
margin-left: 2%;
margin-right: 3%;
border: transparent;
}
#check-btn{
background: #7d6b91ff;
}
#check-btn:active{
background: white;
}
#text-input{
margin-left: 3%;
border-bottom: solid #272838ff;
background: transparent;
border-radius: 2px;
}
#text-input:focus{
background: white;
}
#result{
max-height: auto;
max-width: auto; border-radius: 15px;
height: 20%;
width: 80%;
background: #989fceff;
margin-left: 7%;
margin-right: 7%;
justify-content: center;
align-items: center;
}
#palindrome-def{
background: #272838ff;
color: white;
font-size: 15px;
max-height: auto;
max-width: auto; border-radius: 15px;
width: 80%;
margin-left: 7%;
margin-right: 7%;
margin-top: 7%;
justify-content: center;
align-items: center;
}
#definition{
padding-top: 4px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 4px; justify-content: center;
align-items: center;
text-align: center;}
/* file: script.js */
document.addEventListener("DOMContentLoaded", function() {
const userInput = document.getElementById("text-input");
const palindromeButton = document.getElementById("check-btn");
const resultDiv = document.getElementById("result");
const checkPalindrome = () => {
const valueText = userInput.value.trim();
const regEx = /[^A-Za-z0-9]/gi;
const newText = valueText.toLowerCase().replace(regEx, "");
const reverseText = newText.split('').reverse().join('');
if (valueText.length === 0) {
return alert("Please input a value");
}
const resultText = newText === reverseText ? `<p>${valueText} is a palindrome</p>` : `<p>${valueText} is not a palindrome</p>`;
resultDiv.innerHTML = resultText;
}
palindromeButton.addEventListener('click', checkPalindrome);
});
Your browser information:
User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 16_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1
Challenge Information:
Build a Palindrome Checker Project - Build a Palindrome Checker
The #result div is not complete.
Hi @eve.b.joan !
I have spotted a few things in your code here regarding the failing tests
The first test that is failing is the
You should have a div element with an id of result.
You have some syntax errors here which is causing the tests to fail
But also you div with the id of result shouldn’t have any elements nested inside of it.
That result div should be empty by default.
So if want a div for the input and button, then I would suggest just using another div and applying styles for that.
When I made those changes, it passed for me
1 Like
As a sidenote, I wouldn’t have multiple styles tags like this
I personally would use in the links instead like this
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
or if you really wanted to use imports, it would be better to be inside the the css file instead of having multiple styles tags like you are currently doing.
hope that helps
1 Like
I have merged your three topics on the Palindrome Checker, please do not open multiple topics, you can post a new post in this topic to update the people helping you
1 Like
Hello I’m still not sure why this isn’t working please can you help?
<!DOCTYPE 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>
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<main>
<h1 class="title">Is it a palindrome?</h1>
<h2 class="subtitle">Palindrome checker</h2>
</main>
<div> id="result">
<input id="text-input" placeholder="Write your text here"> <button id="check-btn"><b>Find out</b>
<div>
<div id="palindrome-def">
<p id="definition">
<span role="img" aria-label="light-bulb">💡</span> A <dfn><u>palindrome</u></dfn> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
</div>
<script src="script.js"></script>
</body>
</html>
@eve.b.joan, please use the triple back tick method to paste your code in here so we can see it properly. @ilenia gave you the information you need to do this at the beginning of this thread. If you don’t understand those instructions then please let us know. I’ve gone ahead and updated your most recent code sample for you.
what is not working? you have posted your html
I initially didn’t realize that the problem was with the HTML, so I apologize for that. Subsequently, @ilenia, @ios-man, @bbsmooth, and @jwilkins.oboe tried to explain the issue by pointing out the same place. The problem stems from elements you’ve left open or not properly constructed in your HTML code. Most importantly, when there’s no closing div element to display the result, naturally, you won’t get any output. Now, you should revisit the HTML elements below to identify and correct the error. A div and a p element are still unclosed. Additionally, reviewing HTML topics again could be beneficial. Documentation has always been my greatest helper because even the simplest things can slip one’s mind. There’s no problem in that. Your JavaScript code is perfectly fine, clear, and elegant, but due to the HTML error, the entire program isn’t functioning.
Documentation:
HTML
Div tag
ID attribute
1 Like
Thank you for your responses I have been studying the links to the div and p posts and tried to adjust in a few different ways, but html still isn’t working. Please can anyone tell me why?
<!DOCTYPE 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>
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<main>
<h1 class="title">Is it a palindrome?</h1>
<h2 class="subtitle">Palindrome checker</h2>
</main >
‹div>
<div id="result">
<input id="text-input" placeholder="Write your text here"> <button id="check-btn"><b>Find out</b>
<div id="palindrome-def">
<p> id="definition"</p>
<span role="img" aria-label="light-bulb">💡</span> A <dfn><u>palindrome</u></dfn> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
</div>
<script src="script.js"></script>
</body>
</html>
The back ticks aren’t working so I’ve posted the code again please can you support?
<!DOCTYPE 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>
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<main>
<h1 class="title">Is it a palindrome?</h1>
<h2 class="subtitle">Palindrome checker</h2>
</main >
‹div>
<div id="result">
<input id="text-input" placeholder="Write your text here"> <button id="check-btn"><b>Find out</b>
<div id="palindrome-def">
<p> id="definition"</p>
<span role="img" aria-label="light-bulb">💡</span> A <dfn><u>palindrome</u></dfn> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
</div>
<script src="script.js"></script>
</body>
</html>
Hi all I’ve tried to adjust the button and line 20 but still not working, please can anyone tell me how to fix it? My brain is exhausted and I can’t figure it out
<!DOCTYPE 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>
<style>
@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap')
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Kode+Mono:wght@400..700&family=Lobster&display=swap')
</style>
</head>
<body>
<main>
<h1 class="title">Is it a palindrome?</h1>
<h2 class="subtitle">Palindrome checker</h2>
</main>
‹div id="result"<
<input id="text-input" placeholder="Write your text here"> <button id="check-btn"><b>Find out</b>
</button>
<div> id="palindrome-def">
<p id="definition">
<span role="img" aria-label="light-bulb">💡</span> A <dfn><u>palindrome</u></dfn> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
</div>
<script src="script.js"></script>
</body>
</html>