When I test my code in a live server from VScode, the palindrome checker works perfectly fine. Yet, when I paste it into freecodecamp to pass the user tests, it fails to function.
For instance, when I try the palindrome checker and input “Mom”, and click the submit button, nothing changes in the freecodecamp viewport, whereas if I do it in a live server, the text “Mom is a palindrome” appears below the input box.
Here is the HTML, CSS, and JS:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<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=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<section class="hero">
<h1>Is it a palindrome?</h1>
<h2>Check if it is, indeed, very much so, a palindrome!</h2>
</section>
<section class="palindrome-checker-container">
<div class="palindrome-checker">
<h3 class="instructions">Enter text to check if it is indeed a palindrome:</h3>
<input type="text" id="text-input" placeholder="Enter text here...">
<button id="check-btn">Submit</button>
<div id="result"></div>
</div>
<div>
<p>Did you know: A palindrome is a word that is spelt the same backwards and forwards?</p>
<p>For instance: "Wow" is spelled the same forwards and backwards.</p>
<p>No matter which order you do it in, you just get the same word: Wow!</p>
</div>
</section>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
font-family: "Josefin Sans";
font-size: 18px;
box-sizing: border-box;
}
html {
background-color: rgb(88, 86, 189);
}
.hero {
text-align: center;
background-color: aquamarine;
padding: 0.5rem;
}
.palindrome-checker-container {
padding: 1rem;
}
.palindrome-checker-container div {
margin: 1rem;
}
.palindrome-checker-container div * {
margin: 0.7rem;
}
.palindrome-checker{
text-align: center;
}
h1 {
font-size: 2rem;
font-weight: 500;
color: rgb(48, 48, 48);
letter-spacing: 1px;
}
h2 {
font-size: 0.8rem;
}
JS:
function checkIfPalindrome(input) {
const regex = /[-.,!"'/$\s_—]/g;
const cleanedInput = input.replace(regex, "").toLowerCase();
const preparedInput = input
.replace(regex, "")
.split("")
.reverse()
.join("")
.toLowerCase();
if (preparedInput == "") {
result.innerHTML = "Please input a value";
} else if (preparedInput == cleanedInput) {
result.innerHTML = `${input} is a palindrome`;
} else {
result.innerHTML = `${input} is not a palindrome`;
}
}
const result = document.getElementById("result");
const submitButton = document.getElementById("check-btn");
const input = document.getElementById("text-input");
submitButton.addEventListener("click", (e) => {
checkIfPalindrome(input.value);
input.value = "";
});
Any ideas on why it fails in the freecodecamp site but works when it is opened in a browser would be greatly appreciated!