I need some help with this project. I’ve been reviewing my code for hours, making small adjustments and doing some tests with all the words the test suggests, but it still fails all the tests after #5. I’m completely lost here and don’t know what else to do. Here’s my code below.
<!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>
<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>
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;}
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);
});