Tell us what’s happening:
Please help me, I had this way longer and spent the past few hours making it better and my brain is absolute mush. I know it’s probably something small but I just can’t see it, I need fresh eyes.
Your code so far
<!-- file: index.html -->
<!DOCTYPE htlm>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="palindrome-checker" />
<title>Palindrome Checker</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body id="whole">
<h1 id="header">Is This A Palindrome?</h1>
<div>
<input id="text-input">
<button id="check-btn">Let's Check!</button>
</div>
<div id="result"></div>
</body>
</html>
/* file: styles.css */
#whole {
background-color: #66CDAA;
}
/* file: script.js */
const button = document.getElementById('check-btn');
const input = document.getElementById('text-input');
const result = document.getElementById('result');
const letsCheck = () => {
if (!input.value) {
alert('Please input a value');
} else {
const replacedChar = input.value
.replace(/\W/g, '')
.toLowerCase();
const reversedInput = replacedChar
.split('')
.reverse()
.join('');
if (reversedInput === replacedChar) {
result.innerHTML = input.value + ' is a palindrome';
} else {
result.innerHTML = input.value + ' is not a palindrome';
}
}
};
button.addEventListener('click', letsCheck);
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 AVG/120.0.0.0
Challenge Information:
Build a Palindrome Checker Project - Build a Palindrome Checker
like I said, it’s always the small things.