Tell us what’s happening:
Hello!
I cant figure out why only the tests 1-4 pass. Although everything works in the preview tab when I enter test lines by hand.
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">
<title>Palindrome</title>
<link rel="stylesheet" href="styles.css">
<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=Abril+Fatface&family=Kanit:ital,wght@1,100&family=Roboto:wght@100;300&display=swap" rel="stylesheet">
</head>
<body>
<main>
<h1>Is it a Palindrome?</h1>
<section class="palindrome">
<label for="text-input" class="palindrome-text">Enter in text to check for a palindrome:</label>
<input class="palindrome-input" id="text-input">
<button class="palindrome-btn" id="check-btn">Check</button>
<div class="results-div hidden" id="result">teste</div>
</section>
<div class="palindrome-definition-div">
<p class="palindrome-definition">
💡 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: styles.css */
main {
width: 100%;
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
body {
background-color: #113f67;
margin: 0;
padding: 0;
}
h1 {
color: white;
font-family: 'Roboto', sans-serif;
font-weight: bold;
justify-content: center;
text-align: center;
}
.palindrome {
width: min(100vw, 450px);
min-height: 100px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 20px;
margin: 10px 0;
background-color: white;
flex-direction: column;
}
.palindrome-text {
color: #113f67;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
.palindrome-input {
height: 30px;
width: 250px;
text-align: center;
font-size: 1.2rem;
margin: 10px;
border: none;
border-bottom: 2px solid #a2a8d3;
}
.palindrome-btn {
width: 90px;
border: none;
padding: 10px;
border-radius: 15px;
background-color: #a2a8d3;
color: #fff;
cursor: pointer;
opacity: 0.5;
}
.palindrome-btn.active {
opacity: 1;
pointer-events: auto;
}
.hidden {
display: none;
}
.results-div {
font-weight: bold;
font-family: 'Roboto', sans-serif;
color: #113f67;
text-align: center;
padding-top: 30px;
}
.palindrome-definition-div {
width: min(100vw, 450px);
font-size: 1.3rem;
min-height: 140px;
background-color: #e7eaf6;
margin-top: 20px;
padding: 20px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;
color: #113f67;
}
.palindrome-definition {
vertical-align: middle;
text-align: center;
}
/* file: script.js */
const stringInput = document.getElementById("text-input");
const button = document.getElementById("check-btn");
const resultText = document.getElementById("result");
let cleanString;
button.addEventListener("click", () => {
if(stringInput.value === "") {
alert("Please input a value");
} else {
//reversing the input string
let reverseString = cleanString.split("").reverse().join("");
resultText.classList.remove("hidden");
if (cleanString !== reverseString) {
return (resultText.innerText = `${stringInput.value} is not a palindrome`);
}
return (resultText.innerText = `${stringInput.value} is a palindrome`);
}
})
stringInput.addEventListener("keyup", () => {
//removing all non-alphanumeric characters
cleanString = stringInput.value.replace(/[^A-Za-z0–9]/g, "").toLowerCase();
if(cleanString) {
return button.classList.add("active");
}
button.classList.remove("active");
});
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Challenge Information:
Build a Palindrome Checker Project - Build a Palindrome Checker