HI.
I developed the “palindrome checker” project. If I run it in the browser it works fine, but the system tests fail. What could be the problem?
The test is located at: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-palindrome-checker-project/build-a-palindrome-checker
The code is as follows:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="app-container">
<div id="components-container">
<div id="top-container">
<div id="banner">the stellar coder</div>
<div id="app-title">PALINDROME CHECKER</div>
</div>
<div id="bottom-container">
<form>
<label for="text-input">Insert a word or a phrase <input id="text-input" /></label>
<button id="check-btn" type="button">Check</button>
</form>
<div id="result"></div>
<div id="about-palindrome">
A palindrome is a word, number, phrase, or other sequence of symbols that reads the same backwards as
forwards (<a href="https://en.wikipedia.org/wiki/Palindrome" target="_blank">Wikipedia</a>).
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
*,
::after,
::before {
margin: 0;
padding: 0;
}
body {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 10px;
color: #ffffff;
}
#app-container {
width: 100%;
height: 100vh;
background-color: #09039f;
display: flex;
align-items: center;
justify-content: center;
}
#components-container {
height: 60vh;
display: flex;
flex-direction: column;
}
#banner {
font-size: 3rem;
font-weight: bold;
}
#app-title {
font-size: 5rem;
font-weight: bold;
color: #ffc200;
}
#bottom-container {
width: 50%;
margin: auto;
}
#bottom-container form {
display: flex;
flex-direction: row;
align-items: center;
}
#bottom-container form label {
display: flex;
flex-direction: column;
width: 50%;
font-size: 1.5rem;
}
#text-input {
font-size: 1.5rem;
}
#check-btn {
width: 25%;
min-width: 110px;
height: 40px;
margin: 0 auto;
border-radius: 20px;
background: linear-gradient(45deg, #150cf1, #cc02ef, #916e00);
text-align: center;
font-size: 1.5rem;
font-weight: bold;
color: #ffffff;
}
#result {
width: 100%;
height: 90px;
margin-top: 10px;
padding: 5px;
background-color: #ffffff;
color: #060265;
font-size: 1rem;
border-radius: 10px;
border: 2px double #51005f;
}
#about-palindrome {
margin: 15px;
font-size: 1rem;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: #09039f;
background-color: #ffd44d;
}
@media screen and (max-width: 1035px) {
#app-title {
font-size: 4rem;
}
}
@media screen and (max-width: 840px) {
#app-title {
font-size: 3rem;
}
#check-btn {
font-size: 1rem;
font-weight: bold;
}
}
@media screen and (max-width: 625px) {
#app-title {
font-size: 2rem;
}
#banner {
font-size: 1.5rem;
font-weight: bold;
}
#check-btn {
font-size: 1rem;
font-weight: normal;
}
}
JS:
const textInputEl = document.querySelector('#text-input');
const checkButtonEl = document.querySelector('#check-btn');
const resultTextEl = document.querySelector('#result');
const setResultText = (text) => {
resultTextEl.innerText = text;
};
const isPalindrome = (text) => {
const regex = /[^a-zA-Z0-9]/g;
const sanitizedText = text.toLowerCase().replace(regex, '');
const reversedText = sanitizedText.split('').reverse().join('');
return sanitizedText === reversedText;
};
const execute = () => {
if (textInputEl.value === '') {
alert('Please input a value');
setResultText('');
} else {
if (isPalindrome(textInputEl.value)) {
setResultText(`${textInputEl.value} is a palyndrome`);
} else {
setResultText(`${textInputEl.value} is not a palyndrome`);
}
}
};
checkButtonEl.addEventListener('click', execute);
Thanks for your help.