Hello FreeCodeCamp.
I’m stuck on the last step of this project. I think my code does the job as intended, except for the fact it doesn’t take into account whitespaces and special characters (and maybe numbers?). I’ve narrowed it down to the regex not being right, but I can’t figure out why. Can someone help me please? Thank you!
My index.html:
<!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>
</head>
<body>
<h1>Is it a Palindrome?</h1>
<div id="checker-box">
<p>Enter in text to check for a palindrome:</p>
<input type="text" id="text-input" required />
<button type="submit" id="check-btn">Check</button>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
My styles.css
body {
background-color: #000068;
color: white;
text-align: center;
font-family: "Arial";
}
#checker-box {
background-color: #ffffff;
color: black;
}
#checker-box, #checker-box p {
padding: 1rem;
}
button, input {
padding: 0.5rem;
}
My script.js:
const input = document.getElementById("text-input");
const btn = document.getElementById("check-btn");
const result = document.getElementById("result");
btn.addEventListener("click", (e) => {
e.preventDefault();
const inputValue = input.value;
//alert when there's no value in the input
if(inputValue === "") {
alert("Please input a value");
} else {
//I figured the problem was probably on the line below...
inputValue.replace(/[^A-Za-z0-9]/g, '').toLowerCase();
const reversedInput = inputValue.split('').reverse().join('');
if(inputValue === reversedInput) {
const resultP = `<p>${inputValue} is a palindrome</p>`;
result.innerHTML = resultP;
} else {
const resultP = `<p>${inputValue} is a not palindrome</p>`;
result.innerHTML = resultP;
}
}
})
