Tell us what’s happening:
Hi,
I have completed my project and it works as expected by I’m not passing tests, please help.
Your code so far
<!-- file: index.html -->
<!Doctype html>
<html lang = "en">
<head>
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
<meta charset= "utf-8">
<title>Palindrome Checker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<div id="logo" class="text">
<h1>Simplify Problems</h1>
<p>Check if your input is a Palindrome?</p>
</div>
<div id="user_input">
<label id="input_label" for="text-input" class="text">Enter in text to check for a palindrome:<br></label>
<div id="btn_inp">
<input id="text-input" type="text"></input>
<button id="check-btn" type="submit" >Check</button>
</div>
<p id="result"></p>
</div>
<div id="explanation" class="text">
<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>
</main>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const input = document.getElementById("text-input");
const checkBtn = document.getElementById("check-btn");
const result = document.getElementById("result");
// Clean input text function with a parameter for input
const cleanInputText = (text) => {
return text.trim().replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
};
checkBtn.addEventListener("click", () => {
if (!input.value) {
alert("Please input a value");
} else {
const cleanedText = cleanInputText(input.value).split("");
const cleanedTextCopy= [...cleanedText]
const reversedCleanedText = cleanedTextCopy.reverse().join("");
if(cleanedText.join("")===reversedCleanedText){
result.innerText =`"${input.value} is a palindrome"`
}else{
result.innerText = `"${input.value} is not a palindrome"`
}
}
});
/* file: styles.css */
:root{
--background-color: #B7B7B7;
--text-color: #2F3645;
--button-color: #ffa62e;
--container-color: #A5B68D;
--logo-color: linear-gradient(
-45deg,
#ffa62e,
#F9373B);
}
*,
*::before,
*::after{
box-sizing: box-border;
}
body{
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: var(--background-color);
}
main{
height: 100vh;
width: 100%;
max-width: 500px;
min-width: 300px;
max-height: 700px;
min-height: 400px;
padding: 20px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
flex-direction: column;
.text{
color: var(--text-color);
font-size: 1.5rem;
text-align: center;
}
h1{
background-image: var(--logo-color);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
margin: 0 auto;
font-size: 4rem;
}
#logo p{
font-size: 2rem;
}
#user_input{
background-color: var(--container-color);
height: 25%;
width: 100%;
border-radius: 5px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 25px;
padding: 5px;
}
#btn_inp{
height: 2rem;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 5px;
}
#text-input{
height: 100%;
width: 60%;
border-radius: 3px;
border: 0;
border-bottom: 2px solid var(--button-color);
font-size: 1.3rem;
}
#check-btn{
background-color: var(--button-color);
color: var(--text-color);
height: 100%;
width: 30%;
font-size: 1.4rem;
font-weight: 600;
border-radius: 20px;
border: 0;
}
#check-btn:hover{
background: var(--logo-color);
color: white;
transform: scale(1.02);
cursor: pointer;
}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36
Challenge Information:
Build a Palindrome Checker Project - Build a Palindrome Checker